본문 바로가기

전체 글238

(Next.js + App Router) fetch 실무편 2탄 - 상황별 cache 옵션 선택과 React Query 함께 쓰기 포스팅 목차 이 포스팅에서 다루는 것 Server Component에서 fetch 사용 패턴 상황별 cache 옵션 선택 가이드 fetch와 React Query - 역할을 어떻게 나누나? 실무에서 자주 하는 실수와 해결법 공부하면서 생겼던 의문점 (Q&A) 참고 자료 1. 이 포스팅에서 다루는 것 1탄에서는 Next.js가 fetch를 어떻게 확장했는지, Request Memoization과 Data Cache가 어떻게 동작하는지, 그리고 14버전과 15버전의 기본값 차이를 개념 위주로 정리했습니다. 2탄에서는 그 개념을 바탕으로 실제 코드에서 어떻게 패턴화해 쓰는지를 중심으로 정리합니다. Server Com.. 2026. 7. 4.
(Next.js + App Router) Next.js에서 fetch 사용해야 하는 이유 - 캐싱 메커니즘과 14 vs 15 버전 차이 포스팅 목차 이 포스팅에서 다루는 것 Next.js에서 fetch를 권장하는 이유 - axios VS fetch Request Memoization - 같은 요청은 한 번만 실행하기 Data Cache - fetch 캐싱 동작 원리 Next.js 14 vs 15 - 달라진 캐싱 기본값 cache 옵션 완전 정리 - force-cache / no-store / revalidate 비교 공부하면서 생겼던 의문점 (Q&A) 참고 자료 1. 이 포스팅에서 다루는 것 Next.js App Router를 처음 접하면 공식 문서에서 좀 의아한 부분을 만납니다. axios 같은 익숙한 라이브러리를 두고 네이티브 .. 2026. 6. 27.
(Next.js) BFF 프록시 패턴 2탄 - Next.js + React 멀티 앱 인증 공유와 서브도메인 쿠키 전략 포스팅 목차이 포스팅에서 다루는 것문제 상황 - Next.js와 React 앱이 공존할 때쿠키 도메인 공유 원리시나리오별 비교 - 어떤 도메인 구조를 선택할까?실무에서의 설계 기준 - 왜 서브도메인이 업계 표준인가인증(Authentication) vs 인가(Authorization) - 개념 분리실제 구현 코드공부하면서 생겼던 의문점 (Q&A)참고 자료1. 이 포스팅에서 다루는 것지난 포스팅에서 Next.js App Router에서 BFF 프록시 패턴으로 httpOnly 쿠키 인증을 구현하는 방법을 다뤘습니다.이번엔 거기서 한 발 더 들어간, 실무에서 진짜 부딪히는 문제를 다룹니다."사용자단은 Next.js, 관리자단은 React로 구현했는데, 관리자가 사용자단에서 로그인하면 관리자단에서도 자동으로 로그.. 2026. 6. 20.
(Next.js) BFF란?BFF 프록시 패턴으로 인증 구현하기 1탄 - httpOnly 쿠키와 catch-all 프록시 (App Router + TypeScript) 포스팅 목차이 포스팅에서 다루는 것BFF(Backend For Frontend) 패턴이란?쿠키 동작 원리 - 도메인과 httpOnlyReact(Vite) vs Next.js 보안 비교실무 구현 코드공부하면서 생겼던 의문점 (Q&A)참고 자료1. 이 포스팅에서 다루는 것Next.js App Router로 실무 프로젝트를 하다 보면, 처음엔 간단해 보였던 인증 흐름이 의외로 손이 많이 갑니다.저도 처음엔 "그냥 토큰 저장해서 헤더에 붙이면 되는 거 아냐?" 싶었는데, 막상 만들어 보니 쿠키 도메인 문제에 서버/클라이언트 분기, 보안 이슈까지 한꺼번에 쏟아졌습니다.그때 직접 부딪혀 가며 풀었던 BFF 프록시 패턴을, 개념부터 실무 코드까지 정리해 봤습니다.- Next.js App Router (13+) 기준으.. 2026. 6. 16.
(Claude) 개발자를 위한 Claude 실무 활용 완벽 가이드 2탄 - CLAUDE.md 팀 설계 + 서브에이전트 & 훅 & MCP 심화 (코딩 생산성 향상) 포스팅 목차이 포스팅에서 다루는 것 (1탄과 달라진 점)CLAUDE.md 실전 설계 전략 - 팀 레벨 컨텍스트 관리Claude Code 심화 - 서브에이전트(Sub-agents)Claude Code 심화 - 훅(Hooks)Claude Code 심화 - MCP(Model Context Protocol) 연동확장 포인트 총정리 - 언제 뭘 써야 할까?공부하면서 생겼던 의문점참고 자료1. 이 포스팅에서 다루는 것 (1탄과 달라진 점)1탄에서는 Claude 기본 활용법 (프롬프트 작성법, 코드 리뷰, .claude/commands 슬래시 커맨드 기초)을 다뤘습니다.이전 포스팅 보러가기 2탄은 실무에서 팀 단위로 Claude Code를 운영하는 방법에 집중합니다.1탄 : Claude가 뭔지 알고, 기본 프롬프트 .. 2026. 5. 2.