221222 TIL 클론코딩 프로젝트 1

오늘의 한일 

1. SA 작성

2. 컨벤션 작성

3. 언어스터디 준비

4. Typescript 준비

 

1. SA 작성

• 와이어프레임
  • 클론코딩 프로젝트이기 때문에 우리가 다룰 페이지의 화면들을 캡쳐해왔다.
  • 구현하지 않을 기능들은 화면에 보이지 않도록 가림.
  • 구현할 기능들에 대해서 하나하나 이용해보면서 메모를 남겨둠 (예: 유효성검사 형식, 필요한 api, 이동하는 페이지, 크기, 참고사항 등등)
  • 폰트, 색상 등등 주로 사용되는 요소에 대하여 추출하고 색상번호 등의 메모를 남겨둠.
  • 어떤식으로 구현할지, 컴포넌트 구성은 어떻게 할지에 대해서 얘기하면서 의견을 나누면서 필요한 부분에 대하여 메모를 남겨둠
    (예: 검색기능의 작동원리, 필요한 api call, 우리가 구현할 수 있는 기능의 한계 등등)
  • 주로 반복되는 요소의 복제품을 만들어보면서 제반사항에 대해 조사
    (예: 크기, 색상, 필요한 위치, 유사한 형태 등등)

 

2. 컨벤션 작성

• github에 wiki tab에다 이러한 제반내용들을 작성하고 공유한다.
• Project: 진행하는 프로젝트의 각종 공유자료를 모아둔다.
  • 개발 백로그
    • Backlog: an accumulation of something, especially uncompleted work or matters that need to be dealt with.
    • 팀원간의 업무 분담 및 tracking을 위하여 기록하는 것 같다.
    • working progress log 의 성격을 많이 띈다고 생각한다.
    • 개인적인 회고 참고 자료로 삼아도 좋을 것 같다.

• Rules
  • ground rules
    • 미팅 등의 실생활의 시간적, 인간관계적 약속들을 정한다.
    • 집중코딩타임, 쉬는 시간, 업무 시간, 회의 시간 등등
    • 협업 규칙, 에티켓 등등 문화를 형성해가는 약속들도 포함된다.
  • git & github convention
    • git을 운영하는데 있어 필요한 제반 사항들을 정한다.
    • Commit convention
      • 작업타입: 작업내용
        • feat: 기능, UI 작업 추가
        • fix: 버그 수정, 잘못된 코드 개선
        • refactor: 코드 리팩토링(로직의 변경없이 함수 분리, 컴포넌트 분리, 코드퀄리티 향상 작업 등)
        • chore: 패키지 매니저(`EX: packgage.json`) 추가/수정
        • style: 로직 변경 없는 단순 스타일적인 구조 변경, 수정 (`EX: 개행, 세미콜론 까먹은거 추가 등`)
        • docs: 문서 작업
        • build: ci/cd 등 배포 관련 작업
      • Commit title
        
        • 작업내용을 대표할 수 있도록 작성
        • 개조식으로 작성 (쉽게말해, 음슴체)
        • 예: FEAT/#2/작업내용 (기능추가/2번 issue/ 작업내용)
      • Commit body
        • 작업내용의 상세
        • 제목으로 표현되지 않는 작업 내용
    • Pull request
      • 제목은 커밋 작성법과 거의 같음
      • 예: FEAT/#2/작업내용
    • Gitflow
      • Branch sturucture
        • maseter: 실제 배포 브랜치(상시유지)
        • dev: 개발용 브랜치(상시유지)
        • feat: 기능 개발 브랜치
        • hotfix: 프로덕션 버그/에러 해결 브랜치
        • master, dev 브랜치에 직접 작업하지 않기
      • Branch naming
        • 예시: feat/ptg/post (기능개발/ 작업자표시/ 개발하는 기능)
      • Flow
        • 대략적인 업무 흐름에 대한 소개
        • pull request tnstj
        • code review
    • Code convention
      • clean coding rules
        
        • 가독성을 위해 코딩을 할때 피해야 하는 점들을 약속
        • 권장하는 방법을 소개
      • 변수명 설정
        • camelCase
        • 상수: SNAKE_CASE_RO_JAK_SUNG
        • boolean: is + 대상 + 상태 => isUploadSuccess
        • 변수의 이름이 의도가 잘 드러나도록 설정
      • 함수명 설정
        • camelCase
        • 동사로 시작할 것.
        • 함수 이름이 본인의 책임을 잘 대표하는지 고민해볼 것
        • 함수 하나가 너무 많은 책임을 가지고 있지는 않은지 고민해볼 것
      • Components
        • Coding 순서
        • import -> component -> styled-component -> export
      • File
        • 폴더 이름 작성법 (예: 소문자로 시작)
        • Components 파일 이름 (예: 대문자로 시작)
        • 확장자명 (예: .jsx)
      • Directory
        • Directory 구조
        • Component 폴더 구조
      • ESlint $ Prettier

eslint

module.exports = {
  env: {
    browser: true,
    node: true,
    es2020: true,
    jest: true,
  },
  parserOptions: {
    sourceType: 'module',
    allowImportExportEverywhere: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:react/recommended',
    'prettier',
  ],

  rules: {
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    'react/jsx-filename-extension': [1, { extensions: ['jsx'] }],
    'import/no-unresolved': 'off',
  },
};

prettier

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "arrowParens": "always",
  "bracketSpacing": true
}