1. emotion 라이브러리 설치

// CLI

npm i @emotion/react @emotion/styled
npm i --save-dev @emotion/babel-plugin

// .babelrc
{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

2. ESLint

2.1 getting started 따라하기

npm list -g --depth=0

npm uninstall -g eslint

npm i eslint --save-dev

// 아래 명령어는 package.json 파일이 생성된 경우에만 동작한다고 합니다.
// nextjs 프로젝트를 create할 때 package.json이 생성되기 때문에 이대로 입력해줍니다.

npx eslint --init

{
  "env": {
    "browser": true, // browser
    "es2021": true // js modules (import/export)
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"], // eslint, react에서 적용하길 추천하는 기본 규칙들
  "parserOptions": { // React
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react"], // React
  "rules": {}
}

// "규칙명" : ["에러 레벨", "옵션"] 형태로 작성

"rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
}

// someFile.js

/* eslint eqeqeq: "off", curly: "error" */
or
/* eslint eqeqeq: 0, curly: 2 */

// extends에 적용되는 각각의 옵션(config file)은
// 옵션에서 정의한 규칙들을 포함합니다.
{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
}

  // ex

	"extends": "eslint:recommended",
  "rules": {
      // enable additional rules
      "indent": ["error", 4],
      "linebreak-style": ["error", "unix"],
      "quotes": ["error", "double"],
      "semi": ["error", "always"],

      // override configuration set by extending "eslint:recommended"
      "no-empty": "warn",
      "no-cond-assign": ["error", "always"],

      // disable rules from base configurations
       "for-direction": "off",
	  }

2.2 "extends" 와 "plugins" 옵션의 차이 ?

// package.json
eslint-plugin-react : ...

// .eslintrc.json
"plugins": [
	"react"
] 

//package.json
eslint-plugin-react


// .eslintrc.json
"plugins": [
  "react"
],
"extends": [
    "eslint:recommended",
    "plugin:react/recommended"
],

2.3 eslint-config-airbnb 추가하기

// eslint-config-airbnb는 총 3개의 config files를 export한다고 합니다.
// 아래 예시에서는 3개의 파일 중 메인 config와 hooks config을 사용합니다.

extends: ["airbnb", "airbnb/hooks"]

• eslint-plugin-import : es6+의 import/export 구문 지원

• eslint-plugin-react

• eslint-plugin-react-hooks

• eslint-plugin-jsx-a11y

npm info "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': '^7.21.5',
  'eslint-plugin-react-hooks': '^4 || ^3 || ^2.3.0 || ^1.7.0'
}

npx install-peerdeps --dev eslint-config-airbnb

npm -v  // 6.14.8

npx install-peerdeps --dev eslint-config-airbnb

{
  "extends": ["airbnb", "airbnb/hooks"]
}

2.4 발생한 몇몇 에러 fix 해보기

규칙명은 linebreak-style입니다.

{
  "extends": ["airbnb", "airbnb/hooks"],
  "rules": {
    "linebreak-style": 0
  }
}

1. 로컬 환경 : git global config의 core.autocrlf 옵션이 커밋되는 코드를 unix style로 일치시킨다고 합니다.
이는 git config core.autocrlf true 로 설정할 수 있습니다. (아마 true값이 default일 것 같습니다. default는 false라고 합니다. ) config 관련 링크입니다( 여기에선 default 값을 찾지 못 했습니다. )
 
만약 window를 사용하는 제가 이를 false 로 설정해두고 커밋한 내용을, macOS를 사용하는 팀원이 수정해 커밋하는 상황이 발상핸다면 linebreak에 의한 충돌이 발생할 것 같습니다.
 

# Set the default behavior, in case people don't have core.autocrlf set.
* text=auto

# Explicitly declare text files you want to always be normalized and converted
# to native line endings on checkout.
*.c text
*.h text

# Declare files that will always have CRLF line endings on checkout.
*.sln text eol=crlf

# Denote all files that are truly binary and should not be modified.
*.png binary
*.jpg binary

• jsx 문법이 babel에 의해 React.createElement 함수로 변형되었기 때문에 jsx 문법 사용 시 반드시 React를 import해줘야 한다는 번거로움

• React.createElement 함수의 성능상 한계점

function App() {
  return <h1>Hello World</h1>;
}
This is what the new JSX transform compiles it to:

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}