WEB PACK 스터디 4주차

10015 단어 webpackwebpack

📌 주제

ESlint + prettier, 타입 스크립트 적용하기

4주차에는 원래 타입스크립트만 적용해보는 것이 그만이었지만, 기존에, 프로젝트를 하면서, 여러가지 시도를 했었는데, 그 중 하나가 ESlint와 prettier를 도입해보는 것이었다. 하지만 prettier와 ESlint간에 충돌이 나면서, VScode에서는 에러를 내뿜었고, 설정법을 몰라서, 포기했던 기억이 있었다. 그래서 팀원들에게, ESlint와 prettier 설정도 나중에 협업을 위해 같이 해보는 것이 좋을 것 같다고 의견을 냈고 반영이 되어, ESlint와 prettier도 설정해보게 되었다.

📌 ESlint + Prettier

📖 ESlint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

위 문구는 ESlint 공식 웹페이지에 적혀있는 ESlint를 소개하는 글이다. 글에서 말하듯이, ESlint는 ECMAscript 코드를 검사 하면서, 버그를 피하고, 코드의 일관성을 지키도록 하는 도구이다. ESlint를 사용하여, 코드 작성 규칙을 정해서, 일관성 있게 코딩을 할 수 있도록 하고, 특정 룰을 통해, 추후에, 생길 수 있는 에러를 예방 할 수 있도록 도와준다.

Eslint 설정 방법

1. eslint 설치

npm i -D eslint

먼저, eslint 패키지를 설치해준다. 만일, Vscode를 사용하고, 실시간으로 eslint를 통해서, 코드를 검사하고 싶다면, 에디터 확장도구에서 eslint를 검색한 뒤 설치해줘야 한다.

PS.
글 작성일 기준으로, npm i -D eslint를 통해 설치하게 되면 eslint 8버전이 설치되게 되는데, 실시간으로 에디터 확장도구를 통해, 코드를 검사하고 싶다면, npm i -D eslint@7 을 입력해서 7버전을 설치해야한다. 아직 ESlint확장도구가 8버전을 지원하지 않기 때문이다.

2. ESlint 설정파일 작성

//.eslintrc.js
module.exports = {
  env: {
  },
  extends: [
  ],
  parser:,
  parserOptions: {
  },
  settings: {
  },
  plugins: [],
  rules: {
  },
};

ESlint 설정파일에는 여러가지 속성을 통해서, 설정을 할 수 있는데, .eslintrc.js 라는 이름의 파일을 프로젝트 루트 경로에 만들어서 작성해줘야 한다. 각 속성에 대한 설명은 eslint공식 홈페이지에 나와있다. 하지만, 속성들이 매우 많으므로 어려움을 겪을 수 있다. 

npx eslint --init

따라서, 위 명령어를 입력하면, 보다 쉽게 설정이 가능하다.

3. 코드 검사

npx eslint [filename].js --fix

해당 명령어를 입력하면 설정한 Rule들에 따라서, 파일의 코드를 검사하고 --fix옵션을 통해 코드를 수정한다. 하지만 --fix옵션을 준다고 모든 코드를 수정하는 것이 아니라, ESlint 공식문서의 Rules메뉴에 정의된 것들중에, 특정 rule들만 수정이 된다.

스패너 아이콘 표시가 되어있는 것이, --fix옵션을 통해 고칠 수 있는 것들이다.

또한 ESlint에는 Rule들을 미리 정의 해놓은 eslint:recommended 설정이나, 코딩 스타일을 미리 정의 해둔 airbnb 혹은 standard 설정들을 extends속성에 넣게 되면 해당 설정에서 정의한 룰들을 적용할 수 있게 된다.

//.eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    "airbnb"
  ]
};

📖 Prettier

Prettier의 역할은 코드 포매팅이다. ESlint와 역할이 겹칠 수 있으나, ESlint에서 해주지 않는 역할까지 Prettier에서 맡아서 해준다. 하지만 ESlint같이, 에러가 예상되는 코드들을 잡아주지는 않는다.

Prettier 설정 방법

1. Prettier 설치

npm i -D prettier

2. Prettier 설정파일 작성

//.prettierrc
{
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": true,
  "printWidth": 120,
  "arrowParens": "always"
}

ESlint 설정파일과 같이, 프로젝트 루트 경로에 .prettierrc라는 설정파일을 작성해준다. 해당 옵션에 대한 내용은 prettier 공식 홈페이지에서 알 수 있다.

3. 코드 검사

npx prettier [filename].js --write

