Frontend

• React.js
• Context API
  • 선택 이유
    • 현재 구상하고 있는 서비스에는 복잡한 상태관리를 할 필요가 없다는 판단하에 리액트에서 기본으로 제공하는 상태관리를 사용하기 위해 선택.
• Styled-Component
  • 선택 이유
    • css 코드가 js처럼 관리되기 때문에 동적으로 관리되기 쉽다.
    • Styled Copmonents는 styled를 모두 plain css로 변경 후 html 파일의 header의 style에 넣게 되어 HTML 파일의 크기가 커진다는 단점이 있지만 재사용성과 확장성이 높아지기 때문에 선택

Backend

• Koa.js
  • 선택 이유
    • 기존에 Express만 사용하였음.
    • 서버 구성에 필요한 라이브러리(koa-router, body-parser 등..)을 설치해서 사용하며 라이브러리를 더 깊게 이해하기 위해서 선택.
• MongoDB
  • 선택 이유
    • 채팅 내용과 같은 빈번하게 이뤄지는 데이터를 RDBMS보다 빠르게 처리하기 위해서 선택.

Common

• TypeScript
  • 선택 이유
    • Type 정의를 통한 Javascript를 사용할때 경험했던 undefineded error의 실종을 위해 선택.
    • 유지보수 능력을 극대화 하기 위해 선택
• GraphQL
  • 선택 이유
    • REST API가 갖는 복잡하고 수많은 endpoint와 overfetching, underfetching문제를 해결하기 위해 선택.
• Apollo Client & Server
  • 선택 이유
    • 많은 GraphQL 라이브러리 중 점유율이 가장 높음
    • 기본으로 리액트 훅을 제공하기 때문에 Functional Component로 작성된 React와 잘 어울릴것으로 판단되어 선택.

Others

• Husky, lint-staged
  • 선택 이유
    • Git hook을 이용하여 Repo에 관리하기 위함
    • commit과 push시에 lint test와 test를 통과하여야 commit, push를 성공적으로 할 수 있음
• eslint, prettier
  • eslint
    • 선택 이유
      • code 컨벤션 및 규칙 설정, code의 일관성 유지
  • prettier
    • 선택 이유
      • code 컨벤션 및 스타일 설정, code의 일관성 유지
• Design
  • XD, Zeplin
    • 선택 이유
      • 별도의 설치없이 클라우드를 통해 공유가 가능.
      • XD로 디자인 하였을 경우, Zeplin으로 Export하여 쉽게 css코드를 확인할 수 있음.