반응형
기존에 진행하고 있던 프로젝트가 앞선 게시물에서 언급했던 것 처럼
백엔드와 배포를 둘 다 netlify를 통해서 진행했어서 DB도 없고, 배포가 되는 과정을 모르는게 아쉽다 생각했음.
아래는 v1을 개발했을 때의 스택
- Frontend - react / vite
- Backend - netlify serverless functions / DB 없음
- hosting - netlify새롭게 v2를 만들 계획을 하면서 이전에 v1스택을 정하게 된 이유에 대해 먼저 간략히 말하자면,
회사에서 개발을 하다보면 오래전부터 이어져온 코드이기도 하고, 컨벤션이나 룰이 있다지만 아무래도 개개인이 작성하는 코드기 때문에, 통일이 안되어있는 부분에서 해소되지 않는 답답함이 있어서 가장 미니멀한 스택으로 기능만 구현하자라고 출발했음.
사실 타입이 일정하게 안오는 업무가 너무 지쳐서 아 그냥 이럴거면 자바스크립트나 다시 써보자하고 개발을 시작함.
기능 구현을 어느정도 끝내고 나니까 그냥 타입 쓰는게 훨씬 낫다고 다시한번 느꼈음. 괜히 쓰는게 아니야 역시 ㅋㅋ
뭐 에러가 떠도 추적이 안되니까 한땀한땀 뒤져서 찾는게 너무 별로였고, 코드가 정리가 안되는 느낌이라 그냥 앞으로 JS는 알고리즘 풀 때 말고는 하지말자고 결심
아무튼 그래서 v2를 만들때는
직접 구축해서 호스팅까지 하자는 목표로 컴퓨터까지 샀으니까 적당히 어렵지 않으면서 써보고 싶은 기술로 스택 선정 및 세팅을 진행하려 함.
v2 스택
- FrontEnd
- Vite
- TypeScript
- recoil + tanstack query
- react hook form
- emotion /daisyUI
- BackEnd
- fastify
- MongoDB
- Infra/DevOps
- Turborepo
- docker
- jenkins
- NginX프로젝트 구조
root
│
├── Docker
│ ├── Dockerfile (각 서비스의 Dockerfile)
│ ├── docker-compose.yml (서비스 간의 연결을 위한 설정)
│ └── 기타 Docker 관련 파일
│
├── Jenkins
│ ├── Jenkinsfile
│ └── 기타 Jenkins 관련 설정
│
├── Nginx
│ ├── nginx.conf
│ └── 기타 Nginx 관련 설정
│
├── Turborepo
│ ├── turbo.json
│ ├── packages/
│ │ ├── frontend/ (Vite를 사용하는 프론트엔드 애플리케이션)
│ │ │ ├── src/ (소스 코드)
│ │ │ ├── vite.config.ts (또는 vite.config.js)
│ │ │ └── package.json
│ │ │
│ │ └── backend/ (Fastify를 사용하는 백엔드 애플리케이션)
│ │ ├── src/ (소스 코드)
│ │ ├── server.ts (또는 server.js)
│ │ └── package.json
│ │
│ ├── package.json (루트 레벨 의존성 및 스크립트)
│ └── 기타 Turborepo 설정
│
├── MongoDB
│ ├── docker-compose.yml (MongoDB를 Docker로 설정할 경우)
│ └── 기타 MongoDB 설정 및 스크립트
│
└── 기타 설정 및 문서
├── README.md
└── 기타 문서 및 설정 파일개발하며 변경될 수 있지만 우선은 이렇게 시작