[Project] React 팀 프로젝트 개발 환경 구축 및 컴포넌트 만들기

Project

팀 프로젝트 개발 환경 구축

React 팀 프로젝트

개발 환경 구축

결국 CRA

webpack과 bable 설정으로 react app을 구축하려고 했다.

그런데, webpack 설정을 하다보니 모르는 채로 안되면 막 갖다 붙이고, 이해하지 못한채로 완성을 시켜놓고 보니

이것이 정말 배포까지 문제없이 되는 것인지 불안감이 들었고, 회의감도 들었다.

멘토님께 자문을 구한 후 CRA로 프로젝트를 하는 것이 지금 수준에서는 더 맞다고 판단했다.

이유는

1. 포트폴리오이기 때문에 집중해야 할 부분은 webpack babel 보다는 React 로 잘 동작하고 코드 품질도 좋은 것을 만드는 것이 더 좋은 전략이다.
2. CRA 기반으로 생성하여 실제 많은 사용자가 사용하는 웹사이트를 만들어서 운영해 본 경험이 더 중요하다.
3. 그 다음 최적화해야 할 필요가 있을 때 webpack을 공부해도 늦지 않다.
4. 현재 회사에서 신입을 채용할 때 webpack 을 얼마나 알고 경험했는지 여부가 중요한 것은 아니라고 한다.

따라서 결국 CRA로 react app을 구축하게 되었다.

prettier & eslint

코드 컨벤션을 지키기 위해 prettier와 eslint를 적용하기로 했다.

• eslint

  eslint는 javascript나 react의 문법 오류를 잡아주는 역할을 하는데, airbnb 설정을 이용할 수도 있다.

  airbnb 설정을 이용하려고 했는데, rule이 매우 쎄서(컴포넌트 시 arrow function 안된다거나 js안에서 jsx 문법 못쓴다는 등) 개발해 나가다가 rule 설정하는 데에 또 시간을 쏟게 되지 않을까 하는 생각을 하게 되었다.(실제로 이미 여기서 시간 굉장히 많이 소비함)

  따라서 eslint:recommended를 사용하는 것으로 했다.

  airbnb 규칙 적용 시

  module.exports = {
    env: {
      browser: true,
      es2021: true,
      node: true,
    },
    parserOptions: {
      ecmaVersion: 12,
      sourceType: "module",
    },
    extends: ["airbnb", "plugin:react/recommended", "prettier"],
    plugins: ["react", "prettier"],
    rules: {
      "linebreak-style": 0,
      "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
      "arrow-body-style": 0,
      "react/function-component-definition": [
        2,
        {
          namedComponents: [
            "function-declaration",
            "function-expression",
            "arrow-function",
          ],
        },
      ],
    },
  };
  

  eslint:recommended 적용 시

  module.exports = {
    env: {
      browser: true,
      es2021: true,
      node: true,
    },
    parserOptions: {
      ecmaVersion: 12,
      sourceType: "module",
    },
    extends: ["eslint:recommended", "plugin:react/recommended", "prettier"],
    plugins: ["react", "prettier"],
    rules: {},
  };
  

  [참고]
  https://stackoverflow.com/questions/42640636/react-must-be-in-scope-when-using-jsx-react-react-in-jsx-scope
  https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md

• prettier

  {
    "semi": false,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80,
    "arrowParens": "avoid"
  }
  

  prettier는 세미 콜론을 쓰지 않고, singleQuote 사용하는 것을 기반으로 추가적인 설정은 추후에 추가할 예정이다.

컴포넌트 만들기

먼저 atom 단위(Button, Input 등)의 컴포넌트를 각자 생성하는 것으로 한다.

하루에 한 번씩은 코드 리뷰를 하고 머지할 예정이다.

Git 컨벤션 설정

• Convention Type

  icon	유형	설명
  ✨ :sparkles:	Feat	새로운 기능 추가
  ➕ :heavy_plus_sign:	Add	파일추가(이미지, 아이콘, 폰트…)
  🐛 :bug:	Fix	버그 수정
  📝 :memo:	Docs	문서 수정
  💄 :lipstick:	Style	스타일(CSS, 퍼블, UI적인 요소) 수정
  💡 :bulb:	Comment	주석 추가, 수정, 삭제
  📦️ :package:	Chore	빌드업 업무, 패키지 매니저 수정
  ♻️ :recycle:	Refactor	수정
  🚚 :truck:	Rename	변수명, 함수명, 파일명, 폴더명 변경
  🔥 :fire:	Remove	변수, 함수, 기능, 파일, 폴더 삭제
  💥 :boom:	!BREAKINGCHANGE	큰 api 변경, 큰 구조적인 변경
  🚑️ :rotating_light:	!HOTFIX	급한 치명적인 버그 수정
  🚀 :rocket:	Deploy	배포

• branch convention

  각자 이름으로 사용

• git commit convention

  gitmoji –commit

  이모지 선택

  title: Input 컴포넌트 추가

  TextInput 추가
  FileInput 추가