전체 글

텍스트 검색 쿼리 10초(??) → 1초 최적화 트러블슈팅TL;DRSupabase에서 대략 8만 행 풀 대상 해시태그+캡션 텍스트 검색 쿼리가 10초(????)+ 걸리던 것을, View → Materialized View + 인덱스 → pg_trgm GIN 인덱스 적용으로 1초까지 줄였다. 과정에서 중복 집계 버그도 발견·수정.개요회사에서 스크래핑 어쩌고 프로젝트를 진행 중이다.대충 인스타 트렌딩 릴스 스크래핑 어쩌구인데.. 검색 기능이 필요하게 되었다.이 검색 기능의 성능 문제를 해결해나간 과정을 정리한다.테이블 구조reels: 최초 수집 데이터 (릴스 기본 정보, 캡션 등)reel_metrics: 서드파티를 통해 +1일 후 수집한 메트릭 데이터. diff를 보기 위해 릴스당 2개의 행이 존재검색 시 ..

Sentry에서 잡힌 Safari TypeError의 정체 — Facebook In-App Browser의 주입 스크립트발단: Sentry에 잡힌 알 수 없는 에러프로덕션 Sentry 대시보드에 처음 보는 에러가 올라왔다.TypeError: Attempting to change value of a readonly property. at defineProperty ([native code]) at ? (app:///10e8bc2c-fca1-4aa8-9c1d-87e872816d2a/ready:1:4715) at global code (app:///10e8bc2c-fca1-4aa8-9c1d-87e872816d2a/ready:1:4819) 프로젝트는 Next.js 16 (App Router) +..

Next.js + tRPC + Prisma + TanStack Query, 아직 유효한 풀스택 타입-세이프 조합?TL;DRServer Action의 부상으로 tRPC가 한물갔다는 인식이 있지만, 실제로는 v11 릴리즈(2025.03)와 주간 70만+ npm 다운로드로 건재하다. 오히려 2024~2025년 연이어 터진 Next.js 보안 취약점(CVE-2025-29927, CVE-2025-66478 등)은 Server Action이 의존하는 미들웨어/RSC 프로토콜의 위험성을 드러냈고, 명시적 API 경계를 제공하는 tRPC의 아키텍처적 가치를 재확인시켜 주었다.이번에 사내 프로젝트를 Next.js + tRPC + Prisma + TanStack Query + AWS RDS(PostgreSQL) 스택으로 ..

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

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..