Window에서 React 환경 구축하고 eslint 설정하기

Nodejs 설치

아래 사이트에서 설치 파일 다운로드

https://nodejs.org/ko/

Node.js

 

2021.07.08 기준으로 LTS 버전은 14.17.3이다. 본 글에서는 14.17.3을 다운로드 받는다.

Nodejs 설치

 

설치가 끝나면 cmd 창에서 node -version 명령어를 입력해본다

> node --version
v14.17.3

위와같이 버전이 나오면 설치 성공

 

Yarn 설치 (필수 아님)

node 모듈을 다운로드 받을때 npm 을 이용해도 되지만, npm 보다 빠르고 의존성까지 한번에 받아주는 yarn 사용하면 편하다.

필수는 아니기 때문에 설치하고 싶은 사람만 설치하면 된다.

 

yarn 홈페이지에서 .msi(윈도우 설치 파일) 파일을 다운로드 받아 설치해도 되지만, cmd에서 npm 명령어로도 설치할 수 있다.

본 글에서는 cmd 창에서 npm 명령어로 다운로드 받는 방법에 대해서 소개한다.

 

참고로 npm은 node를 설치하면 같이 설치된다.

 

아래 명령어 입력하면 yarn이 설치된다.

> npm install -g yarn

> yarn@1.22.10 preinstall C:\Users\75385\AppData\Roaming\npm\node_modules\yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)

C:\Users\75385\AppData\Roaming\npm\yarn -> C:\Users\75385\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
C:\Users\75385\AppData\Roaming\npm\yarnpkg -> C:\Users\75385\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
+ yarn@1.22.10
added 1 package in 1.806s

간단히 명령어를 설명하면,

• npm install: js 모듈을 다운로드 받겠다는 명령어
• -g: g 옵션은 컴퓨터 전역에 다운로드 받겠다는 뜻 (scope의 개념)
• yarn: 모듈 중 'yarn' 모듈을 다운받겠다는 뜻

 

설치가 끝났으면, yarn --version 을 입력해보자

> yarn --version
1.22.10

 

사내 넥서스(Repository)를 바라보도록 설정하는 방법은 아래 참고
https://memostack.tistory.com/247

 

프록시 설정 방법은 아래 참고
https://memostack.tistory.com/248

 

create-react-app 설치

create-react-app을 이용하면 빠르게 react app을 만들 수 있다.

 

yarn을 이용하여 create-react-app을 설치해보자

> yarn global add create-react-app

yarn global v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-react-app@4.0.3" with binaries:
      - create-react-app
Done in 0.54s.

위와 같이 Done in ~ 로 끝나면 creat-react-app이 설치가 된 것이다.

 

react app 생성

react app을 생성해보자. 만들고 싶은 위치에서 아래 명령어를 입력해보자

D:\dev\study\react> yarn create react-app myapp

Success! Created myapp at D:\dev\study\react\myapp
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd myapp
  yarn start

Happy hacking!
Done in 43.22s.

위와 같이 나오면 react app 생성 완료!

 

실행해보자

> cd myapp
> yarn start

 

localhost:3000 으로 접속해보자

create-react-app으로 react app을 만들면 기본적으로 3000포트를 사용함

react app 실행

 

개발 툴 설치

react 개발을 위해 사용하기 좋은 툴로는 vscode와 webstorm이 있다. vscode는 무료지만, webstorm은 유료다.

(어떤 툴을 사용하든 자유)

 

vscode

아래 사이트에서 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

webstorm

webstorm은 아래 사이트에서 설치

https://www.jetbrains.com/ko-kr/webstorm/

WebStorm: JetBrains가 만든 스마트한 JavaScript IDE

30일 무료 평가판 쓰다가 30일지나면 지우고 다시 설치하면, 다시 쓸 수 있다..
무료로 쓰고 싶다면 번거롭겠지만 한달간격으로 지웠다가 재설치하면 됨

 

eslint 설치 (필수 아님)

솔직히 사용안해도 되지만, 협업해서 개발을 할때 도움이 된다. 팀 안에서의 규칙을 세우고 strict하게 개발할 수 있다.

 

eslint를 설치해보자

eslint는 개발 환경에서만 사용하면 되기 때문에 dev 옵션을 추가해서 설치해주자

> cd myapp
> yarn --dev add eslint
yarn add v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
...
info Direct dependencies
└─ eslint@7.30.0
info All dependencies
├─ @eslint/eslintrc@0.4.2
├─ @humanwhocodes/config-array@0.5.0
├─ @humanwhocodes/object-schema@1.2.0
├─ eslint@7.30.0
├─ lodash.clonedeep@4.5.0
├─ lodash.merge@4.6.2
├─ lodash.truncate@4.4.2
└─ table@6.7.1
Done in 8.48s.

 

설치가 됐다면 app의 root에 있는 package.json을 열어보자

devDependencies하위에 eslint 7.30.0 버전이 추가된것을 볼 수 있다.

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  ...
  // devDependencies 아래에 eslint가 추가됨
  "devDependencies": {
    "eslint": "^7.30.0"
  }
}

 

eslint 설정

설정도 매우 간단하다

 

cmd에 아래 명령어를 입력해서 eslint 규칙이 정의된 파일을 손 쉽게 만들 수 있다.

> yarn eslint --init

√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · airbnb
√ What format do you want your config file to be in? · YAML
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.21.5 eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0
√ Would you like to install them now with npm? · No / Yes

이제 root 위치에 .eslintrc 파일(.eslintrc.js 또는 .eslintrc.yml 또는 .eslintrc.json)이 생성된것을 볼 수 있다.

파일을 열어서 설정된 내용을 확인해보자