Velopers
모든 태그
태그

React 기술 블로그 글

React 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.

전체 387개최신 20개 표시
홈에서 필터

관련 태그

#TypeScript187#LLM1,153#Next.js153#React Native29#Spring Boot229#디자인 시스템84#Vite23#browser7#UI/UX485#자동화367#검색328#MCP283

최신 게시글

20개 표시

프론트엔드

Vue.js와 React.js의 사용 경험 비교

React와 Vue의 컴포넌트 작성 방식, 반응성·상태 관리·SSR 생태계를 비교했습니다.\n경량 환경의 생산성과 협업성을 고려한 Vue 선택 경험을 공유했습니다.

#React#Vue.js#TypeScript
6900

프론트엔드

에이전트도 읽는 디자인 시스템, Clay 개편기

AI 에이전트가 읽는 Clay 디자인 시스템을 위해 Figma·React의 명칭과 구조를 통일했습니다.\n가이드라인과 CLI를 제공해 타입 에러를 없애고 작업 시간·비용을 절반 가까이 낮췄습니다.

#디자인 시스템#AI 에이전트#React
4600

백엔드

간편 로그인 보안 강화 사례

병원 전자문진 시스템의 링크 로그인에서 정식 회원 정보가 노출되는 취약점을 발견하고 보완했습니다. 로그인 방식을 토큰 claim으로 구분해 링크 세션을 게스트처럼 제한하도록 개선했습니다.

#Keycloak#Java#Spring
2700

아키텍처

역할 기반 라우팅에서 Episode 분리로

Banjang 웹 프론트엔드를 역할 기반 단일 앱에서 기능별 Episode 독립 배포 구조로 재정립한 회고입니다.\n모바일 Shell과 웹 Episode의 책임을 나누고, 로딩·전환 정책도 함께 정리했습니다.

#React#TypeScript#Vite
1400

데브옵스

[구현사례] 신규 프로젝트를 복제 한 번으로 시작하기: 보일러플레이트 템플릿 표준화

신규 프로젝트의 반복 작업을 줄이기 위해 보일러플레이트 템플릿을 표준화한 사례였습니다. 사람과 AI가 같은 규칙으로 개발하고, API·Bot·MCP·Batch를 하나의 코어에 연결하는 구조를 제시했습니다.

#Kotlin#Spring Boot#TypeScript
1800

프론트엔드

배달의민족 전자계약서 화면 개편기: AI에게 맡긴 것과 사람이 챙긴 것

전자계약서 화면을 AI와 함께 다시 설계하고, 뷰·폼·스토어로 나눠 구현한 과정을 소개했습니다. AI는 반복 구현을 맡기고 사람은 경계 설정과 명세 승인, 최종 품질 확인을 담당했습니다.

#React#디자인 시스템#react-hook-form
1100

프론트엔드

SpreadJS 엑셀 로딩 성능 최적화2

React와 TypeScript 기반 SpreadJS Excel 상세 화면의 초기 로딩 지연을 단계별 측정으로 분석했습니다. 모든 시트에 바인딩하던 구조를 필요한 시트만 처리하도록 바꿔 로딩 시간을 약 40~50% 줄였습니다.

#React#TypeScript#SpreadJS
2600

프론트엔드

집 나간 네트워크는 돌아왔는데 React.lazy는 왜 안 돌아올까

네트워크 복구 후에도 React.lazy 재시도가 막히는 이유를 모듈 맵 캐시로 설명했습니다. 정적 import 전환과 사전 로딩으로 오류를 해결했습니다.

#React#Vite#SPA
600

데브옵스

Nginx 프록시로 에러 화면 통합하기

Nginx 프록시 계층에서 에러 화면을 통합하고 정보 노출을 줄이는 방법을 정리했습니다. React API 요청까지 고려해 HTML과 JSON 에러 응답을 분기하는 설계도 설명했습니다.

#Nginx#Spring Boot#Tomcat
4401

프론트엔드