--write 옵션을 통해, 파일을 재생성 할 수 있고, 만일 이 옵션이 없다면, 터미널에 출력하게 해준다.

ESlint와 Prettier 연동

prettier와 eslint를 둘 다 설정하게 되면, 서로 충돌이 나서, 포매팅에 대한 역할은 Prettier가 담당하고, ESlint가 관여하지 않게 설정해줘야 한다.

npm i -D eslint-config-prettier eslint-plugin-prettier

위 명령어를 통해, 해당 패키지를 설치한다.

//.eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    'plugin:prettier/recommended',
  ].
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
   }
};

eslint 설정파일에 위와 같이, prettier에 대한 내용들을 적어주면 된다.

매번, 코드를 작성한 후, 명령어를 통해 검사할 필요 없이, VScode설정에서 Format On Save옵션을 통해 저장할 때 마다, Prettier를 적용할 수 있다.

📌 Typescript

📖 tsconfig.json

타입스크립트를 사용하려면 타입스크립트 설정파일을 프로젝트 루트경로에 tsconfig.json 파일을 작성해줘야 한다. tsconfig.json 파일을 꼭 작성해 줄 필요는 없지만, 매번 명령어에 옵션을 적어주기란 쉽지 않으므로, 작성 해야한다.

//tsconfig.json
{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "moduleResolution": "node",
    "lib": ["DOM", "ESNext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "typeRoots": ["./node_modules/@types", "@types"]
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

본인이 작성한 tsconfig.json 파일이다. 각 속성에 대하여 간단하게 알아보자.

compilerOptions

해당 속성은 파일들에 대하여 어떻게 처리하는지 정의하는 속성이다. 해당 속성에는 많은 속성들이 존재하나 대표적으로 많이 쓰이는 것들이 있다.

  • target
    target 옵션은 타입스크립트를 컴파일을 할 때, 자바스크립트의 문법을 결정하는 옵션이다. 지정한 스펙에 맞게 문법을 변환해준다는 뜻이다. ex) 화살표 함수 -> function

  • module
    module 옵션은 모듈방식에 대한 정의이다. 모듈방식에는 Common JS, AMD, ESNext 등이 존재한다. 현재는 front-end 개발 환경이므로 ESNext의 방법을 채택했다.

  • moduleResolution
    해당 옵션은 모듈 해석 방식을 어떤 방식으로 할 건지 정해주는 옵션이다. 해당 옵션에는 classic과 node를 사용하는 옵션들이 있는데, 보통 node를 많이 사용한다.

  • lib
    lib옵션은 지원하지 않는 문법을 추가해주는 역할을 한다. 예를 들어 DOM API가 있는데, ["DOM"]을 추가해주지 않으면, DOM API는 사용할 수 없다. 또한 target에 설정한 스펙에 존재하지 않는 문법 또한 추가를 해줘야, 에러가 생기지 않는다.

  • allowJS
    자바스크립트 파일을 타입스크립트 파일에 import 할 수 있게 설정해주는 옵션이다.

  • skipLibCheck
    라이브러리에 존재하는 d.ts 파일에 정의된 타입들이 잘못되어, 에러가 생기는 경우가 있는데, 이 옵션을 통해 d.ts 파일의 타입 검사를 제외할 수 있다.

  • strict
    타입스크립트 설정에는 strict 모드에 관한 설정이 여러가지 있다. strict 옵션을 설정하면, 해당 strict 관련 옵션들을 모두 설정하게 된다.

  • forceConsistentCasingInFileNames
    파일 이름에서 대소문자에 따른 문제점을 없애주는 옵션이다.

  • noEmit
    이 옵션을 true로 설정하게 되면 자바스크립트 파일을 따로 생성해내지 않는다. 보통 Babel을 같이 사용하기 위해, false로 설정하는 경우가 있다.

  • resolveJsonModule
    json파일을 import 할 수 있게 해주는 옵션이다.

  • jsx
    자바스크립트 파일에서 JSX 문법을 어떻게 처리할 것인지 정의 해주는 옵션이다.

  • esModuleInterop
    ES6의 모듈 방식과 다른 방식들간의 호환을 위한 옵션이다. 보통 Common JS와 ES6간의 import 작성법이 달라서 문제가 생기게 되는데, 이 옵션을 통해 해결할 수 있다.

  • baseUrl
    이 옵션을 통해 절대경로로 다른 모듈을 참조 할 수 있다.

  • paths
    baseUrl 기준으로 절대 경로에 대한 alias를 지정할 수 있다. 웹팩의 alias랑 같다고 보면 된다.

  • typeRoots
    타입 선언 파일이 존재하는 경로를 설정하는 옵션이다. 이 옵션을 통해 타이핑이 되어있는 외부 라이브러리의 타입들을 참조 할 수 있고, 타입이 존재하지 않는 것들에 대해서 직접 타이핑을 해줘야 할 때, 선언하는 d.ts파일을 참조 할 수 있게 해준다.
    기본값으로는 ["node_modules/@types"] 이고 추가적으로 설정을 해줘야 할 때는, 배열에 추가해줘야 한다.

include

타입스크립트의 대상이 되는 파일경로를 지정해주는 속성이다. files라는 속성은 파일명 자체를 지정해주지만, include 속성은 경로를 지정해주므로 좀 더 간결하게 지정할 수 있다.

* : 0개 이상의 문자와 매칭 (디렉토리 구분 기호 제외)
? : 한 문자와 매칭 (디렉토리 구분 기호 제외)
** : 반복적으로 모든 하위 디렉토리와 매칭

exclude

include와 반대로 파일들을 제외 할 수 있다.

📖 tsc

tsc or tsc [filename]

tsc명령어를 통해 tsconfig.json에서 지정한 경로에 대한 모든 파일을 컴파일 할 수 있고, 혹은 파일을 따로 지정해서 컴파일 할 수 있다. 이 때, tsconfig.json의 noEmit 옵션에 따라서, 타입체킹만 할 것인지, JS파일을 만들 것인지에 대한 여부가 갈린다.

📖 웹팩에서의 Typescript

babel-loader

웹팩에서 ts, tsx 파일들을 babel-loader를 이용하여 불러오기 위해서는, babel.config.js파일에 @babel/preset-typescript를 추가해줘야 한다.

//babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage', 
        targets: '> 0.25%, not dead',
        corejs: {
          version: 3,
        },
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],

  plugins: ['@babel/plugin-proposal-class-properties']
};

