[React] CRA 없이 React 개발 환경 구축하기(1) - npm, eslint, prettier 설정

평소 리액트 프로젝트를 생성할 때 CRA(create-react-app)를 사용하여 손쉽게 개발 환경을 셋팅할 수 있다.

이렇게만 개발 환경을 구축하다 보니 바벨, 웹팩에 대해 제대로 모르는 것 같아 직접 셋팅을 해보면서 공부하는 기회를 가져보았다.

node가 설치되어 있다는 전제 하에 다음과 같이 진행한다.

 

1. npm package 셋팅

node 프로젝트의 시작은

> npm init

명령어 입력시 아래와 같이 나오는 데,  이때 package name만 npm의 패키지명과 겹치지 않도록 주의하기해서 정해도록 한다

eongjieun@jeongjieun-ui-MacBookPro alecture % npm init 
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: alecture // 패키지 이름
version: (1.0.0) // 버젼
description:  // 패키지 설명
entry point: (test.js) index.js // 진입점 파일
test command: // 테스트 명령어
git repository: (https://github.com/goodluckjjin/sleact.git) // 깃주소
keywords: // npm에서 검색 잘 되도록 하는 키워드
author: jeongjieun // 만든 사람
license: (ISC) MIT // 라이센스
About to write to /Users/jeongjieun/Documents/dev/sleact/package.json:

{
  "name": "alecture",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/goodluckjjin/sleact.git"
  },
  "author": "jeongjieun",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/goodluckjjin/sleact/issues"
  },
  "homepage": "https://github.com/goodluckjjin/sleact#readme"
}


Is this OK? (yes) y
jeongjieun@jeongjieun-ui-MacBookPro alecture %

ok까지 하고 나면 해당 폴더 내에 package.json 파일이 생성된다

(package-lock.json과 node_modules는 바로 안 생기고 npm 명령어 실행 시 생성되더라)

 

2. React와 React dom 설치

> npm i react react react-dom

ReactDOM은 브라우저의 DOM에서 React를 사용하기 위한 라이브러리로써, 즉 웹에서 React를 사용하게 해준다

Typescript 사용시 설치 ( 사용 안하면 생략 )

> npm i typescript
> npm i @types/react @types/react-dom

 

3. eslint, prettier 설치 및 설정

> npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier

eslint? prettier? 왜 설치할까?

eslint는 안 쓰는 변수와 오타 등을 잡아 주는 코드 검사 도구이고,

prettier는 코드를 한 줄로 줄줄줄 써도 저장만 하면 보기 좋게 정렬해주는 코드 정렬 도구로 굉장한 편익성을 자랑한다.

(단, prettier는 코드 정렬하는 스타일을 커스터마이징하기에는 한계가 있지만, 협업할 때 각자의 다른 코딩 스타일을 통알해서 보여줄 수 있는 하나의 기준이 될 수 있어서 좋다)

eslint와 prettier 둘 다 설치했을 때 서로의 규칙이 충돌이 날 수 있다.

이를 방지하기 위하여 eslint-plugin-prettier와 eslint-config-prettier 두 개를 추가로 설치하도록 한다.

eslint-plugin-prettier는 prettier의 규칙을 eslint에 적용시키게 해주는 플러그인

eslint-config-prettier는 prettier와 충돌할 수 있는 eslint 규칙을 실행 중지시키는 라이브러리

 

eslint 초기 설정

.eslintrc 파일 생성 후 아래 코드 추가

{
  "extends": ["plugin:prettier/recommended"] // prettier에 따른다
}

 

prettier 초기 설정

.prettierrc 파일 생성 후 아래 코드 추가

{
  "printWidth": 120, // 코드 가로 길이
  "tabWidth": 2, // 들여쓰기 칸 수
  "sigleQuote": true, // 큰따옴표 대신 작은따옴표 
  "trailingComma": "all", // 항상 ; 설정
  "semi": true // 항상 , 설정
}

 

 

 

참고 : https://www.npmjs.com/package/eslint-plugin-prettier