고민보단 실천을

React Suspense + React Query: 로딩/에러 경계 설계와 waterfall 방지 패턴Suspense는 로딩 UI를 선언적으로 만들 수 있지만, boundary를 잘못 두면 waterfall(연쇄 요청)과 에러 처리 난이도가 급격히 올라갑니다. 이 글은 React Query와 함께 Suspense를 쓸 때의 실무 패턴(로딩/에러 경계, prefetch, staleTime)을 정리합니다.Suspense는 경계를 어디에 두느냐가 체감 성능과 실패 격리를 좌우합니다.옵션/핵심 요소(3~6개)항목의미언제 쓰는지(실무 상황)Suspense boundary로딩 대체 UI 범위페이지 전체 vs 섹션 단위로 쪼개 체감 속도 개선Error boundary에러 대체 UI 범위한 섹션 실패가 전체 화면을 ..

React 성능 튜닝 체크리스트: Profiler로 re-render 원인 찾고 memo 남용 피하기React 성능 튜닝에서 가장 중요한 건 최적화가 아니라 '원인 찾기'입니다. 이 글은 Profiler로 병목을 확인하고, 상태 위치/props 안정화/가상화 같은 효과 있는 수단만 적용하는 체크리스트를 제공합니다.성능 튜닝은 증거 기반으로 해야 회귀를 줄입니다.옵션/핵심 요소(3~6개)항목의미언제 쓰는지(실무 상황)React Profiler렌더 비용 측정병목 컴포넌트를 증거로 찾을 때상태 위치리렌더 범위 결정상태가 상위면 트리 전체가 흔들림memo/useMemo/useCallback참조 안정화효과가 있을 때만 제한적으로 사용리스트 가상화DOM 수 감소수백~수천 행 리스트에서 필수파생 상태 제거불필요 계산..

Next.js Server Actions 실전: 폼 처리, 에러 처리, 중복 제출 방지 패턴Server Actions는 API 라우트 없이 서버에서 mutation을 처리할 수 있어 검색 수요가 빠르게 늘고 있습니다. 실무에서 중요한 건 폼 에러를 안정적으로 보여주고, 중복 제출을 막고, 권한 체크를 서버에서 확실히 하는 것입니다.서버 액션은 API와 동일한 수준으로 검증/권한/중복 처리를 설계해야 합니다.옵션/핵심 요소(3~6개)항목의미언제 쓰는지(실무 상황)'use server'서버 실행 표시DB 접근/비밀키 사용을 action으로 이동서버 검증최종 입력 검증클라 검증은 UX, 서버 검증은 보안/정합성useActionState에러/상태 관리필드 에러/전역 에러를 안정적으로 렌더링중복 제출 방지동시 실..

React에서 S3 Presigned URL로 파일 PUT 업로드하기: CORS와 Content-Type 함정이 글은 시리즈 3단계(마지막)입니다. 2단계에서 만든 /api/uploads/presign-put API로 presigned URL을 발급받고, React(브라우저)에서 그 URL로 S3에 직접 PUT 업로드합니다.시리즈: 1단계(s3-presigned-url-what-and-why.json) → 2단계(spring-boot-kotlin-s3-presigned-url-server.json) → 3단계(이 글)옵션/핵심 요소(3~6개)항목의미언제 쓰는지(실무 상황)presign 엔드포인트서버에서 URL을 발급받는 API웹에서는 보통 /api/uploads/presign-put로 고정하고 dev 프..

React·Next.js FSD 폴더 구조 템플릿: app/pages/widgets/features/entities/sharedFSD는 폴더를 예쁘게 나누는 기법이 아니라 의존성 흐름을 제어하는 방식이다. React와 Next.js 프로젝트에서 공통으로 쓰기 좋은 기본 템플릿을 먼저 고정하면 팀 생산성이 안정된다. 검색 유입이 많은 키워드(폴더 구조, 마이그레이션, 안티패턴, 상태관리)를 기준으로 실무 적용 포인트를 정리했다.FSD 공식 사이트 참조 이미지 (출처: feature-sliced.design)핵심 개념실무에서 먼저 결정할 기준이 주제는 코드 배치 기준을 먼저 정하고, 이후 네이밍과 import 경계를 린트로 고정하는 순서가 가장 안정적이다.핵심 요소 3~6개항목의미언제 쓰는지(실무 상황)ap..

아토믹 디자인 패턴 실무 가이드: React 컴포넌트 구조화와 예시 코드까지 한 번에프론트엔드 규모가 커질수록 컴포넌트 중복, 네이밍 혼란, 화면별 일관성 붕괴가 빠르게 발생한다. 아토믹 디자인(Atomic Design)은 UI를 Atom, Molecule, Organism, Template, Page로 계층화해 재사용성과 유지보수성을 높이는 대표 설계 패턴이다. 이 글은 초보~중급 개발자를 대상으로 개념 설명과 함께 바로 적용 가능한 React 예시 코드를 제공한다.Atomic Design 개념도 (출처: atomicdesign.bradfrost.com)1. 왜 아토믹 디자인이 필요한가컴포넌트를 화면 단위로만 쌓으면 비슷한 버튼, 입력창, 카드가 중복 구현된다. 아토믹 디자인은 최소 단위부터 설계해 조..

아래 포스트를 읽기 전 Jest와 React Testing Library에 대해 이해가 없다면 이전 글을 보고 오시는 것을 추천드립니다. 비동기 작업을 고려하여 테스트 코드를 작성해야 하는 이유 개발을 하다 보면 비동기 작업을 하는 경우가 많습니다. Click, 렌더링 등에 이벤트가 발생했을 때 특정 로직을 수행하도록 코드를 작성한 경험이 많을 겁니다. 또 로직을 즉시 실행할 수도 있지만 의도적으로 특정 시간 이후 실행되도록 한 경험도 있을 것이라 생각합니다. 간단한 예로 렌더링 된 후 2초가 지났을 때 화면에 title이 “Load”에서 “Finish”로 변경되는 화면이 있다고 합시다. 이 화면에 테스트 코드를 단순히 render후 Finish text를 찾는다면 에러가 발생합니다. 당연하죠. 변경하기..

React 프로젝트를 S3에 배포하는 방법을 정리하고자 합니다. AWS에 깊은 지식은 없으며 프로젝트, 회사 내에서 배포를 했던 경험을 바탕으로 정리하는 글임으로 참고하시는 분들은 이점 유의 바랍니다. 피드백은 언제나 환영입니다. S3 버킷 들어가기에 앞서 AWS 콘솔 로그인 등에 기본적인 과정은 생략하도록 하겠습니다. 버킷 생성 1. S3 접속 S3에 들어가서 우측에 "+ 위젯 추가"를 클릭 2. 버킷 만들기 "버킷 만들기" 클릭 3. 버킷 설정하기 이미지에 작성된 내용을 보기 전 이미지 아래에 각 요소에 대한 간단한 설명을 보시고 상황에 맞게 설정하시면 됩니다. 버킷 이름 버킷 이름은 자유롭지만 도메인과 연동할 예정이라면 동일 혹은 비슷하게 작성해 주는 게 좋습니다. 버킷이 쌓이다 보면 구분하기 어려..