babel-loader를 사용하여 typescript를 불러오면, class의 field가 undefined 되는 현상이 있다고 한다. 해당 문제는 @babel/plugin-proposal-class-properties를 plugins에 추가해주면 해결 된다.

ts-loader

babel-loader 말고 ts-loader를 사용해서 타입스크립트를 불러올 수 있다. ts-loader를 설치하고 웹팩 설정에 babel-loader 대신 ts-loader를 설정해주면 된다.

babel-loader vs ts-loader

babel-loader와 ts-loader에는 각자 대표적인 장단점이 존재한다.

  • babel-loader
    장점 : 모든 파일에 대해서 babel-loader는 타입 체킹을 해주지 않으므로 빌드 속도가 빠르다.
    단점 : 타입체킹을 해주지 않기 때문에, 직접 타입에 대해서 정확하게 정의하고, tsc 명령어를 통해 타입을 디버깅 해줘야 한다. 이런 특성 때문에, webpack-dev-server를 통해 실행하면, 브라우저의 overlay나 터미널에 타입 에러 콘솔이 나타나지 않는다.

  • ts-loader
    장점 : babel-loader와 반대로 모든 파일에 대해서 타입체킹을 해주기 때문에, 디버깅이 쉽다.
    단점 : 빌드속도가 매우 느리다.

    ts-loader를 사용해서 webpack-dev-server를 사용하려면 tsconfig.json 파일의 noEmit 옵션을 꺼줘야한다.

ts-loader와 babel-loader 중 어느 것을 쓸것인지는, 팀원간의 의견에 따라 달라질 것 같다.

📌 결론

4주차에는 eslint + prettier 설정과 타입스크립트 설정을 해보는 기간이었는데, 옵션들이 너무 많아서, 어떤 것을 써야할지 고민이 많이 되었다. 다만, 모두 주로 쓰이는 옵션들이 많았고, 그것들 위주로 알아보았는데, 추가적인 옵션은 팀마다, 달라질 것 같다. 끝으로, 이번 4주차가 프론트엔드 개발환경 스터디의 마지막 주차였는데, 이 스터디를 통해서, 이제 직접 스스로 개발환경을 구축할 수 있게 되었고, 크로스 브라우징과 성능 까지 고려할 수 있는 역량이 생기게 되었다. 하지만, 웹팩에 대해서는, 아직도 갈길이 멀기에, 꾸준히 공부하게 될 것 같다.

References

https://eslint.org/
https://prettier.io/
https://typescript-kr.github.io/
https://www.typescriptlang.org/tsconfig
https://joshua1988.github.io/ts/

[BOJ] 백준 4673 - 셀프 넘버
[Spring] 요청 방식(@RequestMapping, @GetMapping, @PostMapping)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage