전체 글

toISOString()의 함정과 올바른 날짜 비교1. 문제의 핵심: ISO 8601과 로컬 타임존의 괴리자바스크립트의 Date 객체는 내부적으로 유닉스 타임스탬프(UTC 기준 밀리초)를 저장합니다.문제는 이를 문자열로 변환할 때 발생합니다.❌ 흔한 실수: toISOString() 절삭많은 경우 YYYY-MM-DD 형식의 날짜가 필요할 때 다음과 같은 코드를 사용합니다.new Date().toISOString().slice(0, 10); 이 방식은 한국(UTC+9) 기준 오전 00:00 ~ 08:59 사이에 "어제" 날짜를 반환합니다.toISOString()은 이름 그대로 UTC(0시) 기준의 표준시를 출력하기 때문입니다.구분한국 시간 (KST)UTC 시간 (ISO 표준)slice(0, 10) 결과출근 ..

Next Image 컴포넌트와 Preload를 활용한 이미지 최적화TL;DRNext.js Image 컴포넌트는 srcset을 통해 디바이스에 맞는 이미지를 제공하지만, 동적 src의 경우 체감 속도 향상이 크지 않다. 사용자 환경(뷰포트, DPR)에 맞는 정확한 이미지 URL을 계산해서 preload하면 브라우저 캐시 히트를 통해 실질적인 로딩 속도 개선을 얻을 수 있다.개요이미지 최적화의 가장 좋은 방법은 업로드 시점에 sharp 등으로 avif/webp 변환과 적절한 압축을 적용하는 것이다. 하지만 이미 외부 스토리지(S3, Supabase 등)에 저장된 대용량 이미지를 다뤄야 하는 경우, Next.js Image 컴포넌트의 최적화 기능과 preload 전략을 조합하면 사용자 체감 속도를 개선할 수 ..

2025년 한해가 저문다.또 한살 먹는다.그래도 조금씩 전진하고 있다.to 쌤들안녕하세요? 선생님과 올해도 개발 공부를 함께 해서 너무 즐거웠어요.선생님이 보시기에 2025년 한해 제 개발 실력이 조금은 성장한 것 같나요?from Claude올 한 해 함께한 대화들을 돌아보면, 정말 의미 있는 성장을 하셨다고 생각해요.눈에 띄는 성장 포인트들:시스템 설계 관점의 확장 - 단순히 "이거 어떻게 구현하지?"에서 "왜 이 구조인지, 어떤 트레이드오프가 있는지"를 고민하는 모습이 많아졌어요. Hasura DDN 검토할 때 복잡성 vs 실용성을 저울질하고, 결국 더 단순한 해법을 선택한 판단력이 인상적이었습니다.풀스택 영역으로의 확장 - 프론트엔드 개발자로 시작하셨지만, Supabase 연동, Auth.js 인증..

요약클라이언트 invalidate query는 쿼리키가 같더라도, 서버(RSC)의 prefetch query 까지 무효화 하지 않는다(tanstack-query)소프트 네비게이션 전환 중 RSC 페이로드가 stale할 수 있다면, 당연히 이 값을 근거로 한 서버 redirect는 의도와 다르게 동작할 수 있다(React RSC + Next.js redirect)상황앱 스택은 Next.js + supabase + vercel + tanstack query + axios플로우는 / -> /[id]/input -> /[id]/review -> /[id]/ready -> 결제 -> /[id]/loading -> /my/[id]/result 로 흐르고 각각 페이지 경계를 가진다.테이블에 state column은 ..

React2Shell (CVE-2025-55182) 뜯어보기직접 공격을 당해보니 위험성을 더 잘 느낄 수 있었습니다.이번 취약점 레벨은 CVSS 10.0 로 인증 없이 원격 코드 실행(RCE)이 가능했습니다.(server-action 을 안썼다면 그나마 안전했을까요?)영향 범위는 React 19.x, Next.js 15.x 16.x 및 RSC 기반 프레임워크 입니다(와 14는 안전하다! 했으나... 후속 취약점 발견으로 그냥 다 업데이트 해야 했습니다)1. 근본 원인?1.1 왜 이런일이..React Server Components의 Flight Protocol 역직렬화 과정에서 두 가지 결함이 결합되어 발생했습니다.Prototype Pollution 미방어: hasOwnProperty 검증 없이 객체 속..

Next.js Image 최적화 정리 Next.js 15+ 기준1. Next.js Image 최적화의 동작 원리빌드 타임이 아닌 런타임 최적화Next.js Image가 빌드 타임에 .next 폴더에 webp 이미지를 미리 생성해둔다고 생각하는 경우가 있습니다.그게 바로 저입니다... 실제로는 런타임에 on-demand로 최적화가 이루어 진다고 하네요.요청 흐름:1. 브라우저 → /_next/image?url=...&w=800&q=75 요청2. Next.js 서버 → 원본 이미지 fetch3. Next.js 서버 → 리사이즈 + webp/avif 변환4. .next/cache/images/ 에 캐시 저장5. 이후 동일 요청 → 캐시에서 즉시 응답동작 방식동적 src도 최적화 가능: 런타임 처리이므로 동적..

pnpm 문제 였나?해결 방법⚠️ Next.js 버전별 차이점Next.js 15.5+ 변경사항// Next.js 15.5부터는 require-in-the-middle이 기본적으로 opt-out됨!// 하지만 import-in-the-middle은 여전히 명시 필요const nextConfig: NextConfig = { serverExternalPackages: [ "import-in-the-middle", // 여전히 필요 // "require-in-the-middle", // 15.5+에서는 불필요 (기본 opt-out) ],};방법 1: next.config.ts 수정 (기본)// next.config.tsconst nextConfig: NextConfig = { serverE..

Turbopack 간접 의존성 경고와 해결법문제 상황 타임라인1️⃣ 초기 상황프로젝트 환경:Next.js 15.5.4 + TurbopackSentry + OpenTelemetry 설정 완료개발 서버 실행 중2️⃣ 경고 발생⚠ ./node_modules/.pnpm/@opentelemetry+instrumentation@0.204.0_@opentelemetry+api@1.9.0/node_modules/@opentelemetry/instrumentation/build/esm/platform/nodePackage require-in-the-middle can't be externalThe request require-in-the-middle matches serverExternalPackages (or the ..

OpenTelemetry 가이드 🔍📌 OpenTelemetry란?OpenTelemetry(줄여서 OTel)는 앱의 성능과 동작을 추적하는 오픈소스 관측성(Observability) 프레임워크 입니다즉, "내 앱이 어떻게 돌아가고 있는지" 실시간으로 들여다보는 도구입니다!🎯 핵심 개념: 3대 Pillar1. Traces (추적)사용자 요청이 시스템을 통과하는 전체 여정을 추적// 예: 사용자가 상품 구매 버튼 클릭[브라우저] 2ms → [API Gateway] 10ms → [주문 서비스] 50ms → [결제 서비스] 200ms → [DB] 30ms 총 소요 시간: 292ms2. Metrics (지표)시스템 상태를 숫자로 측정// 예시 지표들- 초당 요청 수: 1,234 req/s- 평균 응답..

Next.js Instrumentation 정리📌 Instrumentation이란?Instrumentation은 Next.js 13.2부터 도입된 기능으로, 앱이 시작될 때 딱 한 번 실행되는 초기화 코드를 위한 특별한 파일입니다.// app/instrumentation.ts 또는 src/instrumentation.tsexport async function register() { // 서버가 부팅될 때 실행되는 코드 console.log('Next.js 앱이 시작됩니다!');}🎯 주요 특징실행 시점서버가 처음 시작될 때Cold start 시 (서버리스 환경)모든 환경(Node.js, Edge, Client)에서 각각 한 번씩실행 환경 구분// instrumentation.ts - 서버용// in..