🔨 Skill Spec

Skill Spec

back-end

• NodeJS Web Framework: express
  • 선정 이유: 학습 기간 중에 가장 많이 사용해본 웹 프레임워크로 이번 미션에서 새롭게 사용해보는 기술이 많기 때문에 웹 프레임워크는 모두가 익숙한 프레임워크로 진행하는게 좋을 것 같다고 판단함
• Graphql Server: Apollo Server
• Database: MongoDB (ODM: mongoose)
  • 선정 이유: 프로젝트 특성상 지도 컴포넌트를 통한 실시간 위치공유가 활발히 일어나기 때문에 속도가 느린 관계형 데이터베이스보다는 NOSQL인 몽고디비가 적합하다고 판단함(?)
• Auth: passport
• Node Process Manager: PM2
• Language: TypeScript
• Testing: Postman

front-end

• React Framework : CRA(Create React App)
  • 선정 이유: 초기에 웹팩을 직접 설정해 하나하나 구성하는 것과 nestjs, cra 셋 중에 고민했는데 데드라인이 있는 과제이니 만큼 빠르게 구성할 수 있는 cra, nest 중에 고민하게 되었다. 그 중 ssr을 사용할 경우 추가적인 설정(css-in-js, apollo 등)이 필요하기 때문에 cra를 사용하는게 나을 것 같다고 판단함
• State Management Library: Redux
  • 선정 이유: redux와 recoil중 고민했는데 flux패턴을 이해하는 것과 가장 많이 사용하는 상태관리 라이브러리부터 사용해보는게 좋다고 판단함
• Map : Google Map
• UI Component Library: Ant Design Mobile
  • 선정 이유: css를 직접 작성해 모든 UI를 구현하는 것 보다는 주요 기능들을 완성하는 것이 우선순위가 높다고 판단해 UI 라이브러리를 사용하자고 결정 했는데 그 과정에서 네이버 비즈니스 팀에서 실제 사용중인 Ant Design Mobile을 경험해 보는 것이 좋다고 판단함
• Graphql Client : Apollo Client
• Language: TypeScript
• Testing Tool: jest, msw, cypress(option)
  • 선정 이유:

detail

공통

• Testing tool

  • jest
  • cypress

• eslint, prettier

  • eslint
    • code 컨벤션 및 규칙 설정
  • prettier
    • code 컨벤션 및 스타일 설정

프론트엔드

• react (CRA-typescript)

  • react-route-dom

• styled-components

  • javascript 파일 내에서 스타일을 관리할 수 있도록 해주는 라이브러리 (CSS-in-JS)
  • CSS에 props를 적용시킬 수 있다는 장점
  • CSS를 컴포넌트화 할 수 있어 대규모 애플리케이션에서 CSS가 복잡해지는 문제를 효과적으로 해결

• apollo-client

  • apollo-server와 query, mutation, subscription을 주고받기 위한 라이브러리

• Redux

  • 리엑트 컴포넌트에서 사용되는 상태를 전역으로 관리하기위한 라이브러리

• Google Map

  • google maps places api (Place Search)
    • 장소 검색 (위도경도로 변환)
  • google maps places api (Place Autocomplete)
    • 검색 자동 완성
  • google-maps-react
    • 리액트에서 구글 지도를 사용할 수 있도록 도와주는 모듈
    • 지도 표시, 마커
  • naver-direction-api 5
    • 경로 계산, 경유지, 택시요금

• Antd Mobile

  • UI Components 개발을 빠르게 도와줄 수 있는 UI 프레임워크

• testing tool

  • msw
    • 사용할 서버를 mocking해서 가상의 서버를 만들어해서 가상의 서버를 만들기 위한 라이브러리

백엔드

• express & middlewares

  • express
    • nodejs web framework
    • NodeJS를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체
  • compression
    • express 압축 미들웨어
    • 미들웨어를 통과하는 모든 요청에 대해 gzip압축을 사용해 응답의 크기를 줄일 수 있음
  • hpp
    • express 보안 모듈
  • morgan
    • 로그 관리를 위한 미들웨어
    • 환경에 따라서 다른 설정으로 로그 관리를 커스텀 할 수 있음
  • helmet
    • express 보안 모듈
    • HTTP 헤더를 설정하여 Express 앱을 보호하는데 도움을 준다
    • 서버와 클라이언트간의 중요한 정보가 실수로 전달되지 않도록 HTTP header를 자동으로 설정해준다 (콘텐츠 보안 정책, XSS 필터링, HTTP 엄격한 전송 보안 등)
  • dotenv
    • 환경 변수 설정 라이브러리
    • 전역으로 필요한 변수들, 외부에 공개하지 말아야할 민감한 정보들을 관리하기위해 사용
  • cors
    • cors 설정 라이브러리
    • 현재 도메인과 다른 도메인에 리소스를 요청하기위해 사용

• apollo-server

  • apollo-server-express
    • apollo-server와 express를 연결해주는 모듈
  • graphql-subscriptions
    • graphql의 subscription을 사용하기 위한 모듈
  • graphql
    • graphql 모듈
  • graphql-tools
    • graphql 개발 환경 설정 툴 모듈
    • graphql type, resolvers 등의 분기 처리에 사용

• auth

  • jwt
    • 인증에 사용하는 토큰
    • refresh token, access token으로 나눠서 관리
  • passport
    • Node.js에서 다양한 전략을 통해 Authentication을 적용시키기 위해 사용
    • 다양한 전략을 통해 각각 다른 방법으로 인증을 수행할 수 있음

• mongoose

  • MongoDB ODM

• typescript

  • ts-node
    • typescript를 node에서 실행시켜주는 모듈
  • tsconfig-paths
    • typescript 절대경로 추가 모듈

• @graphql-codegen

  • graphql에서 사용하는 스키마와 리졸버에 대한 타입을 생성해주는 제너레이터 툴

• nodemon

  • 프로젝트 폴더의 파일들을 모니터링, 파일이 수정될경우 자동으로 서버를 재시작해주는 라이브러리

배포

• NCP
  • Boostcamp 후원사로 NCP에서 제공한 크레딧을 사용해 서버 구축