Build a Next.js Contact Manager App | Full CRUD, API Integration & Server Actions
- Next.js 프로젝트 기반 학습의 3부작으로, 연락처 관리 애플리케이션의 전체 CRUD(생성, 읽기, 업데이트, 삭제) 기능, API 통합 및 서버 액션 구현에 중점을 둡니다. 🚀
- 사용자 인증 및 세션 관리를 위해 쿠키를 활용하여 로그인한 사용자의 정보를 저장하고 접근하는 방법을 보여줍니다. 🔐
- 연락처 관련 모든 API 함수(조회, 생성, 수정, 삭제)를
contact.ts 파일에 모듈화하여 코드의 재사용성과 유지보수성을 높입니다. 🧩
ContactType 인터페이스를 정의하여 id, name, email, userId 등 연락처 데이터의 일관된 구조를 확립합니다. 📝
- 사용자 로그인 상태 및 연락처 데이터 유무에 따라 동적으로 UI를 렌더링하여 사용자에게 적절한 안내와 경험을 제공합니다. 🚦
getSession() 및 getContacts()와 같은 비동기 함수를 사용하여 서버 측에서 데이터를 효율적으로 가져와 페이지를 렌더링합니다. ☁️
ContactList와 같은 재사용 가능한 컴포넌트를 통해 연락처 목록을 표시하며, 컴포넌트 기반 아키텍처의 장점을 보여줍니다. 🏗️
- HTTP 요청을 위한
axios와 UI 아이콘을 위한 react-icons 등 외부 라이브러리를 통합하여 개발 효율성을 높입니다. 📦
- Tailwind CSS 유틸리티 클래스를 활용하여 홈페이지 및 연락처 목록의 스타일링을 빠르고 간결하게 처리합니다. 🎨