항공 프론트엔드 구축기 (9/10): 쓰자고 해 놓고 안 썼습니다

항공 프론트엔드 구축기 연재에서 상태관리 주제를 다뤘습니다. 다만 제공된 내용이 짧아 구체적인 구현 내용은 확인하기 어려웠습니다.

#React#상태관리
3600

AI

Scrum AI

스크럼에서 반복되던 유저스토리 작성과 점수 참고 과정을 줄이기 위해 AI 기능을 도입한 과정을 공유했습니다. 생성과 검색을 분리하고, 실제 사용 중 드러난 문제를 바탕으로 구조를 계속 조정했습니다.

#Claude#LLM#React
3300

AI

How Documents Find Developers at Toss

토스 프론트엔드 팀은 문서를 찾는 대신 문서가 개발자에게 찾아오게 만드는 시스템을 구축했습니다. RAG 챗봇과 자동 문서화 봇으로 지식의 축적과 검색을 연결했습니다.

#RAG#LLM#Cursor
5800

AI

AI가 만든 코드가 어드민이 되기까지

AI가 만든 코드를 어드민 화면으로 보여 주기 위해 브라우저 기반 Preview Runtime을 구축한 과정을 소개했습니다. 가상 파일 시스템, esbuild-wasm, import map, 패키지 사전 빌드로 격리성과 속도를 함께 해결했습니다.

#React#esbuild#TypeScript
9800

프론트엔드

결제 기능 공통 컴포넌트 구현기

React 공통 컴포넌트로 결제 SDK 연동과 상태 관리를 일원화한 구현 경험을 정리했습니다. 인라인·팝업을 통합하고 성공·실패 후처리와 멱등성까지 고려한 설계가 핵심입니다.

#React#React Native#WebView
3100

기타

FE News 26년 9월 소식을 전해드립니다.

FE 분야의 최신 기술 소식을 묶어 AI 역량, 프레임워크 마이그레이션, 성능 개선 흐름을 정리했습니다. 실무에 바로 참고할 만한 업데이트와 적용 포인트를 함께 소개했습니다.

#Next.js#Bun#React
1900

기타

Claude와 함께한 행사용 웹앱 개발기

오프라인 행사 운영을 웹앱으로 전환하며 1인 개발과 Claude 협업 방식을 정리했습니다. 설계, 디버깅, 리팩토링에서 AI를 파트너처럼 활용한 실무 인사이트를 공유했습니다.

#React#TypeScript#Next.js
4600

AI

AI가 분석한 리서치 결과, 어떻게 만들고 전달할까요?

리서치 분석을 LLM으로 만들고 전달하는 구조를 정리했습니다. 작업 분해와 평가 루프, SSE·알림음·채팅으로 사용자 경험을 개선했습니다.

#LLM#SSE#React
1200

프론트엔드

React Hook Form, Zod로 Form 관리하기

복잡한 다단계 폼을 React Hook Form, Zod, Jotai로 전략적으로 관리하는 방법을 정리했습니다. 조건별 스키마 분리, 임시 저장, 단계별 검증과 값 초기화 흐름을 설명했습니다.

#React#TypeScript#Zod
2300

프론트엔드

Unity를 모르는 프론트엔드 개발자가 AI로 Unity 서비스를 React로 옮긴 방법

Unity를 모르는 프론트엔드 개발자가 AI와 하네스 엔지니어링으로 Unity 서비스를 React/Next로 옮긴 과정을 다뤘습니다. 명세 중심 검증, IME 대응, 가상 스크롤 전환, 자동 안전장치와 도메인별 리뷰 분리를 소개했습니다.

#React#Next.js#Unity
5000

프론트엔드

React vs React Native: 프로젝트별 선택 가이드

React와 React Native의 렌더링 방식과 활용 기준을 비교해 프로젝트별 선택 기준을 정리했습니다. SEO와 배포 민첩성은 React, 네이티브 UX와 하드웨어 연동은 React Native가 적합했습니다.

#React#React Native#SEO
4100