[React] React 개발환경 설정(ESLint, Babel)

React 개발환경 설정

React 공식 문서 링크

React란?

• React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

설치

• nodemon
• Webpack
• ESLint
• Babel
• react, react-dom

설치 방법

CRA(npx creat-react-app)을 통해 설치하는 방법 or npm init -y를 통해 package.json을 하나씩 설정해주는 작업

아래에선 후자 작업을 진행함

<기본 세팅>

1. nodemon 설치
2. package.json 생성(의존성 관리)
3. npm init -y
4. npm i
5. Webpack 설치(개발용서버)
   npm i -D webpack webpack-cli webpack-dev-server
6. (-D :devDependencies /개발 단계에만 필요한 의존성 파일)
7. file 생성
   ㄱ. public 폴더>index.html 파일 생성
8. ㄴ. src 폴더> index.jsx 파일 생성
9. 개발용 서버 실행시키기ㄴ. webpack.config.js 파일 생성 후 아래 코드 작성ㄷ. package.json > "scripts"안에 코드추가 ( npm start 해도 브라우저 실행되도록 설정)

10.  "start":"webpack serve --mode development"
    

11. module.exports={
     mode: 'development',
     }
    

12. ㄱ. npx webpack serve --mode development

---

<ESLint 설치>

• vscode 에서 확장프로그램 설치 후 진행

1. ESLint 설치
2. npm i -D eslint
3. ESList 초기화 설정
   • 설정 후 code는 아래와 같다. (.eslintrc.js)

   module.exports = {
       env: {
           browser: true,
           es2021: true,
       },
       extends: ['plugin:react/recommended', 'airbnb'],
       overrides: [],
       parserOptions: {
           ecmaVersion: 'latest',
           sourceType: 'module',
       },
       plugins: ['react'],
       rules: {
           'linebreak-style': 0,
           'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
           'react/react-in-jsx-scope': 'off', //import react생략하기 위한 작업(아래설명 참고)
           'jsx-quotes': ['error', 'prefer-single'],   //안할 시 Unexpected usage of singlequote 오류 발생
       },
   };
   

4. npx eslint --init
5. ESLint fix 모든 파일 자동 수정 적용시키기
6. npx eslint --fix .

---

참고) Unexpected usage of singlequote(''사용시 오류) 

 

+ 큰따옴표의 경우 'prefer-double'

---

<Babel 설치>

• 브라우저가 이해할 수 있는 문법으로 변환해주기 위해 필요

1. 설치ㄴ. npm i -D @babel/core (기본설정)babel/preset-env : 브라우저에 맞게 최신 문법을 예전 문법으로 변환(지원) babel/preset-react : JSX 지원npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader
2. ✔ 위 설치 한번에 하기(ㄱ,ㄴ,ㄷ)
3. ㄷ. npm i -D @babel/preset-env @babel/preset-react
4. ㄱ. npm i -D babel-loader (webpack에서 babel을 사용할 수 있도록 도와준다.)
5. webpack.config.js 파일 설정

