[개발] 초기 세팅과 컨벤션 설정 그리고 깃허브

Intro

 

프론트 개발자분들은 전에 멋쟁이사자처럼 프론트엔드 과정(이하 멋사)에서 한번씩 크고 작게 프로젝트를 함께 했다.

함께 했던 경험과 각자 다른 프로젝트의 경험을 가지고 다시 만났을 때 우리는 초기 세팅과 컨벤션에 조금 더 디테일을 추가하는 것이 좋겠다는 결론을 내렸다.

 

처음에는 깃허브 사용해서 협업하는 것 자체가 의미있었다면 이제는 효율적이고 효과적인 방법에 대한 고민이 조금씩 생기는 것 같다.

운 좋게도 우리가 경험한 멋사는 다양한 완성도 있는 프로젝트를 서로 공유하는 문화를 가진, 더 나은 방법에 대한 대화가 열려있는 커뮤니티였다.

 

초기 세팅에 대해 우리는 각자의 프로젝트에서 사용한 세팅값을 비교했고 좋았던 점과 개선할 점에 대해 편하게 대화할 수 있었다.

컨벤션은 개발 기간이 길지 않기 때문에 너무 타이트하게 잡지 않고 나중에 리팩토링과 함께 수정하기로 하고 러프하게 잡았다.

 

초기 세팅

1. PRETTIER

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

 

2.  ESLINT

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'react-app',
    'prettier',
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
    'plugin:react-hooks/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parser: '@babel/eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', 'prettier'],
  rules: {
    'react/prop-types': 0,
    'react/react-in-jsx-scope': 0,
    'no-unused-vars': 'off',
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
  },
};

 

컨벤션

1. 커밋 컨벤션

• Feat : 새로운 기능, 특징 추가
• Fix : 수정, 버그 수정
• Docs : 문서에 관련된 내용, 문서 수정
• Comment: 필요한 주석 추가 및 변경
• Style : 스타일링, 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
• Refactor : 리팩토링
• Test : 테스트 코드 수정, 누락된 테스트를 추가할 때, 리팩토링 테스트 추가
• Chore: 빌드 업무 수정, 패키지 매니저 수정
• Remove: 파일을 삭제하는 작업만 수행한 경우
• Rename: 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우

2. 스타일 컴포넌트 컨벤션

네이밍 규칙

• 코드 가 위, 스타일 컴포넌트 코드를 아래
• 위에서부터 아래로 상위 태그부터 하위 태그로 정렬
• 최상위 컴포넌트 명 '컴포넌트명'Wrap

각 태그들의 컴포넌트 명

• div : '컴포넌트명'Box
• section : '컴포넌트명'Section
• ul : '컴포넌트명'List
• li : '컴포넌트명'Item

 

깃허브

1. 기본 이슈

기본 이슈
## 📝 Description
간단한 설명 작성

## 🔨 To-do
[ ]  todo
[ ]  todo
[ ]  todo

## 📌 참고 사항
참고한 블로그 또는 사진 첨부

 

2. 버그 이슈

버그 이슈
## 🐛 버그 내용
간단한 설명 작성

## 📸 스크린샷
해당 에러 사진 올리기

## 🔍 원인
해결 후 추가 작성

## 💡해결방법
해결 후 추가 작성

## 📌 참고 사항
참고한 블로그 또는 사진 첨부

 

3. PR

## PR 타입

<!-- 하나 이상 선택, [x]를 입력해 체크박스 채우기 가능 -->

- [ ] 새로운 기능 추가
- [ ] 버그 수정
- [ ] CSS 등 사용자 UI 디자인 변경
- [ ] 코드에 영향을 주지 않는 변경사항(오타 수정, 탭 사이즈 변경, 변수명 변경 등)
- [ ] 코드 리팩토링
- [ ] 주석 추가 및 수정
- [ ] 문서 수정
- [ ] 테스트 추가, 테스트 리팩토링
- [ ] 빌드 부분 혹은 패키지 매니저 수정
- [ ] 파일 혹은 폴더명 수정
- [ ] 파일 혹은 폴더 삭제

## 변경 브랜치

ex) feature/Profile -> develop

## 변경 사항

<!-- 해당 기능 / 변경사항을 작업한 내용을 요약해 작성 -->

- 기능
- 기능

## PR 체크리스트

 <!-- 마지막으로 PR을 만들기 전 확인할 목록, [x]를 입력해 체크박스 채우기 가능 -->

- [ ] 📜 PR 제목 형식을 잘 작성했나요?
- [ ] 👀 리뷰어를 설정했나요?
- [ ] 📊 프로젝트를 등록했나요?
- [ ] 💭 이슈를 등록했나요?
- [ ] 🏷️ 라벨을 등록했나요?

 

4. 브랜치 전략

브랜치 전략은 전에 페이지 단위로만 사용했는데 이번에는 주요 기능을 따로 분리해서 사용해 보기로 했다.

main(배포용)
develop(개발 최종 브랜치)
feature/페이지
구체적인 기능명이 필요할 경우 feature/페이지/구현기능명

 

브랜치가 좀 많아지긴 하겠지만 충돌이 생기는 것보다는 나을 것 같다는 생각으로 정했다.

확실히 세분화 되어 있으니까 PR 요청에서 내역 확인할 때 내용 파악이 수월해서 좋았다.

 

참고 사이트

- 초기세팅

https://velog.io/@dishate/react-%ED%98%91%EC%97%85-%EC%85%8B%ED%8C%85%ED%95%98%EA%B8%B0-eslint-prettier-.vscode

eslint 이해하기 | react 협업 셋팅하기 | prettier

https://tyoon9781.tistory.com/entry/vscode-React-Prettier-ESLint-setting

React - vscode에서 React개발을 위한 Prettier, ESLint설정

 

- 컨벤션

https://github.com/airbnb/javascript/blob/master/react/README.md

 

- 깃허브 

https://marshallku.com/dev/pull-request%eb%a5%bc-%eb%b3%91%ed%95%a9%ed%95%98%ea%b8%b0-%ec%a0%84%ec%97%90-%ec%bd%94%eb%93%9c-%ea%b2%80%ec%82%ac%ed%95%98%ea%b8%b0

Pull Request를 병합하기 전에 코드 검사하기

https://kotlinworld.com/292

[GitHub] Branch Protection Rule 적용해 브랜치 보호하기

https://velog.io/@skyu_dev/Git-%ED%8C%80%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%8A%B9%EC%84%B1%EC%97%90-%EB%A7%9E%EB%8A%94-%EB%B8%8C%EB%9E%9C%EC%B9%98-%EB%B0%8F-%EB%B8%8C%EB%9E%9C%EC%B9%98-%EB%B3%B4%ED%98%B8-%EC%A0%84%EB%9E%B5-%EC%84%B8%EC%9A%B0%EA%B8%B0

[Git] 팀프로젝트 특성에 맞는 브랜치 전략/보호 규칙/병합(Merge) 설계하기