고민보단 실천을

Sentry 소스맵 배포 트러블슈팅: release/url prefix 불일치로 스택이 난독화될 때Sentry 이벤트는 올라오는데 스택트레이스가 minified로 보이는 문제는 검색 수요가 매우 큽니다. 원인은 대부분 release 불일치, 소스맵 업로드 누락, url prefix(경로) 불일치입니다. 이 글은 CI에서 소스맵을 안정적으로 붙이는 체크리스트를 제공합니다.소스맵은 빌드 결과와 Sentry 아티팩트가 정확히 매칭되어야 합니다.옵션/핵심 요소(3~6개)항목의미언제 쓰는지(실무 상황)release배포 식별자코드에서 보내는 release와 업로드 release 일치upload sourcemaps소스맵 업로드CI에서 빌드 후 업로드를 강제url prefix경로 매칭브라우저가 로드하는 JS URL과 ..

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

Next.js middleware 인증 구현: 로그인 리다이렉트 루프와 matcher 실수 방지Next.js에서 인증을 붙일 때 가장 많이 검색되는 문제는 '무한 리다이렉트(redirect loop)'입니다. 원인은 대부분 matcher 범위와 예외 경로(로그인/정적 자원)가 엇갈리는 경우입니다. 이 글은 App Router 기준으로 middleware 인증을 안전하게 구성하는 체크리스트를 제공합니다.middleware는 요청 초입에서 분기합니다. matcher와 예외 경로가 핵심입니다.옵션/핵심 요소(3~6개)항목의미언제 쓰는지(실무 상황)matcher미들웨어 적용 경로정적 리소스/로그인 페이지를 제외해 루프 방지public routes인증 없이 허용할 경로로그인/회원가입/헬스체크는 항상 통과API 분..

next-auth 세션 전략: JWT vs DB 세션, 쿠키(SameSite/Secure) 설정 체크리스트next-auth(Auth.js)를 붙이면 가장 많이 검색되는 게 'JWT 세션 vs DB 세션'과 '쿠키 설정(SameSite/Secure/도메인)'입니다. 이 글은 운영 요구(강제 로그아웃, 디바이스 관리, 확장성)로 전략을 선택하는 기준을 정리합니다.세션은 어디에 상태를 둘지 결정하는 문제입니다. 쿠키 옵션이 안정성을 좌우합니다.옵션/핵심 요소(3~6개)항목의미언제 쓰는지(실무 상황)JWT 세션무상태 토큰서버 저장 없이 확장성은 좋지만 회수/강제 로그아웃이 어려움DB 세션상태 저장형 세션강제 로그아웃/디바이스 관리/세션 목록이 필요할 때 유리SameSite쿠키 전송 정책리다이렉트/서드파티 흐름이..

Next.js Route Handler 파일 업로드: multipart/form-data 파싱과 edge/node 런타임 차이Route Handler에서 파일 업로드를 받으려면 multipart/form-data 파싱과 런타임 선택(edge/nodejs)이 핵심입니다. 검색으로 많이 나오는 'req.body가 비어있다', '배포에서 413' 같은 문제를 피하는 기본 패턴을 정리합니다.서버가 파일을 직접 받는다면 크기 제한/타입 검증이 필수입니다.옵션/핵심 요소(3~6개)항목의미언제 쓰는지(실무 상황)req.formData()multipart 파싱파일/필드를 표준 API로 추출runtimeedge vs nodejsAWS SDK/Buffer 사용이면 nodejs가 안전size limit요청 크기 제한DoS ..

Next.js App Router 캐싱 정리: fetch cache, revalidate, no-store로 데이터 최신화하기Next.js App Router에서 가장 많이 검색되는 문제는 이겁니다: 배포했는데 데이터가 안 바뀐다. 원인은 대개 캐싱/재검증(revalidate) 설정이 의도와 다르게 걸려서입니다. 이 글은 App Router 기준으로 fetch 캐싱을 실무 관점에서 정리합니다.Server Component에서 fetch 옵션이 캐시/재검증 정책을 결정합니다.핵심 개념 3개App Router에서 데이터 최신화는 보통 3가지 축으로 제어합니다: 1) fetch 캐시 정책 2) revalidate 재검증 간격 3) 라우트/세그먼트 단위의 동적 렌더링 강제입니다. 여기서 가장 영향력이 큰 건 f..

번외: Next.js Route Handler로 S3 Presigned URL 만들기 (서버만으로 presign API)이 글은 시리즈의 번외(4단계)입니다. Spring Boot 대신 Next.js 서버에서 presigned PUT URL을 발급하는 예시를 제공합니다. 업로드(클라이언트 PUT)는 3단계 React 패턴을 그대로 사용하면 됩니다.옵션/핵심 요소(3~6개)항목의미언제 쓰는지(실무 상황)runtime=nodejsEdge 런타임이 아닌 Node.js 런타임 사용AWS SDK를 Node 환경에서 안정적으로 사용(플랫폼 제약 회피)expiresInURL 만료(초 단위)짧게(예: 600초) 유지하고 재발급하도록 설계key 생성서버가 업로드 경로/파일명 생성클라이언트가 임의 key를 올리지 못하게 ..

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