[TIL] 0122

코드스피츠

• float 관련 강의 학습

타스 토이프로젝트 환경 설정

• Webpack에 시작 파일, 결과 파일 이름 / 경로 설정
• 라이브러리 설치 및 설정
  1. css-loader
  2. style-loader
  3. fild-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파일에 스타일 코드를 모아서 적용할 수 있다
• 라이브러리 버전에 따라 설정 코드 작성 방법이 다르기 때문에 신경써야한다
• 최신 버전보다 그 전 버전을 받는 게 더 안정성 있다