카카오테크캠퍼스 2기 | STEP2 | 4일차(24-06-27) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 4일차(24-06-27) 회고

📝 ESLint, Prettier (Airbnb)

1. typescript-eslint 설정

• eslint와 typescript는 각각의 parser를 사용하여 다른 AST(Abstract Syntax Tree)을 생성하기 때문에, 이를 해결하기 위해 typescript-eslint를 설정하였다.
• 다양한 설정 파일을 다루는 것이 어려웠으나, 최종적으로 최신 버전으로 설치하는 것이 가장 좋다는 결론에 도달하였다.

npm install --save-dev eslint

 

• TypeScript와 ESLint의 통합을 위해 필요한 typescript-eslint 관련 라이브러리를 설치하였다.

npm install --save-dev @typescript-eslint/eslint-plugin@5.62.0 @typescript-eslint/parser@5.62.0

 

• .eslintrc.json 파일에서 airbnb 규칙과 Prettier 규칙을 혼합하여 설정하였다.

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "airbnb",
    "airbnb/hooks",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "rules": {
    "no-var": "warn",
    "eqeqeq": "warn",
    "react/prop-types": 0,
    "no-extra-semi": "error",
    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
    "arrow-parens": ["warn", "as-needed"],
    "no-unused-vars": "off",
    "no-console": "off",
    "import/prefer-default-export": "off",
    "react-hooks/exhaustive-deps": "warn",
    "react/jsx-pascal-case": "warn",
    "react/jsx-key": "warn",
    "no-debugger": "off",
    "prettier/prettier": ["error", { "endOfLine": "auto" }],
    "react/function-component-definition": [2, { "namedComponents": ["arrow-function", "function-declaration"] }],
    "react/react-in-jsx-scope": 0,
    "react/prefer-stateless-function": 0,
    "react/jsx-one-expression-per-line": 0,
    "no-nested-ternary": 0,
    "react/jsx-curly-brace-presence": ["warn", { "props": "always", "children": "always" }],
    "import/no-unresolved": ["error", { "caseSensitive": false }],
    "react/jsx-props-no-spreading": [1, { "custom": "ignore" }],
    "linebreak-style": 0,
    "import/extensions": 0,
    "no-use-before-define": 0,
    "import/no-extraneous-dependencies": 0,
    "no-shadow": 0,
    "jsx-a11y/no-noninteractive-element-interactions": 0
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

 

• .eslintignore 파일을 작성하여 ESLint가 무시할 파일과 폴더를 지정하였다.

node_module

---

2. Prettier 설정

• Prettier 관련 라이브러리를 설치하였다.

npm install --save-dev prettier

 

• .prettierrc.json 파일을 작성하고 설정하였다.

{
  "singleQuote": true,
  "semi": false,
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 120,
  "trailingComma": "all",
  "endOfLine": "lf",
  "arrowParens": "avoid"
}

---

3. Prettier와 ESLint를 동시에 사용하기

• Prettier와 ESLint를 통합하는 과정에서 설정 충돌 문제를 해결하였다.

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

 

 

• Airbnb 스타일 가이드를 사용하기 위해 관련 라이브러리를 설치하였다.

npm install eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks --save-dev

 

 

• .eslintrc.json 파일에서 Prettier 및 Airbnb 설정을 추가하여 통합하였다.

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "airbnb",
    "airbnb/hooks",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "rules": {
    "no-var": "warn",
    "eqeqeq": "warn",
    "react/prop-types": 0,
    "no-extra-semi": "error",
    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
    "arrow-parens": ["warn", "as-needed"],
    "no-unused-vars": "off",
    "no-console": "off",
    "import/prefer-default-export": "off",
    "react-hooks/exhaustive-deps": "warn",
    "react/jsx-pascal-case": "warn",
    "react/jsx-key": "warn",
    "no-debugger": "off",
    "prettier/prettier": ["error", { "endOfLine": "auto" }],
    "react/function-component-definition": [2, { "namedComponents": ["arrow-function", "function-declaration"] }],
    "react/react-in-jsx-scope": 0,
    "react/prefer-stateless-function": 0,
    "react/jsx-one-expression-per-line": 0,
    "no-nested-ternary": 0,
    "react/jsx-curly-brace-presence": ["warn", { "props": "always", "children": "always" }],
    "import/no-unresolved": ["error", { "caseSensitive": false }],
    "react/jsx-props-no-spreading": [1, { "custom": "ignore" }],
    "linebreak-style": 0,
    "import/extensions": 0,
    "no-use-before-define": 0,
    "import/no-extraneous-dependencies": 0,
    "no-shadow": 0,
    "jsx-a11y/no-noninteractive-element-interactions": 0
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

---

4. package.json 스크립트 추가

• Linting과 formatting을 쉽게 실행할 수 있도록 package.json에 스크립트를 추가하였다.

{
  "scripts": {
    "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
    "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'",
    "prettier": "prettier --write './src/**/*.{ts,tsx,js,jsx}'"
  }
}

 

📝 Emotion 라이브러리

• JS로 CSS 스타일을 작성하는 것이 얼마나 유용할지 고민하였다. 처음에는 CSS-in-JS 방식이 생소하고 낯설게 느껴졌었다.
• React를 사용할 때 @emotion/react 패키지를 설치하는 것이 가장 쉽다는 것을 깨달았다. 다양한 옵션을 시도해 보면서 이 방법이 가장 효율적이라는 결론에 도달하였다.
  • $ npm install @emotion/react
• 처음에는 Emotion이 React 프로젝트에서만 사용되는 것일까 궁금했었는데, 일반 자바스크립트 프로젝트에서도 사용할 수 있다는 사실을 알게 되었다. 이때는 @emotion/css 패키지를 설치해야 한다는 점을 깨달았다.
  • $ npm install @emotion/css
• 직접 사용하는 방법은 프로젝트를 진행하면서 익혀야겠다.

 

📝 reset CSS

• 웹 브라우저마다 기본 값으로 스타일이 자동으로 적용되는 것을 알게 되었습니다. 예를 들어, 브라우저에서 자동으로 margin 값이 적용되는 경우가 있었습니다. 이러한 자동 적용 스타일로 인해 브라우저마다 웹페이지가 다르게 보일 수 있다는 문제를 확인했습니다.
• CSS 스타일을 통일하여 일관된 웹페이지를 제공하기 위해, 기본 값을 초기화하는 reset CSS의 필요성을 깨달았습니다. 개발자가 의도한 대로 디자인이 나오게 하려면 초기 설정을 초기화하는 과정이 필요하며, 이를 프로젝트 초기에 설정하는 것이 좋겠다고 생각했습니다.
• reset CSS를 사용하려면 index.html의 <head> 태그 안에 CDN을 import 해야 합니다. Reset CSS는 크로스 브라우징(Cross-Browsing) 문제를 해결할 수 있으며, HTML 문서 내 다른 모든 CSS 파일보다 상위에 위치해야 합니다. 이를 통해 모든 HTML 요소의 마진, 패딩, 폰트 크기 등을 초기화할 수 있습니다.

<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css>">

 

📝 Daily Scrum 이후

일정 공유 📅

• 구희원: 1단계를 마치고 PR을 올렸어요 ✔️
• 이예지: 해외 일정으로 참석이 어렵다고 공유했어요 🌍✈️
• 조중현: 2단계를 시작했습니다 🛠️
• 허윤수: React 입문 챕터 1단계를 완료했습니다 🎉

---

해결 과정

• 구희원님과 조중현 님의 도움으로 문제를 해결할 수 있었다. 팀원들이 공유한 자료 덕분에 해결이 쉬워졌다. 특히 아래의 블로그가 큰 도움이 되었다.
• https://velog.io/@junghyeonsu/React-create-react-app-Typescript-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85-%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC
• https://velog.io/@rimo09/ESLint-%EC%84%A4%EC%A0%95

 

😋 Today 회고

• ESLint와 Prettier를 설정하는 과정에서 많은 충돌이 발생했다 ⚠️. 블로그마다 설명이 달라서 설정 과정이 어려웠다. 가장 상단에 위치한 블로그가 이전 버전과 관련된 내용이라 설정과 충돌이 생겼다. 공식 문서를 확인했지만 어떤 부분을 참고해야 할지 헷갈렸다. 결국, 팀원들이 공유한 자료를 참고했다 공식 문서가 가장 중요하기 때문에 이를 보는 방법을 익혀야 할 것 같다. 실무에서는 어떤 방식으로 문서를 참고하는지 궁금합니다! 🌐
  • [답변] 저는 라이브러리 도입 전에는 공식문서의 motivate부분을 꼭 읽어보는 편이고 getStarted 같은 기본적으로 공식문서에서 제공해 주는 간단한 튜토리얼을 읽어보는 편입니다. 간단한 부분을 적용하려면 한국 테크블로그를 참고해도 좋지만 영어로 검색하면 더 많은 양질의 정보를 얻으실 수 있을 겁니다

 

➡️ 참고 링크

https://oliviakim.tistory.com/159

[React / TypeScript]　리액트 + 타입스크립트에서 ESLint + Prettier 설정하기

https://bum-developer.tistory.com/entry/TypeScript-Eslint%EC%99%80-Prettier-%EC%84%A4%EC%A0%95

[TypeScript] Eslint와 Prettier 설정

https://www.daleseo.com/emotion/

Emotion으로 React 컴포넌트 스타일하기