이 프로젝트는 온라인 서점 관리자 대시보드 웹 애플리케이션은 서점의 책 목록을 관리하고, 책의 상세 정보를 확인하거나 수정하며, 각 책의 판매 수량을 모니터링하는 데 사용됩니다. 이 애플리케이션은 서점 운영자가 책을 쉽게 관리하고, 추가, 수정, 삭제할 수 있는 기능을 제공합니다. 프론트엔드는 Next.js, Tailwind CSS, TypeScript를 사용하여 개발되며, 백엔드는 RESTful API로 구현되어 데이터베이스와 통신하여 책 데이터를 저장하고 조회합니다.
- Next.js와 TypeScript를 사용하여 웹 애플리케이션 개발
- 책 목록 페이지
- 페이지당 10개 항목을 표시하는 페이지네이션 적용
- 책 제목과 저자를 기준으로 검색 기능 구현
- 책 상세 정보 페이지 구현
- 책 추가/제거 및 수량 조절 기능 구현
- 데이터베이스와 통신하는 기본적인 RESTful API 설계 및 구현
- 1. 책 목롣 조회 (GET /api/books)
- 2. 책 상세 정보 조회 (GET /api/books/:id)
- 3. 책 추가 (POST /api/books)
- 4. 책 정보 수정 (PUT/api/books/:id)
- 5. 책 삭제 (DELETE /api/books/:id)
- TypeScript를 사용하여 프론트엔드와 백엔드 간의 타입 안전성 보장
- 핵심 기능에 대한 기본적인 테스트 작성
- 예: 책 추가/삭제, 책 목록 조회의 정상 동작 테스트
✅ 책 목록 조회 (검색 및 필터링 포함)
✅ 책 상세 정보 페이지
✅ 책 추가 / 삭제 / 수량 조절 기능
✅ 백엔드 API 설계 및 데이터베이스 연동
✅ TypeScript 적용 (프론트엔드 & 백엔드 타입 안전성 보장)
✅ 기본적인 테스트 작성 (책 추가/삭제, 목록 조회 테스트 포함)
- Frontend: Next.js (App Router), Tailwind CSS, TypeScript
- Backend: Next.js API Routes, MySQL (Sequelize)
- Deployment: Vercel
- Node.js (v16.0.0 or higher)
- MySQL (v5.7 or higher)
- npm (v8.0.0 or higher)
git clone https://github.com/yourusername/bookstore-admin.git
cd bookstore-admin| Variables |
|---|
| TABLE_NAME="Your MySQL Schema Name" |
| ROOT_USERNAME="Your MySQL Root UserName" |
| MYSQL_PASSWORD="Your MySQL Password" |
| DB_HOST="Your DB Local host" |
| DB_PORT="Your Local host port number" |
| NODE_ENV="development" |
| NEXT_PUBLIC_BASE_URL="Your currently running on pablic base url for example: http://localhost:3000" |
npm installnpm run dev| 메서드 | URL | 설명 |
|---|---|---|
| 📍 GET | /api/books | 전체 책 목록 조회 |
| 📍 GET | /api/books/:id | 특정 책 정보 조회 |
| 📍 POST | /api/books | 새 책 추가 |
| 📍 PUT | /api/books/:id | 책 정보 수정 |
| 📍 DELETE | /api/books/:id | 책 삭제 |
📦 bookstore-admin
┣ 📂 config
┃ ┣ 📜 mySQL.ts
┣ 📂 errors
┃ ┣ 📜 ErrorArchives.ts
┣ 📂 models
┃ ┣ 📜 Boook.ts
┣ 📂 public
┣ 📂 src
┃ ┣ 📂 app
┣ ┃ ┣ 📂 api
┃ ┃ ┃ ┣ 📂 books # API 엔드포인트
┃ ┃ ┃ ┃ ┣ 📂 [bookId] # API bookid
┃ ┃ ┃ ┃ ┣ 📜 route.ts (GET, POST, PUT, DELETE)
┃ ┃ ┃ ┣ 📂 books # API 엔드포인트
┃ ┃ ┃ ┃ ┣ 📂 [bookId] # API BookId page
┃ ┃ ┃ ┣ 📂 components # UI 컴포넌트
┃ ┃ ┃ ┣ 📂 utils
┃ ┃ ┃ ┣ 📂 types
┣ 📂 utils # 유틸리티 함수 (DB 연결 등)
┣ 📜 .env.local (환경 변수)
┣ 📜 next.config.js
┣ 📜 package.json
┣ 📜 README.md
┗ 📜 tsconfig.json
- 제가 일부로 Next.js Image 성능 최적화 component를 일부로 안 썼습니다.원인 제가 책 상세 정보를 입력할 때 ImageUrl를 같이 입력하게 했습니다.그래서 Next.js Image를 사용하면 제가 원하는 ImageUrl를 입역할 수 없습니다. 매번 다향한 ImageUrㅣ 입력할 때 nextconfig 파일에 domain 추가해야 되기 떄문입니다. 그낭 img 탁를 쓰면 이런 문제 없기 때문입니다.
<div className="md:w-1/3">
{book && (
<img
src={book.imageUrl}
alt={book.title}
width={250}
height={350}
className="rounded-lg shadow-md"
loading="lazy"
/>
// <Image
// src={book.imageUrl}
// alt={book.title}
// width={250}
// height={350}
// className="rounded-lg shadow-md"
// />
)}
</div>- Dashboard 에는 Order,Users,Settings page들을 UI 디자인만 구현해 났습니다. Interactivity가 없습니다!
- Dashboard에 로그인 할 떄 까자(FAke)user 정보로 고그인 할 수 있게 구현했습니다. Authentication and Authorization 기능 없습니다.
- 배포된 URL에 방문하시면 Database에서 데이터를 가져 오는데 문제가 있는 것 같습니다.MySQL 사용했기 떄문에 DATABASE 다로 HOSTING 했습니다. 그런데 Vercel로 배포하면 Database에서 데이터를 안 가져옵니다.여러번 노력했지만 아직 해결 못 했습니다.쇱게 MySQL 대신 Mongoose 썼으면는 이런 문제 었었을까 싶습니다. 그런데 Local Envoirment VsCode에 다 잘 실행되고 있습니다.MySQL WorkBranch에서도 HOSTING 했던 데이터 연력이 잘 되었습니다. 문제는 Vercel과 제가 MySQL Hosting 했던 Railway configration에 문제가 있듯 합니다. 아무튼 배포된 URL로 Online hosted MySQL DATABASE 연결을 아직도 못 했습니다.
| Error & Problem Title | Status | Difficult | Date |
|---|---|---|---|
| Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON |  |
middle | Feb 15, 2025 |
| useSearchParams() should be wrapped in a suspense boundary |  |
low | Feb 15, 2025 |
| Hydration failed | |
middle | Feb 14, 2025 |
| Params should be awaited | |
low | Feb 14, 2025 |
| div cannot be child of tr | |
low | Feb 14, 2025 |
