전체 글

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

PostgREST vs GraphQL(Hasura): 현실적인 기술 스택 비교PostgreSQL을 사용하는 프로젝트에서 API 레이어를 구성할 때, 두 가지 옵션을 비교해봤습니다.이 비교는 GraphQL이 정말 필요한 상황은 언제인가? 에 대해서 생각해보다가 시작하게 되었습니다. GraphQL + Hasura + codegen 의 강력함은 프로젝트를 해보면서 알게 되었는데다만 PostgREST 에서도 유연한 쿼리, 관계 기반 페칭이 잘 되므로(supabase.js 에서 보듯...) 요구사항만 맞는다면 Hasura 혹은 resolver 구성에 드는 비용을 줄이면서도GraphQL의 이점을 유사하게 구사할 수 있을 것 같았습니다. 그래서 GraphQL + Hasura 에 대항할 수 있는 REST 스펙을 아래와..

naver 로그인 구현 with Supabase 3편TL; DR: admin 권한 쓰면 끝작년 7월에 supabase에서 편법(?) naver 로그인 기능을 구현했었습니다.1년 넘게 지났는데 갑자기 편법 말고 진짜로 구현이 되겠잖아? 생각이 들었어요. supabase 어드민 권한을 쓰면 auth 스키마에도 입력이 될 것 같았고해봤더니 역시 아주 잘 되었습니다... 이 생각을 왜 작년엔 못했을까요? 한가지 문제는 네이버 OAuth 를 프로덕션으로 쓰려면네이버 개발자센터 > 내 애플리케이션 > 네이버 로그인 검수 상태에서 검수가 완료되어야 합니다. 검수가이드 보면 대단한 걸 요구하는건 아닌데 귀찮습니다.카카오는 검수 없이도 기본적인 정보들은 그냥 받을 수 있는데네이버는 아무튼간 안되는 것 같습니다. 결론은,..

🍪 Cookie, CORS, Site/Origin 총정리1. TL;DRexample.com(프론트엔드)에서 api.example.com(백엔드)으로 인증 요청을 보낼 때:Same-Site이지만 Cross-Origin입니다쿠키에 domain: ".example.com" 설정 필요sameSite: "lax" 충분 (Cross-Site 아니므로)백엔드 CORS 설정 필수 (별개 정책!)Apollo Client 등 라이브러리 credentials: "include" 필수핵심: 쿠키 정책(브라우저)과 CORS(서버) 둘 다 맞춰야 성공..2. Site vs Origin 개념📚 정의Origin = Protocol + Domain + Port (모두 일치해야 Same-Origin)Site = 루트 도메인(eTLD..

실전적 Apollo Client 구현기1. 문제 상황기술 스택Next.js 15 (App Router)Hasura GraphQLApollo Client with @apollo/client-integration-nextjs해결해야 했던 문제들중복 코드 문제: 서버용, 어드민용, 클라이언트용 총 3개의 Apollo Client 인스턴스가 필요했는데, 각각에 대해 Apollo Links를 별도로 작성하면 코드 중복이 심각함서버/클라이언트 경계 처리: RSC(React Server Components) 환경에서 서버와 클라이언트의 인증 방식이 달라 각각 다른 처리가 필요토큰 갱신 로직: 클라이언트에서만 토큰 갱신이 가능하므로 환경별로 다른 에러 처리 필요2. 해결 방안: 팩토리 패턴과 의존성 주입2.1 팩토리 ..

Hasura(GQL) 사용시 3rd-Party 쿠키 정책 문제Q) credentials: "include" 인데도 쿠키 자동 전송 안될 수 있는거 맞음?제가 cookie 기반에서 httponly, secured, domain, samesite 설명을 여러가지로 변주해서 시도해봤지만 결론은 브라우저의 third-party cookie 정책으로 인해 쿠키가 자동 전송되지 않는데 이게 맞나요?(심지어 서브도메인 - api.myapp.com myapp.com 이더라도)A) 맞다.맞아요. 결론부터 말하면: 브라우저가 Hasura로 쿠키를 보내주지 못하면(3rd‑party 쿠키 차단), Remote Schema를 써도 Hasura가 JWT를 검증할 수 없고, 따라서 x-hasura-user-id 같은 세션 변수도..

Server 용 Apollo Client 생성시 주의점!TL; DRregisterApolloClient는 싱글톤처럼 동작하지만, getToken을 함수로 전달하면 매 요청마다 토큰을 새로 읽어와서 안전할 수 있음. 참고하지만 캐시 오염 가능성은 여전히 존재하므로, 민감한 데이터는 fetchPolicy: 'no-cache' 사용을 권장.getToken 없이 credentials: 'include'만으로는 절대 작동하지 않음!가장 안전한 방법은 요청별 클라이언트를 생성하는 것이지만, getToken을 올바르게 구현하면 registerApolloClient만으로 충분히 사용 가능.코드 예시// /lib/apollo/server.tsimport { Defer20220824Handler } from "@apoll..

GraphQL Yoga 역할(+Hasura Remote Schema)예시// /api/graphql/route.tsimport { DateTimeTypeDefinition } from "graphql-scalars";import { createSchema, createYoga } from "graphql-yoga";import { v4 as uuid } from "uuid";interface NextContext { params: Promise>;}const typeDefs = /* GraphQL */ ` type Query { session: Session! } type Mutation { ok: String! } type Session { ..