ADR‐004: FE 기술스택 결정(React Typescript styled‐components) - Moadong/moadong GitHub Wiki

작성일: 2025-11-17 | 상태: Accepted
결정일자: 2025-01-12

왜 이 결정이 필요했나요?

[문제 상황 설명]

모아동 프로젝트를 시작하면서 개발환경을 세팅해야했다 SPA 기반 웹 서비스를 개발할 예정이었기 때문에 초기 후보는 React, Vue, Angular였다. 여기에 더해 개발 언어도 JavaScript로 갈지, TypeScript를 도입할지, 스타일링 또한 styled-components, CSS Modules, Tailwind 등 다양한 옵션을 고민했다


어떤 결정을 내렸나요?

[선택한 해결책]

React 선택한 이유

  1. 대한민국 서비스 기업에서 가장 많이 쓰는 웹 프레임워크였다
  2. 당시에 가장 많이 사용되고 있는 라이브러리였다
  3. 자료가 많다
image

Typescript

런타임 에러를 컴파일 단계에서 확인할 수 있다 API 설계시 협업에 유리하다

Styled-components

Styled-compoennts : CSS-in-JS 방식을 선택한 이유?

  • FE 팀원들의 숙련도가 있었다
  • props 기반 동적 스타일링이 쉬웠다
  • CSS 문법을 그대로 사용하기 때문에 러닝 커브가 없었다

TailwindCSS를 선택하지 않은 이유

  • 클래스 네이밍이 UI 로직 안으로 과도하게 들어와 컴포넌트 가독성을 해치는 문제가 예상되었다.
  • 새로 문법을 익혀야했다.
  • 팀 내 Tailwind 경험자가 적어 초기 러닝커브가 있었다

어떤 효과가 있나요?

이 결정으로 얻는 장점과 감수해야 할 단점

장점:

  • [장점 1]: 코드가 섞이는 사고가 없었다. (무려 10개월간)
  • [장점 2]: 머지 규칙으로 휴먼에러 방지에 성공했다.

단점/트레이드오프:

  • [단점 1]: 점점 사용자가 들어올수록 release 브랜치 부재가 느껴졌다. 릴리즈 버전관리와 QA시 hotfix방식을 정하지 않았어서 불편했다.

참고 자료

  • [링크 또는 관련 문서]
⚠️ **GitHub.com Fallback** ⚠️