6. const path = require('path');
   
    module.exports = {
        entry: path.resolve(__dirname, 'src/index.jsx'),
        mode: 'development',
        module: {
            rules: [
            {
                test: /\.js|jsx?$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            ],
        },
    };
   

7. babel.config.js 파일 생성 후 안에 코드 넣기

8. module.exports = {
      presets: [
        [
          '@babel/preset-react',  
          {
            runtime: 'automatic',
          },
        ],
      ],
    };
   

---

<React 설치>

1. 설치
2. npm i react react-dom
3. 실행
4. npm start

---

React 코드 정리

• 리액트17 버전 이후 부터는 import React 생략 가능

1. 생략하기

import React from 'react';

1. babel.config.js 수정

module.exports = {
  presets: [
    [
      '@babel/preset-react', {
        runtime: 'automatic',
      },
    ],
  ],
};

1. .eslintrc.js 파일에서 rule 추가

'react/react-in-jsx-scope': 'off',

---

Information

모듈이란

모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미

webpack이란

웹팩이란 모듈번들러 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미

❓ 그럼 Webpack을 왜 사용해야 할까 ?

SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함되어있다.
파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸리는 문제를 해결하기 위해
여러 파일을 하나의 파일로 번들링 해주어 웹페이지 성능을 최적화 해준다.

webpack 설치시 용어 참고

webpack: 웹팩의 코어

webpack-cli: 웹팩 커맨드를 터미널에서 실행할 수 있게 해준다.

webpack-dev-server: 개발서버를 열 수 있게 해준다.

Bundler 란?

여러개의 파일을 하나의 파일로 묶어주는 것이다.

Bundler : Webpack vs Rollup vs Parcel

Parcel은 별도 설정파일 없이 다양한 변환을 지원한다. 빌드가 빠른 속도로 된다.

Rollup은 webpack보다 빠르고 결과물도 가볍다.

Rollup과 Parcel은 아직까지 Code splitting 이슈들이 보이기 때문에 안정된 상태의 웹팩을 계속 사용하는것이 좋다고도 한다.

코드 분할이 활성화 된 동일한 코드의 마지막 경우 빌드시간이 Webpack 에서 가장 짧다.

많은 서드파티를 필요로 하는 복잡한 애플리케이션에는 Webpack
최소한의 서드파티로 라이브러리를 만들고 싶다면 Rollup
복잡한 설정을 피하고 간단한 애플리케이션을 빠르게 만들고 싶다면 Parcel


[참고]

-Code splitting (코드분할)
코드분할은 번들한 여러 코드 혹은 컴포넌트를 분리하는 것.
이렇게하면 필요에 따라 특정한 컴포넌트만 로딩하거나, 병렬로 로딩할 수 있다.

-서드파티
개발하는 것을 도와주는 것(플로그인, 라이브러리, 프레임워크)

ESLint 란?

자바스크립트 문법에서 에러를 표시해주는 도구이다.

또한 전반적인 코딩스타일(ex. tab 설정, ; 여부 등)까지 지정할 수도 있다.

에러와 코딩 스타일을 잡아주어 하나의 지정된 코드를 작성할 수 있어 협업시 특히 유용하기 때문에 사용한다.

ESLint vs Prettier

• ESLint 코드 포맷터의 역할도 하지만, 주로 코드 에러를 잡아내고 코드 문법을 강제하는 등
• 코드 품질을 개선에 중점
• Prettier 코드의 최대 길이, 함수에서, 작은따옴표(')를 사용할 것인지 아니면 큰 따옴표(")를 사용할 것인지 등

    즉,
    ESLint에도 코드 포맷팅(Code Formatting: 코드의 가독성과 이해도를 높여주는 일련의 작업)이 있긴 하지만,
  
    Prettier의 코드 포맷팅에 비해 특화되어있지 않으므로, 코드 에러와 문법을 정적으로 탐지할때는 ESLint를 사용하고
  
    포맷팅에는 Prettier를 사용하면 .
  

• 코드가 예쁘게 보이도록 하는 스타일에 중점. 하지만 코드의 에러를 잡아내진 못한다.

Babel 이란?

babel은 자바스크립트 컴파일러다. 입력은 자바스크립트 코드고 출력도 자바스크립트 코드다.

최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에

babel이 브라우저가 이해할 수 있는 문법으로 변환해준다.

npm vs yarn 차이

npm과 yarn은 자바스크립트 패키지 매니저이다.

yarn이 npm의 조금 더 개선된 버전으로 나왔다.(but npm이 지속적인 업데이트를 꾸준히 하기에 사용자가 많다.)

yarn이 npm보다 더 나은 점은 다음과 같다.
1. 속도가 더 빠르다.
2. 보안성이 좋다. (npm은 의존 관계를 가지는 다른 패키지들이 즉시 포함되도록 한다. 이런 부분이 더 편리하긴 한데 보안 문제에 있어 여러 취약점들을 불러올 수 있다고 한다.)

+npm은 package-lock.json, yarn은 yarn.lock 파일을 패키지 잠금 파일로 사용한다.