TechBlog

프로젝트 개요

NextJS를 기반으로 한 개인 기술 블로그와 포트폴리오 웹 애플리케이션입니다. 테크 관련 게시물을 작성하고 개인 프로젝트를 전시하는 공간으로 활용하는 프로젝트

블로그

블로그 작성

시리즈

기술 스택

Frontend

• Framework: Next.js (App Router)
• Language: TypeScript
• Styling: TailwindCSS
• State Management: Zustand
• UI Components:
  • React Icons
  • React Lottie Player
• Markdown Editor: @uiw/react-md-editor

Backend

• Runtime: Node.js
• Database: MongoDB (with Mongoose)
• Authentication: NextAuth.js
• File Storage: Vercel Blob
• HTTP Client: Axios

DevOps & Testing

• Testing Framework: Jest with React Testing Library
• Linting & Formatting:
  • ESLint
  • Prettier

디렉토리 구조

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 [email protected]
   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