전체 글

Next.js 15 테스트 환경 구축 가이드0단계: 조합유닛테스트: Vitest통합테스트: React Testing Library + MSWE2E테스트: Playwright1단계: 테스트 환경 구축1️⃣ Vitest 설정 (유닛 테스트)pnpm add -D vitest @vitejs/plugin-react jsdompnpm add -D @testing-library/react @testing-library/jest-dom @testing-library/user-eventvitest.config.tsimport { defineConfig } from 'vitest/config'import react from '@vitejs/plugin-react'import path from 'path'export def..

0. 아래와 같은 Auth.js 기본 세팅 + apollo 세팅은 되어있다는 가정// lib/auth.tsimport NextAuth from "next-auth";import Google from "next-auth/providers/google";import { HasuraAdapter } from "@auth/hasura-adapter";import { JWT } from "next-auth/jwt";declare module "next-auth/jwt" { interface JWT { id: string; role: string; } }export const { handlers, signIn, signOut, auth } = NextAuth({ adap..

React Query에서 클래스 메서드를 queryFn으로 사용할 때 주의사항문제 상황React Query를 사용하다가 다음과 같은 에러를 만났습니다:Cannot read properties of undefined (reading 'get')코드는 다음과 같았습니다:// queries.tsexport const useUserQuery = () => { return useQuery({ queryKey: ['user'], queryFn: api.getUser, // 이 부분이 문제! });};// apis.tsclass ApiClient extends BaseApiClient { public getUser() { return this.get("/api/auth/user"); }}기본적..

Hasura 트랜잭션 처리: Actions와 Functions 활용하기📌 TL;DR (한 줄 요약)Hasura v2는 단일 mutation 내부는 자동 트랜잭션이지만,복잡한 로직은 Actions 또는 PostgreSQL Functions로 처리해야 합니다.🎯 핵심 정리단일 GraphQL mutation은 자동으로 트랜잭션 처리여러 mutation을 별도 호출하면 트랜잭션 아님Hasura Actions로 커스텀 비즈니스 로직 구현 (추천)PostgreSQL Functions (RPC)로 DB 레벨 트랜잭션 처리Apollo Client의 배치는 서버 트랜잭션이 아님1. Hasura의 트랜잭션 동작 방식✅ 자동 트랜잭션 (보장됨)# 하나의 mutation 요청 = 하나의 트랜잭션mutation Create..

PostgREST와 Hasura의 관계Hasura는 PostgREST를 사용하지 않습니다.Hasura와 PostgREST는 완전히 별개의 프로젝트!차이점 비교아키텍처Supabase:PostgreSQL → PostgREST → REST API → Supabase JS ClientHasura:PostgreSQL → Hasura Engine → GraphQL API → Apollo Client기술 스택 SupabaseHasura프로토콜REST (PostgREST 사용)GraphQL (자체 엔진)쿼리 언어URL + 체이닝GraphQL엔진PostgREST (Haskell)Hasura Engine (Haskell)철학REST + GraphQL 스타일 쿼리순수 GraphQL참고 블로그 글의 의미PostgREST? "..

Supabase의 PostgREST: GraphQL처럼 쿼리하는 SQL📌 TL;DR (한 줄 요약)Supabase는 PostgREST를 통해 GraphQL의 선언적 쿼리 스타일을 REST API로 구현하여, SQL JOIN을 직관적인 체이닝 메서드로 사용할 수 있게 합니다.🎯 핵심 정리Supabase JS는 SQL을 직접 쓰지 않고 체이닝 메서드 사용PostgREST는 GraphQL의 장점과 REST의 단순함을 결합한 프로토콜Foreign Key 기반으로 자동 관계 생성 - 별도 설정 불필요중첩 쿼리로 복잡한 JOIN도 간단하게 표현TypeScript 타입 자동 생성으로 완벽한 타입 안정성1. SQL JOIN의 전통적 방식전통적인 SQL JOIN-- 게시글 + 작성자 정보SELECT posts.i..

Supabase RPC: 트랜잭션과 보안을 위한 필수 도구📌 TL;DR (한 줄 요약)Supabase RPC는 성능 최적화뿐만 아니라 Row Level Security 하에서 안전한 트랜잭션 처리를 위한 핵심 기능.🎯 핵심 정리Supabase JS 클라이언트는 트랜잭션을 지원하지 않음RPC (PostgreSQL Functions)를 사용하면 서버 측에서 트랜잭션 보장RLS (Row Level Security)는 행 단위 접근 제어로 클라이언트의 직접 DB 접근을 안전하게 보호RLS 정책의 USING 절은 관계 테이블을 통한 복잡한 권한 체크 가능트랜잭션 + RLS를 함께 사용하면 안전하고 일관된 데이터 처리 가능1. 문제 상황: Supabase JS의 한계Supabase JS는 트랜잭션을 지원하지 않..

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