프로젝트 환경 설정 (npm, eslint, prettier)

NPM

• 프로젝트 만들기

  npx create-react-app 프로젝트이름

• 이미 존재하는 프로젝트(폴더)를 npm으로 변경

  npm init -y

• 리액트 스크립트 개발자 모드로 실행 (변경 내용 바로 반영)

  npm start
  *끝내기-> cmd+c

• 배포하기 위해 프러덕션 모드로 만들기

  npm run build

• build폴더가 만들어진 후에는 다음과 같이 실행 할 수 있다.

  npm install -g serve
  serve -s build
  --> serve 라는 패키지를 전역으로 설치합니다.
  --> serve 명령어를 -s 옵션으로 build 폴더를 지정하여 실행합니다.
  --> -s 옵션: 어떤 라우팅으로 요청해도 index.html 을 응답.
  혹은 (temperal하게 로컬에서 띄움)
  npx -s build
  --> npx? : 프로젝트의 로컬에 설치된 패키지의 실행 커맨드를 사용하려면, package.json 의 npm scripts 에 명령어를 추가하여 사용해야 했다. npx 로 최신 버전의 패키지를 받아 바로 실행 가능

• Jest를 통해 테스트코드 실행

  npm test

• eject: cra 앱 안에 있던 해당 프로젝트를 밖으로 빼내어 설정들을 manual 하게 고칠 수 있게 한다. (되돌릴 수 없음)

  npm run eject

Eslint

코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 통일 하는것을 도움

• eslint 연결

  npm install eslint -D
  npx eslint --init

Prettier

코드 스타일을 정리해줌

• prettier 연결

  npm i prettier -D

eslint와 prettier의 충돌을 막아주려면 package.json 설정을 아래 코드 처럼 해준다.

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  },

Husky

git hook 제어를 도와준다.
. git을 쓰다가 특정 이벤트(커밋할 때, 푸시할 때 등등)가 벌어졌을 때, 그 순간에 ‘hook’을 걸어서 특정 스크립트가 실행되도록 도와주는것이 git hook이다.

• Husky 연결

  npm i huskey -D
  npx husky install
  입력 후
  package.json 에 "scripts":부분에 "prepare": "husky install", 를 추가해준다.

lint-staged

git commit 하기 전에 변경사항에 대해서만 link 검사를 실행한다.

• lint-staged 연결

  npm i lint-staged -D

다른 자료 정리 링크: https://dev-yakuza.posstree.com/ko/react/husky-lint-staged/