- Next.js는 클라이언트 사이드와 서버 사이드를 하나의 앱으로 통합하여 풀스택 애플리케이션 개발을 간소화합니다. 🚀
- React 서버 컴포넌트(RSC)는 서버에서 실행되어 무거운 연산이나 민감한 데이터(API 키 등) 처리에 적합하며, 코드 번들 크기를 줄여 성능을 최적화합니다. ⚙️
- 클라이언트 컴포넌트는 브라우저에서 실행되며, 클릭 이벤트 처리,
useState,useEffect와 같은 React 훅 사용 등 사용자 인터랙션에 활용됩니다. 🖱️ - 서버 컴포넌트에서 데이터를 가져오는 것이 권장되며, 이는 데이터 접근 및 보안에 이점을 제공합니다. 💾
- 서버 액션은 클라이언트에서 서버 함수를 직접 호출하여 데이터 제출을 간소화하며, 전통적인 API 엔드포인트 설정의 필요성을 줄여 개발 편의성을 높입니다. ✍️
- Next.js의 App Router는 파일 시스템 기반 라우팅을 사용하여 폴더 구조가 URL 경로를 정의합니다. 🗺️
layout.tsx파일은 여러 페이지에 걸쳐 공유되는 UI(예: 헤더, 푸터)를 정의하여 코드 중복을 방지하고 일관된 레이아웃을 유지합니다. 🖼️page.tsx파일은 특정 경로에 대한 페이지 콘텐츠를 정의하며, 해당 경로로 접근했을 때 렌더링됩니다. 📄create-next-appCLI 도구를 통해 TypeScript, Tailwind CSS, ESLint, App Router, Turbopack 등 최신 개발 환경이 사전 설정된 Next.js 프로젝트를 빠르게 시작할 수 있습니다. ✨- Next.js 프로젝트는 개발 모드(
npm run dev)에서 Turbopack을 사용하여 빠른 번들링 및 컴파일을 제공하며, 프로덕션 빌드(npm run build)는 최적화를 통해 배포 준비를 합니다. ⚡ - 브라우저가 이해할 수 있도록 TypeScript를 JavaScript로, Tailwind 클래스를 CSS로 변환하고 여러 파일을 하나로 묶는 번들링 과정이 필수적입니다. 📦
Recommanded Videos
