FE기술 선택 근거

🛠️ DX Settings

ESLint + Prettier

개발 환경 설정에서 ESLint와 Prettier를 도입했습니다.

ESLint는 JavaScript와 TypeScript 코드의 잠재적인 오류를 사전에 감지하고 일관된 코드 스타일을 강제합니다.

특히 TypeScript-ESLint 설정을 통해 타입 관련 오류를 조기에 발견하고 React 관련 규칙들도 적용해 컴포넌트 작성 시 발생할 수 있는 실수들을 방지할 수 있도록 했습니다.

Prettier는 코드 포맷팅을 자동화해 프론트엔드 일관성있는 스타일로 코드를 작성할 수 있습니다.

들여쓰기, 줄 바꿈, 따옴표 사용 등의 스타일을 통일함으로써 코드 리뷰 시 불필요한 스타일 관련 논의를 줄이고 코드 품질에 집중할 수 있었습니다.

특히 @trivago/prettier-plugin-sort-imports 플러그인을 활용해 import 구문을 일관된 순서로 정렬함으로써 코드의 구조화와 가독성을 향상시켰습니다.

---

🛠️ Package manager

NPM

패키지 매니저로는 NPM을 선택했습니다. 팀원들이 NPM을 주로 사용해왔기에 학습 없이 즉시 개발에 착수할 수 있다는 점이 가장 큰 선정 이유였습니다.

PNPM이 제공하는 Phantom Dependency 해결이나 디스크 공간 절약과 같은 이점들을 검토했지만, 현재 프로젝트의 규모와 복잡성을 고려했을 때 이러한 장점들이 크게 부각되지 않을 것으로 판단했습니다.

프로젝트가 frontend, backend, rss-notifier의 세 개의 독립적인 애플리케이션으로 구성되어 있지만, 각 애플리케이션의 규모가 크지 않고 공유하는 의존성이 적어 PNPM의 모노레포 지원 기능이 제공하는 이점을 충분히 활용하기 어렵다고 판단했습니다.

프로젝트 진행 상황을 모니터링하면서 의존성 관리에 문제가 발생하거나 애플리케이션 간 공유 코드가 늘어날 경우, PNPM으로의 마이그레이션을 검토할 예정입니다. 현 단계에서는 패키지 매니저 최적화보다 핵심 기능 개발에 리소스를 집중하는 것이 더 효율적이라 판단했습니다.

---

🛠️ Build tool

Vite

빌드 도구로는 Vite를 선택했습니다.

Vite는 esbuild, SWC, Rollup을 기반으로 구성되어 있어 강력한 개발 환경을 제공합니다.

esbuild는 의존성 모듈들의 사전 번들링을 담당합니다. JavaScript로 작성된 기존 번들러들과 비교해 10-100배 빠른 빌드 속도를 제공해 개발 서버 구동 시간을 크게 단축시켜 신속한 개발을 진행할 수 있을 것이라 판단했습니다.

SWC는 Rust로 작성된 컴파일러로, TypeScript와 JSX 코드를 JavaScript로 변환하는 역할을 수행합니다. Babel과 비교해 최대 20배 빠른 컴파일 속도를 제공합니다.

Rollup은 프로덕션 빌드 시 번들링을 담당하고, 트리 쉐이킹을 통해 사용하지 않는 코드를 제거합니다. ES 모듈을 기반으로 하는 번들링 방식으로, 더 작고 최적화된 번들을 생성할 수 있습니다.

마지막으로 HMR(Hot Module Replacement) 기능을 통해 변경된 모듈만 교체해 개발 시 바로 피드백을 받을 수 있었습니다.

---

🛠️ Language

TypeScript

개발 언어로 TypeScript를 선택했습니다.

백엔드와 프론트엔드 모두 TypeScript를 사용해 서비스 전반에서 일관성있는 개발을 수행할 수 있었습니다.

TypeScript는 컴파일 단계에서 타입 관련 오류를 감지해 런타임 에러를 방지했습니다.