공부 블로그

ESLint란

• JavaScript 코드를 분석하여 문법 오류와 안티 패턴을 찾아내는 정적 분석 도구
• 검사 조건에 다양한 옵션 부여 가능

1. 설치

npm i eslint

2. 파일 설정

npx eslint --init

3. 룰 설정

// eslintrc.js

module.exports = {
    "env": { // 사전 정의된 전역변수 지정
        "es2021": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 13 // ecmaScript 버전
        "ecmaFeatures": { // 확장 기능 설정
      		"jsx": true
    	}
    },
    "rules": {
    	// rule example
    }
};

4. ESLint 체크

npx eslint <Your file name.js>

5. ESLint 룰을 사용하여 코드 수정

npx eslint --fix <your file name.js>

Rules

룰에는 3가지 종류가 있다

• OFF
• WARN
• ERROR

Example

세미콜론이 존재하는지 검사

module.exports = {
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 13
    },
    "rules": {
        "semi": ["error", "always"],
    }
};

React.js란

• 사용자 인터페이스를 만들기 위한 JavaScript 기반 라이브러리

특징

• Virtual DOM 사용
• 컴포넌트를 사용하여 상태를 관리(component-based)
• 다른 라이브러리나 프레임워크와 병행 사용 가능

단순 예시

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

설치 ~ 개발 환경 세팅

1. Node.js 설치

https://nodejs.org/ko/

cmd(명령 프롬프트)에서 node-v로 Node.js가 제대로 설치되었는지 확인

2. Visual Studio Code 설치

https://code.visualstudio.com/

3. React 설치

cmd에서 React 설치

npm install -g create-react-app

4. Create React App

 VS Code의 Terminal에서 새로운 React 프로젝트 생성

npx create-react-app [App Name]

5. npm start

해당 프로젝트가 있는 디렉토리에서 실행

npm start

6. 웹 브라우저의 http://localhost:3000/ 에서 확인