NextJS를 기반으로 한 개인 기술 블로그와 포트폴리오 웹 애플리케이션입니다. 테크 관련 게시물을 작성하고 개인 프로젝트를 전시하는 공간으로 활용하는 프로젝트
- Framework: Next.js (App Router)
- Language: TypeScript
- Styling: TailwindCSS
- State Management: Zustand
- UI Components:
- Markdown Editor: @uiw/react-md-editor
- Runtime: Node.js
- Database: MongoDB (with Mongoose)
- Authentication: NextAuth.js
- File Storage: Vercel Blob
- HTTP Client: Axios
- Testing Framework: Jest with React Testing Library
- Linting & Formatting:
TechBlog/
├── app/ # Next.js App Router 구조
│ ├── admin/ # 관리자 페이지
│ ├── api/ # 백엔드 API 로직
│ ├── config/ # 설정 파일
│ ├── docs/ # 문서화 관련
│ ├── entities/ # 엔티티 정의
│ ├── hooks/ # React 커스텀 훅
│ ├── lib/ # 유틸리티 함수들
│ ├── middlewares/ # 미들웨어
│ ├── models/ # MongoDB 모델 정의
│ ├── portfolio/ # 포트폴리오 페이지
│ ├── posts/ # 블로그 포스트 관련 페이지
│ ├── public/ # 정적 파일
│ ├── series/ # 시리즈 글 관련 페이지
│ ├── stores/ # Zustand 스토어
│ └── types/ # TypeScript 타입 정의
├── .github/ # GitHub 워크플로우
└── __test__/ # 테스트 파일
.env 파일에 필요한 환경변수는 다음과 같다.
1 GITHUB_ID=your_github_client_id
2 GITHUB_SECRET=your_github_client_secret
3 ADMIN_EMAIL=your_admin_email@example.com
4 NEXTAUTH_SECRET=your_nextauth_secret
5 NEXTAUTH_URL=http://localhost:3000
6 DB_URI=your_mongodb_connection_string
7 NEXT_PUBLIC_DEPLOYMENT_URL=https://your-deployment-url.com
8 NEXT_PUBLIC_URL=http://localhost:3000
9 BLOB_READ_WRITE_TOKEN=your_vercel_blob_token