전체 글

Terraform으로 Neon DB + Hasura GraphQL API 서버 구축하기프로젝트 개요백엔드 인프라: Neon PostgreSQL + Hasura (EC2) + AWS Secret Manager + IAM프론트엔드: Next.js (Vercel 배포 예정) + Apollo Client + GraphQL Code Generator패키지 매니저: pnpm1. 인프라 구축 (Terraform)1.1 사전 준비Neon DBneon.tech 가입 및 프로젝트 생성Connection string 복사 postgresql://[user]:[password]@[endpoint]/[dbname]?sslmode=requireSSH 키 준비# SSH 키가 없다면 생성ssh-keygen -t rsa -b 4096..

TanStack Query DevTools vs Apollo DevTools 비교TanStack Query DevTools ✨import { ReactQueryDevtools } from '@tanstack/react-query-devtools' // 기능:// ✅ 모든 쿼리 상태 실시간 확인// ✅ 캐시 데이터 탐색// ✅ 쿼리 무효화/리페치 버튼// ✅ 타임라인// ✅ 직관적인 UIApollo DevTools 😢// 브라우저 확장 프로그램 설치 필요// Chrome/Firefox Extension// 기능:// ⚠️ 쿼리 목록 (기본적)// ⚠️ 캐시 탐색 (복잡함)// ⚠️ Mutation 추적 (불편함)// ⚠️ UI가 투박함// ❌ 타임라인 없음// ❌ 실시간 업데이트 약함해결책: Cus..

문제 상황일반적인 Next.js + Apollo 설정// lib/apollo-client-rsc.ts (Server Component용)import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'import { registerApolloClient } from '@apollo/experimental-nextjs-app-support/rsc'export const { getClient } = registerApolloClient(() => { return new ApolloClient({ cache: new InMemoryCache(), link: from([ loggerLink, // 중복 1 err..

ApolloLink = GraphQL 요청/응답 미들웨어Express.js의 미들웨어와 완전히 같은 개념이에요:Express.js 미들웨어// Expressapp.use((req, res, next) => { console.log('Request:', req.url) // 로깅 next() // 다음 미들웨어로})app.use((req, res, next) => { req.user = getCurrentUser() // 인증 next()})app.use((req, res, next) => { if (!req.user) { return res.status(401).send('Unauthorized') // 권한 체크 } next()})Apollo Link (같은 패턴!)// Apo..

캐시 키 비교TanStack Query// 명시적으로 캐시 키 지정useQuery({ queryKey: ['campaigns', { status: 'open', page: 1 }], queryFn: () => fetchCampaigns({ status: 'open', page: 1 })})// 캐시 구조{ '["campaigns",{"status":"open","page":1}]': { data: [...], ... }, '["campaigns",{"status":"open","page":2}]': { data: [...], ... },}Apollo Client// 캐시 키 자동 생성!useQuery(GET_CAMPAIGNS, { variables: { status: 'open', page: 1..

1. InMemoryCache의 typePolicies기본 개념: Apollo Client의 캐싱 메커니즘Apollo Client는 GraphQL 응답을 메모리에 캐싱해서 같은 데이터를 다시 요청할 때 네트워크 요청 없이 즉시 반환.const cache = new InMemoryCache({ typePolicies: { Query: { fields: { campaign_application: { keyArgs: ['where', 'order_by'], merge(existing, incoming) { return incoming }, }, }, }, },})상세 분석typePoli..

Hasura의 특별한 점일반 GraphQL 서버 (Apollo Server 등):GraphQL → 직접 작성한 리졸버 → SQL 쿼리 (여기서 DataLoader 필요!)Hasura:GraphQL → Hasura 엔진 → 최적화된 SQL 자동 생성 (DataLoader 불필요! 이미 내장됨)Hasura가 자동으로 해주는 것들1. 자동 JOIN 최적화query GetCampaign { campaign(where: { id: { _eq: "abc-123" } }) { id title applications { id status influencer { id username platforms { ..

Hasura(v2) GraphQL + Next.js + Apollo ClientHasura(v2) 로 GraphQL API서버를 만들고, DB는 local PostgreSQL 을 docker 로 띄울 것입니다.대충 반려동물 주제로 유저, 포스트, 좋아요, 댓글, 동물정보 테이블을 만들고,seeding은 faker.js 이용하여 typescript 로 합니다. 쿼리와 뮤테이션 작성후 codegen까지 완료되면 Next.js 15 app router 에 맞게apollo cilent 설정을 하고 프론트 개발을 하면 됩니다.순서프로젝트 init의존성 설치여기 참고하여 curl 로 docker-compose 파일 받기docker 띄우기(시딩용 ports: - "5432:5432" 추가필요)localhost:808..

axios client 의 실전적 구성1. 문제 정의axios 클라이언트 구성을 매번 그때그때 하다보니 문제가 생길때가 많음그러다보니 구조화가 되어있지 않아 어떻게했었지 하고 또 찾아봄요청, 응답 interceptor 작성을 관성적으로 했더니 사용할때 제네릭을 두번씩 api.get 이런식으로 쓰고 있었음2개 이상의 axios 클라이언트를 만들때(ex 서버용, 클라이언트용 등) 계층화가 안되어있어 불편타입 안전성 부족과 에러 처리가 일관성이 없음환경별 설정 관리가 어려움2. 해결 방안클래스로 axios api 클라이언트를 구성한다api-client 추상 클래스 에서는 axios instance 를 생성하고 기본 메서드를 오버라이드한다기본메서드를 오버라이드 하는 이유는 사용시 제네릭 입력 두번 안하고 편하게..

Biome 로 테일윈드 클래스 저장시 자동정렬하기biome.jsonclevel을 errorfix를 safe"nursery": { "useSortedClasses": { "level": "error", "fix": "safe", "options": { "attributes": [ "classList" ], "functions": [ "clsx", "cva", "cn" ] } }}.vscode/settings.jsoneditor.codeActionsOnSave에 아..