20210406(화)

2021-04-06

1. 학습 날짜

• 2021-04-06

2. 학습 시간

• 10:00 ~ 22:00

3. 학습 범위 및 주제

• webpack 사용법 익히기

4. 학습 목표

• 웹팩 사용법을 익힌다.

5. 학습 정리

• x

6. 상세 학습 내용

• 웹팩이란 모듈을 위한 번들러이다. 모듈이란 재사용 가능한 코드조각이다. 간단히 말해서 import와 export 에 사용하는 js 파일이다. 보통 이 js 파일은 하나 또는 복수의 함수로 이루어진 라이브러리가 된다. 그러면 일반 스크립트와 모듈의 차이는 무엇인가?

  • 모듈은 항상 defer 를 붙인것처럼 지연 실행된다.

  • use strict 가 자동으로 적용된다

  • 자신만의 스코프를 갖는다. 이 덕분에 즉시실행과 같은 테크닉을 사용하지 않아도 된다.

  • 모듈은 단 한번만 평가된고 다른 곳에서는 공유된다. 이 말은 여러 파일에서 import 가 된다고 해도 실제로 평가는 제일 먼저 import 되는 곳 한곳에서만 되고 나머지는 이 데이터를 공유해서 사용한다.

• 번들러란 무엇인가. 먼저 번들을 한다라는 번들링이 무엇인지 알아야한다. 번들링이란 JS, CSS, 이미지 등으 ㅣ파일을 묶어주는 작업을 일컫는다.

  • 그리고 번들링의 결과로 나오는 파일을 번들 이라고 한다.

  • 번들링 과정이 끝나면 기존 스크립트에서 import / export 가 사라지기 때문에 type="module" 이 필요 없어진다.

  • 즉 번들링 과정을 거친 스크립트는 일반 스크립트처럼 취급된다!

• 그렇다면 웹팩은 왜 사용하는가?

  • 솔직히 아직까지 웹팩의 엄청난 필요성까지는 느끼지 못하고 있다.

  • 이전에 rails 프로젝트에서 webpack 의 사용성이 굉장히 좋지 못했기 때문.

  • 파일 하나를 수정해도 다시 빌드를 하게 될 때의 에너지 소모가 너무 크다고 느껴졌다.

  • 이 부분은 천천히 느껴봐야겠다.

• 웹팩은 몇가지 코어로 이루어진다.

  • entry

    • 디펜던시 그래프를 시작할 파일을 명시한다.

    • 하나가 아닌 여러 파일을 지정할 수 있다.

      • 여러 파일을 지정하면 번들이 여러개가 생긴다.

    • index.js 파일 같은 것들을 엔트리에 넣어두고 이 index.js 에서 다른 파일들을 import, export 해서 사용한다면 다른 파일들은 굳이 html 파일에서 가져올 필요가 없다.

  • output

    • 번들 결과가 나오는 파일이다. 이 파일은 js 파일로 모든 css, 이미지 파일등을 문자열으 형태로 저장한다.

  • loaders

    • 특정한 파일들을 번들링할 때 적용할 옵션이 들어있다.

    • 자주 사용되는 것으로는 file-loader, style-loader, css-loader 등이 있다.

    • css-loader, style-loader 는 css파일을 번들링 할 때 사용된다. css-loader 를 사용해서 css 파일도 번들링의 대상으로 만들어주고 style-loader 를 사용해서 css-loader로 번들링 된 결과가 html 파일의 head 에 style 태그로 선언될 수 있게 해준다.

    • file-loader 는 이진데이터인 파일을 읽을 수 있게 만들어준다.

  • plugins

    • 로더가 파일 하나하나에 적용되는 되었다면 플러그인은 만들어진 하나의 output 파일에 적용된다.

      7. 오늘 학습 내용에 대한 개인적인 총평

• 최근에 너무 놀았다. 오늘부터 다시 화이팅해서 열심히 해야겠다.

8. 다음 학습 계획

• JS todo list 구상하기