![]()
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 { ..
![]()
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? "..
![]()
첫 WIL 을 작성해보려고 합니다. 캠프 첫 주차를 무사히 통과했고, 배운 것이 참 많은 한 주 였습니다. (사전캠프 때부터 함께하긴 했지만)새롭게 만난 팀원들과 함께프로젝트를 진행하는 것이 쉽지많은 않았던 것 같습니다. 전공자 분들이 계셨지만, 프론트엔드 팀프로젝트는 모두 처음이셔서 하나하나 찾아보고 배우면서 진행해야 했기 때문입니다. 하지만 우리 팀은 케미(?)가 잘 맞았고, 금요일 쯤에는 흩어지는게 아쉬워서수업 종료 이후에도 모두가 남아 계속 이야기를 이어갈 정도로 팀워크가 좋았습니다. [github]1주일을 돌아보면, 우리가 가장 어려워했던 것은 github을 이용한 협업과정 이었습니다.명령어와 동작을 하나하나 이해하고, 알아가게 된 뒤에도 병합상황 등에서 뜻대로 되지..
![]()
오늘 첫 팀 프로젝트를 완료하고 발표까지 마쳤습니다! KPT 에 의거하여 회고를 작성해보려고 하니다. 먼저 K(Keep - 현재 만족하고 있는 부분) 로는, 1. 팀원 분들과의 협업 프로세스가 안정적으로 잘 진행되었다고 생각합니다. 2. 역할 분담 역시 자연스럽게 효율적으로 잘 이루어 진 것 같습니다. 다음으로 P(Problem - 문제라고 생각되는 부분) 로는, 1. 다른 팀의 발표를 보며, 디자인의 중요성을 다시한번 느꼈습니다. 2. readme 작성도 중요한 부분임을 배웠습니다. 3. crud 에서 auth 는 반드시 필요한 것임을 배웠습니다. 마지막으로 T(Try - 해결책) 로는, 1. 프론트엔드에서 디자인이 차지하는 부분이 정말 크다는 것을 체감했고, 디자인을 직접 해야하는 상황이라면, 전체 ..
![]()
첫 TIL 을 작성해보겠습니다. 어제 오늘, 팀원 분들과 계속 소통하면서 첫번째 프로젝트를 완성시켜 나가고 있습니다. 혼자서만 외롭게 써오던 github를 새롭게 만난 팀원분들과 함께 협업으로 사용하니 매우 신기합니다. 이 과정에서, 정확하고 매너있는 소통이 정말 중요한 덕목임을 다시 한번 배우는 시간이 되고 있습니다. 협업을 통해 자연스럽게 배우는 것이 정말 많은 것 같습니다. 오늘만 해도 git 과 github 의 여러 명령어들과 씨름하면서 branch 의 개념, stage와 commit 의 차이 pull 과 push 등에 대해 깨닫는? 시간이 되었습니다. 궁금한 것은 pull request 및 merge 에 대한 것인데, 내일 더욱 학습해보려고 합니다. 또한 내일부터는 오늘배운 TIL 작성가이드를 ..
