[setting] Next + Typescript Environment Setup

Preview

• Next + Typesciprt + Eslint + Prettier
• code convention
• git 전략

Next

참고

TypeScript

참고

Eslint, Prettier config

eslint

prettier

Naming

• event handler naming => handle[action][target]
• interface naming => 대문자로 시작하는 명사
• props naming
  • api에서 받은 복수 데이터: [api 받은 데이터]ListData
  • api에서 받은 단수 데이터: [api 받은 데이터]Data
  • 일반 복수 데이터: [해당 데이터]List
  • 일반 데이터: [해당 데이터]
  • boolean 데이터: is[Action]

Configuration Management

• branch
  • front: 프론트 관련 페이지 기능 브런치
  • back: 백엔드 관련 기능 브런치
  • main: 배포 대상 브런치
  • release: front와 back을 합친 release 브런치를 만들고 package 업데이트 및 README.md 업데이트
  • ui_fix/[todo]: ui 스타일 수정 브런치
  • [module | router | feature]_fix/[todo]: 주요 기능 수정 브런치
  • bug_fix/[todo]: 기능 완료 후, 버그 발견 시 수정하는 브런치
• Commit Message Rules (or Convention)
  • front
    • [page-name]: 페이지를 대표하는 내용 관련
    • [layout]: 컴포넌트 레이아웃 관련
    • [component]: 컴포넌트 관련
    • [module]: modules 폴더 내에 관련
    • [util]: utils 폴더 내에 관련
    • [SEO]: 검색엔진 설정 관련
    • [SSR]: Server-Side-Rendering 관련
  • back
    • [model]: DB모델 설정 관련
    • [router]: router 설정 관련
• Branch Strategy
  • front와 back 브런치를 따로 작업하여, 배포 시점에서 release 브런치를 만들어 master에 머지하고, develop에 pull merge 하는 과정
  • front와 back은 feature단위로 작업하여 commit pull merge 하는 작업

code view

github

GitHub - yjkwon07/urTweet: React 라이브러리를 사용하면서 유지보수 및 생산성을 높이기 위해, 폴더, 데

참고

1. Development Environment Setup