JayHoon의 세상 모든 지식

Firebase + Next.js 14 기반 인증 시스템 설계Next.js App Router 환경에서 Firebase 인증을 구현하는 방식은 크게 2가지로 나뉩니다.1. ID 토큰 직접 사용 방식 인증 흐름: 클라이언트에서 getIdToken()으로 JWT 발급 → 요청 시마다 헤더에 첨부 전송 위치: Authorization: Bearer 유효 시간: 약 1시간 (자동 갱신 가능) SSR 지원: 비효율적 (수동 헤더 처리 필요) 보안 (XSS): 취약 (브라우저 JS 접근 가능) 보안 (CSRF): 안전 (헤더 기반) 권한 동기화: 클라이언트가 수동 갱신 필요 장점: 빠른 MVP 구현, 클라이언트 중심 앱에 적합 단점: SSR 및 장기 로그인 유지에 불리2. 쿠키 기반 세션 방식 ..

Nextjs14의 캐싱 메커니즘1. 요청 메모화(Request Memoization) 함수 반환값에 대해 서버에서, React Component tree의 재사용 데이터에 대해, req의 생명주기 동안 동작2. 데이터 캐시(Data Cache) 데이터에 대해 서버에서, 사용자 요청 및 배포 간 데이터 저장, 지속적으로 동작하며 재검증 가능3. 전체 경로 캐시(Full Route Cache) HTML, RSC 페이로드에 대해 서버에서, 렌더링 비용 절감 및 성능향상을 위해, 지속적으로 동작하며 재검증 가능4. 라우터 캐시(Router Cache) RSC 페이로드에 대해 클라이언트에서 네비게이션 시 서버 요청 감소를 위해 사용자 세션 또는 일정 시간 동안 유지.캐시 트리거 1) 경로가 정적으..

Request Life-Cycle클라이언트에서 서버로 요청이 들어오고, 그 요청이 처리되어 응답으로 돌아갈 때까지의 과정Request Lifecycle의 일반적인 흐름1. 클라이언트 요청 (Request Initiation)다음의 정보를 포함해서, 웹 브라우저나 클라이언트에서 HTTP 요청을 보냄. - URL : 요청할 리소스의 경로 ex) /api/users, /products - HTTP 메서드 : GET, POST, PUT, DELETE 등 - Headers : 요청에 대한 추가 정보 ex) 인증 토큰, Content-Type 등 - Body : 데이터 전송 시 사용(POST, PUT 요청에서 주로 사용됨).2. 서버 수신 (Server Receives Request)클라이언트가 요청을 보내면 서버..