환경 설정

🎯 TODO

• Webpack에 시작 파일, 결과 파일 이름 / 경로 설정
• 라이브러리 설치 및 설정
  1. css-loader
  2. style-loader
  3. file-loader
  4. html-webpack-plugin
  5. clean-webpack-plugin
  6. sass/scss
  7. dev-server
  8. babel
  9. lint, prettier
  10. typeScript

🎯 Webpack설정에서 알게 된 점들

• 웹팩은 설치하고 최소한의 옵션을 설정해줘야 실행된다 (webpack.config.js)
• 프로젝트에서 사용하는 모든 언어들의 load방식을 설정해줘야한다(해당 언어의 loader설치 후 적용)
• require('path')
  • node.js이 기본으로 제공하는 path모듈로 설치 없이 사용가능
  • 파일/폴더/디렉터리 등의 경로를 편리하게 설정할 수 있는 기능을 제공
  • Node.JS 에서는 require 메서드를 통해 외부 모듈을 가져올 수 있다.
• require vs import (CommonJs와 ES6)
  아직까진 require가 많이 사용되고 있어서
  import를 쓰려면 바벨로 전환해줘야한다

    const library = require("library")
    import library from "library"

• style loader는 html내에 인라인으로 스타일 코드를 주입해주는데, MiniCssExtractPlugin을 쓰면 하나의 css파일에 스타일 코드를 모아서 적용할 수 있다
• 라이브러리 버전에 따라 설정 코드 작성 방법이 다르기 때문에 신경써야한다
• 최신 버전보다 그 전 버전을 받는 게 더 안정성 있다

🎯 트러블 슈팅

🧐 webpack5의 환경설정

• Webpack5 typescript설정법
• 계속 안되던 lint, prettier설정...경고문을 잘 읽어야 한다
  

  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'prettier', // 기존 "prettier/@typescript-es-eslint"
  ],

라이브러리를 이용할 때에는 버전을 확인해서 그에 맞는 양식으로 셋팅 코드를 작성 해야한다는 것을 뼈져리게 느꼈다..
버전 마다 설정 양식이 다르고 연관있는 라이브러리들끼리 버전이 안맞을 때 문제가 생기는 경우가 많아서 오류를 해결하느라 시간이 많이 걸렸다..
평소 경고문의 메세지를 대충 읽는데 어떤 게 문제인지 정확히 파악하지 못하고 오류를 해결하려해서 쓸데없이 시간이 오래걸리기도 했다.. 경고문을 잘 읽고 되도록 공식문서를 참고해서 설정해야한다

🧐 prettier와 eslint 둘 다 적용 시 디폴트 포맷터를 pretter로 설정해야한다

• pretter가 포매터이기 때문 (lint는 포맷터x)
• 린트는 포맷터 + 린터인데 prettier와 충돌하기 때문에 충돌되는 룰들을 꺼준다.
• 그 후에 prettier의 포맷룰을 eslint에 통합하는데, lint에러로 같이 나도록 하기 위함
  (안해주면 pritter관련 오류는 나지 않게 됨)
• 참고 링크

plugin vs extends

Plugin
ESLint rule이 들어 있는 하나의 Rule set 이다.
플러그인은 규칙 집합일 뿐 특정 룰을 사용하려면 이를 직접 작성해야한다.

extends
추가한 플러그인에서 사용할 규칙을 설정.
규칙을 적용하기 위해서는 추가한 플러그인 중, 사용할 규칙을 추가해주어야 적용이 된다.