# 프로젝트 구조

meerkatgram/
├── client/             # Vite + React (PWA)
│   ├── src/                # React 실행 관련 로직
│   │   ├── assets/             # 비공개 정적 파일
│   │   ├── config/             # 설정 파일 (환경 변수, API 엔드포인트, Firebase/Web Push 설정 등)
│   │   ├── components/         # 컴포넌트
│   │   ├── routes/             # React 라우터
│   │   ├── store/              # 리덕스 관련
│   │   │   ├── slices/            # 리덕스 슬라이스 관련
│   │   │   └── store.js
│   │   ├── utils/              # 유틸
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── sw.js               # service-worker 파일
│   ├── index.html
│   └── vite.config.js
│
├── server/             # Express
│   ├── app/                # Express 실행 관련 로직
│   │   ├── controllers/        # 컨트롤러 레이어 (유효성 검사 & Request·Response 시 데이터 가공 처리 & 비지니스 로직으로의 연결)
│   │   ├── middlewares/        # 미들웨어 (JWT 인증, 권한 체크, 에러 핸들링, 로깅 등)
│   │   ├── models/             # 모델 (Sequelize 등 모델)
│   │   ├── repositories/       # DB 접근 레이어
│   │   ├── services/           # 비즈니스 로직 레이어
│   │   └── utils/              # 유틸
│   ├── configs/                # 전역 설정 파일 (DB, JWT, OAuth, Push 등)
│   ├── database/           # 데이터베이스 관련
│   │   ├── migrations/         # 마이그레이션 (DB 스키마 작성 파일 등)
│   │   └── seeders/            # 시더 (DB 더미 데이터 생성 파일 등)
│   ├── routes/             # API 엔드포인트 정의
│   ├── storage/            # 정적 파일을 서빙 디렉토리 (업로드 파일, PWA build 결과물 저장소), 주의: 운영환경은 경로 다름 
│   ├── app.js              # API 엔트리 포인트
│   └── .env                # 환경 변수 설정 파일
└── READEME.md

### server

npm init
express : 프레임워크
express-validator : express에서 사용하는 유효성 검사 라이브러리
dotenv : 환경 설정 파일 적용하는 라이브러리(.env)
mysql2 : node.js 환경에서 mysql을 사용할 수 있게 해주는 라이브러리
sequelize : node.js환경에서 사용하는 ORM
sequelize-cli : sequelize를 cli로 사용할 수 있게 해주는 라이브러리

dayjs : 날짜 연산 및 포맷 라이브러리
bcrypt : node.js환경에서 사용하는 암호화 라이브러리

morgan : node.js환경에서 사용하는 HTTP 로깅 라이브러리
winston : node.js환경에서 사용하는 로깅 라이브러리

web-push : 웹푸시 기능 구현을 위한 라이브러리

cookie-parser : cookie를 파싱해주는 라이브러리
jsonwebtoken : JWT 생성 및 검증, payload 획득 등 라이브러리
cors : cors 셋팅을 도와주는 라이브러리
multer : 파일을 업로드 할 수 있도록 도와주는 라이브러리

swagger-ui-express : Swagger 화면을 Express로 제공하는 라이브러리
yaml : YAML 형식의 Swagger 문서를 JS로 파싱하는 라이브러리

### client

npm create vite@latest .
dayjs : 날짜 연산 및 포맷 라이브러리
react-router-dom : 리액트에서 페이지 이동(라우팅) 관리 라이브러리
@reduxjs/toolkit : Redux 상태 관리를 더 편하게 해주는 공식 툴킷
react-redux : 리액트를 Redux 스토어와 연결해주는 라이브러리
axios : HTTP 요청(ajax 통신) 라이브러리
jwt-decode : 브라우저에서 JWT 토큰의 payload를 해독해주는 라이브러리
install -D vite-plugin-pwa : 개발 서버에서 Vite로 PWA 설정할 수 있게 도와주는 플러그인