[기획 단계] 프론트엔드 기술 스택 최종 선정 및 이유

프로젝트에 본격적으로 들어가기 전에, 어떤 기술 스택을 사용해야 하는가? 그리고 왜 사용해야 하는가? 에 대해 팀 차원에서의 자료 조사 및 (필요한 경우) 블로그 포스팅 후 최종 회의를 진행했고 결정된 스택들은 아래와 같다.

 

프론트엔드 사용 기술 스택 

 

 

⬆️ 기술스택 3D 관계도 제작 정보 포스팅

 

패키지 매니저

npm

• 선택한 이유 : 우선 패키지 매니저의 경우, 성능을 고려한다면 pnpm이나 현재 팀 구성원의 기술 숙련도를 고려하여 기존에 사용한 npm으로 선정하게 되었다. (다음 프로젝트에서는 꼭 pnpm을 사용하고 싶다!)
• 비교 과정 요약 :
  • yarn berry : 직접 의존하고 있지 않은 모듈을 require()하는 유령 의존성에 관한 문제를 해결하기 위한 Plug'n'Play(PnP)라는 새로운 패키지 관리 방식을 사용한다.
    • 이를 통해 별도의 디스크 I/O 작업 없이 패키지의 정보와 위치를 파악할 수 있다.
    • 또한 zero-install 방식으로 별도의 설치 없이(yarn install 없이) 바로 사용할 수 있다.
    • 즉, 브랜치 변경 시에도 yarn install 없이 프로젝트를 실행할 수 있고 CI에서도 의존성을 설치할 필요가 없으므로 CI 시간을 크게 절약할 수 있다.
    • 그러나 아직 PnP를 지원하지 않는 패키지가 존재하기 때문에 이러한 패키지에 의존하는 순간 node_modules가 따라오게 되어 장점을 누릴 수 없게 된다.
  • pnpm : npm과 사용법이 비슷하고 yarn1/2와 npm의 핵심기능을 모두 지원하며 불필요한 I/O 과정을 없애 효율적이며 패키지 중복 설치를 하지 않아 사용 용량이 적다.
    • 종속성 관리 측면에서 좀 더 개선되었다는 장점이 있으나 국내 사용량이 적어서 레퍼런스가 적다는 단점도 있다.
    • 서비스의 규모가 커져서 코드 재사용, 리팩토링을 위해 같은 레포지토리에서 서로 다른 프로젝트를 관리하는 모노레포 환경을 구축하는 경우에 pnpm을 사용하면 디스크 공간을 절약할 수 있으며 peer-dependency를 명시해야 한다는 제약사항 덕분에 더 안정적이라고 한다.
• 참조 : 팀원이 작성한 비교 포스팅 ( 패키지 매니저 정리 : npm, yarn berry, pnpm )

 

JavaScript 라이브러리

React

• 선택한 이유 : 팀 구성원의 기술 습득 수준과 풍부한 생태계로 큰 고민없이 React를 선택하였다.  
  • 굳이 이유를 찾아본다면 넓은 커뮤니티로 인한 다양한 라이브러리 등으로 생산성을 높일 수 있고, React에서 제공하는 단방향 바인딩 방식이 데이터 흐름을 더 명확하고 예측 가능하게 만들어서 웹앱의 복잡도를 낮추고 디버깅을 쉽게할 수 있기 때문이다.

 

React 프레임워크

Next.js

• 선택한 이유 : 
• 참조 : 내가 작성한 비교 포스팅 ( 기술 스택 선정 고민 : Next.js vs Vite )

 

상태 관리 라이브러리

Redux Toolkit

• 선택한 이유 : 
• 참조 : 팀원이 작성한 비교 포스팅 ( 기술 스택 선정 고민 : 전역 상태관리 라이브러리 )

 

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

TypeScript

• 선택한 이유 : 자동 완성이 주는 개발의 효율성과 안정성이 큰 프로젝트에서는 빛을 더더욱 발하기도 하고 코드에서 발생할 수 있는 잠재적인 많은 오류를 미리 잡아준다는 데에서 선택하지 않을 이유가 없었다.

 

CSS 라이브러리

Emotion

• 선택한 이유 : 컴포넌트 단위 개발로 빠르게 작성하고 테스트하는 것이 중요한 경우에는 CSS-in-JS가 유리하고 자유로운 동적 스타일을 적용하기 위해서이다.
• 비교 과정 요약 :
  • CSS-in-CSS : 렌더링할 때 모든 CSS 요소를 로딩하기 때문에 인터렉티브한 웹 페이지를 구성할 때 사용자 편의를 반영하기 좋다.
  • CSS-in-JS : 해당 컴포넌트가 렌더링될 때만 스타일 태그를 생성하기 때문에 컴포넌트 기반 ㅡ로젝트에 유용하다. 
  • 각 컴포넌트의 라이프 스타일에 맞게 스타일을 적용할 수 있고, 자바스크립트 코드를 활용할 수 있기 때문에 동적 스타일 적용이 자유롭다.
  • 자바스크립트 해석 과정이 필요하기 때문에 CSS 모듈 방식에 비해 성능이 느리다.
• 참조 : 팀원이 작성한 비교 포스팅 ( 기술 스택 선정 고민 : CSS 라이브러리 )

 

데이터 fetching 및 query 라이브러리

TanStack Query

• 선택한 이유 : 다른 부분에서 새로운 시도를 많이 하기 때문에 (Next.js / Emotion) 기능 및 네트워크 최적화에 충실하면서 팀원들이 평소에 익숙한 라이브러리를 쓰고자 했다.

 

HTTP 클라이언트 라이브러리

Axios

• 선택한 이유 : HTTP 요청 경우에도 위와 동일하게 팀원들이 평소에 자주 쓰기도 하고, 특히 instance 기능을 제공하여 토큰 재발급 로직을 간단하게 적용할 수 있어 선택하게 되었다.