5분으로 시작 React

React가 무엇인지는 이 기사에서는 생략한다.
VSCode를 이용하여, 간단하게 동작 환경을 만드는 곳까지가 기사의 범위입니다.

사전 준비

Windows10 환경에서 실시하고 있습니다.

Visual Studio Code 설치

Node.js 설치

React 앱 시작

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

Learn React 를 Hello World 로 변경하여 저장
Chrome의 경우 브라우저를 다시 로드할 필요가 없습니다.

src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Hello World
          </a>
        </header>
      </div>
    );
  }
}

export default App;

아직 3분 남아 있으므로 ESLint 설정도 해 둡시다.

ESLint 설정

npm install -g eslint
npm install eslint-plugin-react -g
eslint --init

여러가지 질문을 받기 때문에 답변합시다.


루트에 다음 파일이 생성됩니다.

eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "jest": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

VSCode에 ESLint Extensions 설치


안전하게 Eslint가 작동하면 다음과 같은 느낌으로 오류가 표시됩니다.


create-react-app로 생성하는 파일은, 개행 코드가 LF , 들여쓰기의 스페이스의 수가 2일단 eslint 설정을 변경합니다.
또한 React(+JSX)의 기법을 에러로 하지 않기 위해서, env 와 rules 에 설정을 추가합니다.

eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            2
        ],
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1,
        "react/react-in-jsx-scope": 1,
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

앞으로 1 분 남아 있으므로 VSCode에서 Chrome 디버깅을 할 수 있도록 해 드리겠습니다.

Debugger for Chrome 설치

이런 식으로 브레이크 포인트를 설정할 수 있습니다.


Debug를 처음 시작하면 launch.json가 열리므로 포트 번호를 8080에서 3000로 변경합니다.

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

이상입니다.

번외 Proxy 환경에서 이 기사의 내용을 실시하는 경우

프록시 환경에서 오류가 발생하면 다음 설정을 사용하면 괜찮습니다.

npm -g config set registry https://registry.npmjs.org/
npm -g config set strict-ssl false

왠지 신경이 쓰이는 분은 작업 종료 후에 되돌려도 좋습니다.

npm -g config delete registry
npm -g config delete strict-ssl