리액트 시작하기 - create react app으로 빠르게 개발할 수 있습니다.

리액트로 클라이언트 앱을 개발하는 방식은 크게 두가지로 나뉩니다.

• 웹팩을 통한 리액트 개발 설정
• create-react-app을 통해 빠르게 리액트 개발 시작

웹팩으로만 개발을 하다가 예제같은걸 빠르게 돌려보고 싶을때는 create-react-app을 사용하는게 나은 것 같아서 create-react-app을 설치하게 되었습니다.

create-react-app 설치

Node.js가 설치가 되어있는 상태입니다.

yarn add global create-react-app
zsh: command not found: yarn

yarn이 설치가 안 되있네요.

npm install -g create-react-app을 써도 됩니다.

전 yarn을 설치하겠습니다. brew로 yarn을 설치합니다. 설치가 되면 다시 create-react-app을 설치합니다.
--without-node : deprecated

brew install yarn --ignore-dependencies
...
yarn add global create-react-app

brew install yarn --without-node no longer possible #913

윈도우라면 상관 없지만, 만약에 여러분이 리눅스, 혹은 macOS 유저여서 nvm 을 통하여 Node.js 를 설치했다면 yarn global 설치가 제대로 작동하기 위해선 다음 커맨드를 사전에 입력해주셔야 합니다
직접 넣어도 되고 ( vi ~/.bash_profile ) 아래와 같이 넣어도 됩니다.

# macOS:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile
# Linux:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc

npx로 create-react-app을 사용하면 좋은 점이 있다고 해서 다음과 같이 리액트 초기세팅을 해줍니다.
그리고 프로젝트 디렉토리로 이동하여 리액트 앱을 실행하면 리액트 앱이 로컬에서 올라간 것을 확인할 수 있습니다.

npx create-create-app hooks-tutorial
cd hook-tutorial
npm start

정상적으로 빌드되어 동작합니다.

npx란?
npm(node package manger)의 5.2.0 버전부터 새로 추가된 도구입니다.

create react app으로 프로젝트 생성해봅니다.

create-react-app 명령어를 사용하기 위해서는 create-react-app 패키지를 global 설치 해야합니다.

그러나 이러한 방식은 아래와 같은 단점이 있습니다.

• CRA의 무거운 의존성 라이브러리들이 컴퓨터에 남게 됩니다
• CRA 버전 업데이트시, 글로벌로 설치된 CRA를 재설치해야 합니다.

npx를 붙혀주면, 최신 CRA 패키지가 다운로드 되고 react-app 이라는 리액트 보일러플레이트를 세팅 후 즉시 CRA 패키지가 제거됩니다. 무거운 의존성 라이브러리들이 남지 않고 전부 제거되는거죠.

ESLint 설치, Prettier 설치

VSCODE Extensions 설치합니다.

eslint-config-airbnb 적용

airbnb 코드 스타일 적용하겠습니다.
많이 쓰이기 때문에 쓰는 것이고, 불필요한 규칙같은 경우에는 예외로 제외시킬 것입니다.
yarn add eslint-config-airbnb

package.json에서 airbnb 추가합니다.

  "eslintConfig": {
    "extends": "react-app" -> ["react-app","airbnb"]
  },

그러면 바로 airbnb에 코드스타일에 맞지 않은 경우는 다음과 같이 lint에러를 표시해줍니다.

Prettier 는 정해진 규칙에 따라 자동으로 코드 스타일을 정리해주는 도구입니다. 원래 Prettier 은 CLI 에서 사용하는 도구이며, npm 을 통해서 설치 할 수 있습니다 (참고). 하지만, VSCode 익스텐션으로 설치하셨을 경우엔 따로 설치하실 필요는 없습니다.

이 익스텐션을 사용하기 위해선, 우선 VSCode 에 내장되어있는 자바스크립트 포맷팅 기능을 비활성화하세요. 설정에 들어가서 "Format JavaScript" 를 검색하시고 가장 첫번째로 뜨는것을 체크해제 하시면 됩니다.

cmd + shift + p로 명령 파레트 실행후 settings.json을 입력합니다.

Open Settings 선택해줍니다.
"javascript.format.enable": false 설정을 추가해줍니다.

Prettier의 설정을 커스터마이징해서 원하는 코드 스타일로 고치는 과정이 가능합니다.

.prettierrc.js를 프로젝트 루트 디렉토리에 만들어줍니다.

module.exports = {
  trailingComma: "all",
  tabWidth: 2,
  semi: true,
  singleQuote: false,
  printWidth: 80,
  useTabs: false,
};

이런 설정들은 무슨 의미를 갖는지? 여기서 확인하시면 됩니다.
출처 : API options - Prettier

파일 저장시 Prettier가 적용됐으면 좋겠어요.

위에 써놓은대로 settings.json 파일을 열어서
"editor.formatOnSave": true 설정을 추가해줘야 파일을 저장했을 때 자동으로 formatter가 적용됩니다.
"eslint.autoFixOnSave": true 설정을 추가해서 파일 저장시 eslint도 적용하게 해둡니다.

eslint-config-prettier 적용하기

eslint랑 prettier는 코드스타일 고쳐주는 작업이 겹칩니다.
ESLint 는 자바스크립트 문법 관련된 것들만 관리하게 되고, 코드스타일 관련 작업은 prettier 가 담당하게 됩니다.
그래서 eslint-config-prettier 를 적용해야합니다.

yarn add eslint-config-prettier 패키지를 설치해줍니다.

package.json에서 eslintConfig -> extends에서 prettier를 추가해줍니다.

  "eslintConfig": {
    "extends": [
      "react-app",
      "airbnb",
      "prettier"
    ],

레퍼런스 : Difference between npx and npm?- stackoverflow
레퍼런스 : 자주쓰는 npx 이게 뭐지? - @c08h
레퍼런스 : 리액트 프로젝트에 ESLint 와 Prettier 끼얹기 - velopert
레퍼런스 : 누구든지 하는 리액트 2편: 리액트 프로젝트 시작하기 - velopert
레퍼런스 : Basic Configuration - Prettier