[SSAFYcial] 프론트엔드 기술 선정 과정 정리

안녕하세요 ! SSAFYcial 11기 이지혜 기자입니다.

 

이번 기사는 마지막 자율 프로젝트를 시작하며, 프론트엔드 기술 선정 과정에 대해 정리한 내용을 작성하게 되었습니다.

 

프로젝트에서의 기술 스택 선정은 채택 이유가 굉장히 중요하다고 생각되는데요. 이와 관련해서 팀원들과 함께 고민한 내용들을 정리해보았습니다.

---

패키지 매니저

고려 대상

• npm ✔
  • 프로젝트의 특성상 안정성과 접근성이 중요했습니다.
  • npm은 가장 광범위한 커뮤니티와 문서화를 보유하고 있어 문제 해결이 용이하고, Node.js에 기본 내장되어 있어 추가 설치 없이 즉시 사용할 수 있습니다.
• pnpm
  • 디스크 공간을 효율적으로 사용하고 설치 속도가 빠릅니다.
• Yarn
  • 병렬 설치와 오프라인 캐시를 지원하는 장점이 있습니다.

👀선정 이유

pnpm이나 Yarn이 성능면에서 우수하지만, 프로젝트 규모가 크지 않을 것으로 예상되어 성능 차이가 큰 고려 대상이 아니었습니다. 또한, 빠른 개발환경 세팅을 위해 npm을 채택하게 되었습니다.

 

프로그래밍 언어 / 타입 시스템

고려 대상

• JavaScript
  • 순수 JavaScript는 러닝커브가 낮고 진입장벽이 낮은 장점이 있지만, 타입 안정성이 부족하여 런타임 에러가 발생할 수 있습니다.
• TypeScript ✔
  • TypeScript는 JavaScript에 정적 타입 시스템을 더한 언어로, 코드 작성 단계에서 타입 관련 오류를 미리 발견할 수 있습니다.
  • IDE에서 자동 완성과 타입 추론을 지원하여 개발 속도가 향상되고, 코드 리팩토링 시 타입 체크를 통해 안전하게 변경할 수 있습니다. 또한 인터페이스와 타입 정의를 통해 코드의 의도를 명확하게 표현할 수 있어, 팀원 간 협업이 용이해집니다.

👀 선정 이유

이력서, 프로젝트 회고, 기업 공고 등 복잡한 데이터 구조를 다루는 프로젝트 특성상, TypeScript의 타입 시스템이 제공하는 이점이 크기 때문에 선정하게 되었습니다 :
- 자동완성과 타입 체크로 개발 생산성 향상
- 코드 품질과 유지보수성 개선
- 실행 전 타입 관련 오류 발견 가능

 

JavaScript 라이브러리

고려 대상

• React ✔
  • 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트 기반 아키텍처를 통해 재사용 가능한 UI 요소를 쉽게 만들 수 있습니다. 특히 우리 프로젝트는 이력서, 프로젝트 회고, 자기소개서 등 비슷한 구조가 반복되는 UI가 많아 컴포넌트 재사용성이 중요합니다.
  • React는 거대한 생태계를 보유하고 있어, TanStack Query, Zustand, Axios 등 프로젝트에서 채택한 다른 라이브러리와 쉽게 통합할 수 있습니다. TypeScript와의 호환성도 좋아, 컴포넌트의 props와 상태에 대한 타입 안정성을 확보할 수 있습니다.

빌드 도구

• Vite

상태 관리 라이브러리

고려 대상

https://yozm.wishket.com/magazine/detail/2233/

https://velog.io/@iberis/상태관리-라이브러리-비교-Redux-vs-Recoil-vs-Zustand-vs-Jotai

• Redux
  • Redux는 가장 오래되고 널리 사용되는 상태 관리 라이브러리입니다. Redux DevTools를 통한 디버깅이 강력하고, 미들웨어 시스템으로 비동기 작업을 체계적으로 처리할 수 있습니다. 하지만 작은 상태 변화에도 많은 보일러플레이트 코드가 필요하고, Redux Toolkit을 사용하더라도 설정이 복잡합니다.
• Zustand ✔
  • Zustand는 최근 Redux보다 더 많은 사용량을 보이고 있습니다.
    • 간단한 API로 빠른 학습 가능
    • Redux보다 보일러플레이트가 적음
    • React 외부에서도 상태 접근 가능 (알림 기능 구현에 유리)
    • TypeScript 지원이 우수
    • 작은 번들 사이즈

CSS

고려 대상

• CSS ✔
  • 특히 CSS Module을 사용하여 컴포넌트별로 CSS 스코프가 자동으로 격리
  • 클래스명이 고유한 해시값으로 변환되어 중복 걱정 없음
  • 특히 프로젝트에서 많은 폼 요소들(이력서, 회고, 자소서)이 있어 스타일 충돌 방지가 중요
• SCSS/SCSS
• Tailwind CSS
• Styled-components
• Emotion

데이터 fetching 및 query 라이브러리

고려 대상

• TanStack Query(React Query)

 

HTTP 클라이언트 라이브러리

고려 대상

• Axios ✔
  • 브라우저 호환성이 우수
  • 인터셉터를 통한 요청/응답 전처리 가능
  • TypeScript 지원이 우수
  • 에러 핸들링이 용이
  • 특히 AI API 호출 시 안정적인 처리 가능