반응형 프로그래밍/프론트엔드28 RSC 하이드레이션: 서버는 왜 BFF를 건너뛰는가 NullVest Engineering 프론트엔드 아키텍처 · 2/2RSC 하이드레이션: 서버는 왜 BFF를 건너뛰는가2026-05-16 · ADR-0035 대상 코드 features/*/server · lib/server/react-queryTL;DR1편에서 BFF를 깔았지만, 정작 RSC 효용은 0이었다 — 'use client' 파일 289개, 데이터는 전부 클라이언트에서만 페칭됐다.같은 백엔드로 가는 문이 두 개다. 클라이언트는 BFF를 거치고(쿠키→JWT), 서버(RSC)는 BFF를 건너뛰어 백엔드에 직접 들어간다(세션→JWT 직접 주입).둘을 잇는 끈은 단 하나 — 공유 query key. 서버 prefetch → dehydrate → HydrationBoundary → 클라이언트 useQuer.. 2026. 5. 30. Next.js를 BFF로: 토큰을 브라우저에서 지우는 stateless JWE 세션 NullVest Engineering 프론트엔드 아키텍처 · 1/2Next.js를 BFF로: 토큰을 브라우저에서 지우는 stateless JWE 세션2026-05-10 · ADR-0034 대상 코드 apps/web/src/lib/server · app/apiTL;DRaccess token을 JS 메모리에 들고 있던 SPA 구조를 버리고, Next.js를 BFF(Backend-for-Frontend)로 세웠다.토큰은 AES-256-GCM으로 암호화된 httpOnly 쿠키(JWE)에 봉인 — 자바스크립트로는 절대 못 읽는다. XSS 토큰 탈취 표면 0.Redis 세션 스토어는 도입하지 않았다. 브라우저 요청을 받은 BFF가 매번 쿠키를 복호화해 Authorization: Bearer + X-Org-Id 같은.. 2026. 5. 30. [React] 사용자 이탈을 0%로: 인앱 브라우저 감지 및 리다이렉트 구현 여정 📂 GitHub 저장소🌐 라이브 데모💼 포트폴리오카카오톡, 에브리타임 등 인앱 브라우저에서 Google OAuth 로그인이 차단되는 문제를 분석하고, 앱별 URL 스킴을 활용한 외부 브라우저 리다이렉트 솔루션을 구현한 과정을 공유합니다. 📑 바로가기🎯 문제 정의🔍 원인 분석🔥 도전과제💡 해결 과정📈 결과🛠 기술 스택🎯 문제 정의: 왜 카카오톡에서 구글 로그인이 안 될까?대학 커뮤니티 에브리타임이나 카카오톡에서 공유된 링크를 클릭하면, 해당 앱 내부의 인앱 브라우저(In-App Browser)에서 웹페이지가 열립니다. 문제는 이 환경에서 Google OAuth 로그인이 완전히 차단된다는 것입니다.사용자가 "Google로 계속하기" 버튼을 누르면, 다음과 같은 에러 메시지가 표시됩니다:".. 2026. 1. 20. [React] 자연어 기반 시간표 자동 생성을 위한 프론트엔드 최적화 여정 📂 GitHub 저장소🌐 라이브 데모💼 포트폴리오대학생 AI 챗봇 서비스 강냉봇에 "자연어 기반 시간표 자동 생성" 기능을 추가하면서, 기획 부재 상황에서 애자일하게 MVP를 구현하고, 프론트엔드 주도적인 개발 방식을 통해 난관을 극복한 과정을 공유합니다. 📑 바로가기🎯 문제 정의🏗️ 아키텍처🔥 도전과제💡 해결 과정📈 결과🛠 기술 스택🎯 문제 정의: 수강신청은 왜 항상 힘들까?대학생들에게 수강신청 기간은 전쟁입니다. 듣고 싶은 과목들은 많은데, 어떤 과목이 어떤 시간에 열리는지, 내 공강 날짜와 겹치지는 않는지 하나하나 따져봐야 합니다. 기존의 시간표 서비스들은 대부분 수동 검색 방식이었습니다."알고리즘 A반 넣어보고... 안되네? B반으로 바꿔볼까? 아 그럼 데이터베이스랑 겹치네.... 2026. 1. 10. 이전 1 2 3 4 ··· 7 다음 반응형
