1. 개요

1. 일시 및 장소 : 11.15.(화) 11:30 ~ 16:00, 게더타운 및 라이브 쉐어
2. 참여자 : 전원
3. 목적 : live share로 함께 개발 환경을 위한 세팅 진행
4. 회의 중요도 : 중

2. 기술 스택

2.1. 프론트엔드 스택

• 프론트엔드 라이브러리 : react
• 프론트엔드 라우터 : react-router-dom
• 상태 관리 라이브러리 : jotai
• 스타일 : styled-components

2.2. 백엔드 스택

• 백엔드 라이브러리 : koa
• 백엔드 라우터 : koa-router
• DB odm : mongoose
  • MongoDB 클라우드 사용하여 DB 공유
• nodemon

2.3. 공통

• axios
  • FE에 우선적으로 설치
• dotenv
• eslint
• prettier

3. 개발 환경 세팅

3.1. client

• react 환경은 create-react-app(typescript)으로 구성
  • src에서 App.tsx, index.tsx를 제외하고 불필요한 기본 파일 삭제

3.2. server

• nodemon은 개발자 의존성 설치
  • yarn 개발자 의존성 설치 방법 → yarn add [package_name] --dev
• server도 ts 사용할 것인지?
  • 상준 : FE에서 ts로 타입을 검사하는데, BE에서도 일관성 있게 타입을 검사하는 것이 좋음
  • 현정 : client와 server를 분리해서 작업하니 언어의 일관성은 중요하지 않고, 협업 시 타입을 맞춰야 하니까 ts로 사용하는 것이 좋음
• koa도 express처럼 제너레이터가 있는지?
  • 없어서 수동으로 구조 잡아야함
    • 이슈 분배하고 페어로 진행

3.3. 공통

• node 버전부터 맞추기 → v18.12.1
• yarn을 우선적으로 설치 → v1.22.19
• prettier
• eslint (eslint-config-naver)
  • client, server 따로 설정
  • 네이버 컨벤션 적용
    • 링크
    • 에어비엔비 컨벤션은 너무 많고, 어차피 네이버가 에어비엔비 컨벤션 수정해서 사용함
  • extends에서 prettier를 가장 밑으로 내려야 eslint가 정상으로 작동
• gitignore
  • client, server 따로 설정
• @types/ 모듈이 필요한 패키지는 devDependency에 추가적으로 설치
  • 예시
    • yarn add react-router-dom
    • yarn add @types/react-router-dom --dev
• tsconfig
  • 현정이 이전 프로젝트에서 사용한 config을 mildo 컨벤션에 맞게 사용
• 시멘틱 버전닝 컨벤션 (semantic versioning convention)
  • 처음 release 시 : v1.0.0
  • 이후 자잘한 오류 수정 : v1.0.1
  • 기능 추가 및 변경 : v1.1.0

4. prettier 설정

• 주석에 각 옵션의 내용 표시

{
    "printWidth": 80, // 줄 바꿈 할 폭 길이
    "tabWidth": 2, // 탭 너비 
    "useTabs": false, // 탭 사용 여부
    "semi": true, // 세미콜론 사용 여부
    "singleQuote": true, // single 쿼테이션 사용 여부
    "trailingComma": "none", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
    "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
    "endOfLine": "lf", // EoF 방식, OS별로 처리 방식이 다름 
    "bracketSpacing": true, // 객체 리터럴에서 괄호에 공백 삽입 여부
    "jsxBracketSameLine": true, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
    "jsxSingleQuote": true, // JSX에 singe 쿼테이션 사용 여부
}