HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
프로그래머스 프론트엔드 데브코스 2기
프로그래머스 프론트엔드 데브코스 2기
/
📓
기동팀
/
💪
기동팀(CheQuiz)
/
🛠️
기술 스택 선정
🛠️

기술 스택 선정

Date
Jun 7, 2022
Tags
컨벤션

채택 스택

  • React + typescript
    • React Suspense 도입 고민
  • emotion style
    • scss의 익숙함보다 emotion을 통한 컴포넌트의 구분을 명확히하고, props를 활용한 스타일 패턴의 장점을 가져가기 위해 선택
  • context api 상태관리
    • 추후 어려움 발견 시 react-query 도입 검토
    • 경험하지 못한 문제점을 해결하기 위한 스택을 선택하기 보다는 가장 기본에 가까운 스택을 사용하고, 이후 문제를 만나게 된다면, 그것을 가장 잘 해결할 수 있는 다른 스택을 고려해보는 것으로 결정
  • storybook, 테스트
    • 스토리북은 컴포넌트의 prop이나 상태가 다양하지 않고, 공통적으로 사용 가능한 base컴포넌트를 설계하지 않고 있기 때문에 사용의 효용성이 많이 떨어진다고 판단
    • 테스트 스택의 경우 2주라는 짧은 시간안에 도입하기에 어려움이 있을 것이라고 판단하였고, 복잡한 수치로직(random함수)의 경우에만 작성 고민하는 것으로 결정

도입 가능한 스택들 리스트업

베이스 스택
  • Vue or React
  • typescript
  • storybook
  • 테스트 스택
스타일 관련 스택
  • scss
    • 익숙함
  • styled-component
  • emotion
    • file관리 깔끔
    • props를 통한 스타일 처리 가능
상태관리
  • context api
    • 경험하지 못한 문제점을 해결하기 위한 스택을 선택하기 보다는 가장 기본에 가까운 스택을 사용하고, 이후 문제를 만나게 된다면, 그것을 가장 잘 해결할 수 있는 다른 스택을 고려해보는 것으로 결정
  • redux
  • recoil
  • react-query
  • useswr
Data요청
  • fetch
  • axios
Context API 사용 방식
  • dispatch ( useReducer)
  • hook ( useContext)
로딩 관련
  • React.Suspense