기술 결정

고려사항

1. 디자이너와 퍼블리셔의 역할 부재 이 프로젝트는 백엔드 한 명과 프론트엔드 한 명으로 이루어진 팀이다보니 일당백을 해야 프로젝트를 완성할 수 있다. 벡엔드와 같이 기획은 하지만 디자인은 할 사람이 없다. 빠른 프로토타입 프로젝트를 완성하는 것이 목표이기 때문에 디자인에는 신경을 많이 쓰지 않을 예정이다.

2. 빠른 개발 평일에 업무 관련 일을 하고 여가 시간에 프로젝트를 개발하다보니 시간이 많이 많다. 그래서 프로젝트 완성된 모습을 보기위해선 개발을 빠르게 할 수 있는 라이브러리라던지 툴이 필요하다.

3. 하지만 보기 좋은 코드 빠르고 간편하게 개발한다고 하지만 단기성을 가지고 진행하는 프로젝트가 아니다보니 나중에 앱을 확장하거나 유지보수 할 일 이 있다면 편하게 알아 볼 수 있어야할 것 같다.

4. 새로운 기술 습득 본인은 새로운 무언가 알고 공부하는 것에 흥미를 느껴 프로젝트를 완성하는 것에도 목표가 있지만 하면서 나에게 도움이 될만한 기술을 도입하고 싶다.

최종 결정된 기술

Next.js, Typescript, Vite, Zustand, React Query, tailwindcss, Jest

1. 상태 관리 Redux, Mobx와 같은 기존 상태 관리 라이브러리는 서버 상태와 동기화되지 않아 프론트엔드에서 직접 구현해주어야 한다. 또한 현재 개발하는 App은 SNS이기 때문에 실시간성을 중요하게 생각하였다. React Query, SWR 와 같은 서버 데이터 관리 라이브러리를 사용하는 것을 결정하게 되었다.

2. 웹 컴포넌트 스타일링 관리 빠른 module-css와 사용성이 좋은 css-in-js에서 고민 modules-css 공통 스타일이 작성하고 사용하는 정해진 값이 없이 단순이 css 변수를 사용하여 디자인 시스템을 도입하는 것이 너무 불편하게 생각하였고 js의 상태를 css에서 사용할 수 있다는 편의정에서 나의 개취는 css-in-js이다. 하지만 비용의 문제도 생각하지 않을 수 없어 고민하던 중 CSS Modules-in-TypeScript를 발견 (ex Linaria, Sttiches, Vanilla Extract) --- vanilla eextract의 기능을 찾아보고 설명

3. 테스트 빠른 개발이라고 해도 빼놓을 수 없는 것은 테스트 코드인 것 같다.

4. 배포 환경

상업용으로 사용할 수 있는 배포 환경과 최대한 많은 무료 제공 서비스를 초점으로 선택. 최종적으로 비교 선택할 것들은 Firebase Netlify Cloudflare이다.

1. Firebase
2. Netlify
3. Cloudflare

파일 하나 - 50-100kB보다 큰 번들을 분할하여 달성할 수 있습니다

​​File size The maximum file size for a single Cloudflare Pages site asset is 25 MiB.

대역폭