Typescript, React 19, Next.js 15 App Router, Tailwind CSS, GitHub Actions, Docker, AWS EC2
-
Next.js App Router에서 클라이언트/서버 컴포넌트의 실행 환경 차이를 고려해 토큰 기반 인증 흐름을 설계하고 구현했습니다. – 블로그 포스트
src/lib/axiosClient.tssrc/lib/axiosServer.ts -
React의
cache()로 Next.js 서버에서 요청 결과를 캐싱하고, 클라이언트에서 데이터 수정 시revalidateTag()로 해당 캐시를 무효화해 서버 컴포넌트를 재렌더링하도록 구성했습니다.
src/app/(content-layout)/[groupId]/(groupId)/page.tsx -
UI의 낙관적 업데이트를 적용하기 위해 React 19의
useOptimistic(),useTransition()훅을 사용했습니다.
src/app/(content-layout)/[groupId]/(groupId)/_[groupId]/Tasklists/index.tsx -
동적 라우트되는 페이지마다 서로 다른 메타데이터를 적용하기 위해 Next.js의
GenerateMetadata()API를 사용했습니다.
src/app/(content-layout)/[groupId]/(groupId)/page.tsx -
컴포넌트의 기능과 에러 처리 로직을 분리하기 위해
react-error-boundary라이브러리와 Next.js의loading.tsx,error.tsx를 정의해 Error Boundary 개념을 적용했습니다.src/app/(content-layout)/[groupId]/(groupId)/page.tsx -
반응형 디자인으로 서로 다른 이미지를 적용하기 위해
<picture>태그와 Next.js의getImageProps()API를 사용했습니다.
src/app/_home/BackgroundImage.tsx -
React의
ContextAPI와CreatePortal()을 사용해 공통 Modal 컴포넌트를 구현했습니다.
src/components/common/modal