웹팩

기존에 웹서버를 직접 구현해봤었는데, 이제는 그 원리를 알았으니, 이미 만들어진 좋은 도구를 사용해야할 때라고 생각해서 번들러를 도입하고자 했다. 그러던 중, 어떻게 번들링이 일어나는지 의문이 생겼고, 번들링 과정에 대해 찾아보게됐다. 번들러를 왜쓰고, 기능은 무엇이 있으며, 어떻게 번들링이 일어나는지 알아보자. 번들러 왜쓰는데 React, Angular, Vue 등 프레임워크가 등장하고, 점점 js파일이 많아지면서 하나의 페이지에서 사용되는 js파일들이 엄청나게 많아지기 시작했다.이러면 한 페이지가 로드될때 모든 js파일을 네트워크를 통해 받아와야 한다. 번들링 없이 ESM만을 사용해 만든 프로젝트의 경우, 이런식으로 모든 js파일을 http요청을 통해 받아오는 것을 확인할 수 있다. 이 모든 파일을 ..

npm init 프로젝트가 npm으로 관리되어야 하므로 npm init을 진행한다. npm init -y 원래는 옵션 내용을 물어보나 -y옵션을 붙이게 되면 기본세팅 상태로 만들어지게 된다. 옵션 설명 name 프로젝트 이름 version 프로젝트의 버전 description 프로젝트에 대한 간단하 설명 main 프로그램의 시작점이 되는 모듈의 ID (우리도 npm 생태계에 올릴 수 있게 하는 옵션) scripts 현재 프로젝트 내부에서 사용할 수 있는 스크립트 명령들 ( "명령이름": "명령~" -> 터미널 $ npm run 명령이름 ) author 소유주 license 다른 사용자들이 이 패키지를 사용할 때 필요한 권한 웹팩 설치 npm install webpack webpack-cli webpack..