Amada Coding Club

패캠 basic단계에서는 바닐라JS를 통한 간단한 프로젝트를 진행한다. 지난 게시글에서 알아본 웹팩에 대해 간단하게 알아봤으니 설정을 해보자 우선 node.js은 기본으로 설치되어야 한다.(npm은 자동 설치됨) 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 자 설치까지 끝냈으면 우선 package.json 파일부터 생성하자 npm init -y 그리고 웹팩 관련한 패키지들을 설치한다 npm install -D webpack webpack-cli webpack-dev-server webpack-cli는 웹팩을 더 쉽게 사용할 수 있도록 하는 터미널 명령어를 제공해주는 패키지이..

요새 패스트 캠퍼스 강의를 듣고 있다. 첫 번째 강의로 바닐라JS를 통한 개발을 하고 있는데 여기서 웹팩을 다뤘다. 기록 안 하면 또 까먹을 것 같아서 기록한다. 일단 Webpack이란 무엇일까? 공식 사이트에 나온 내용은 웹팩은 모듈 번들러라고 한다. 모듈은 뭐고 번들은 뭘까? 아주 쉽게 설명하면 모듈은 각각의 각각의 자바 스크립트 파일, 번들은 그 파일들을 하나로 합친걸 말한다. 궁금증이 들었다. 하나로 합치는 게 도대체 뭐가 좋을까? 장점은 다음과 같다. 여러 JS를 하나로 압축하기 때문에 로딩에 대한 네트워크 비용을 낮춰준다 모듈 단위 개발이 가능해 가독성과 유지보수가 쉽다. 최신 JS를 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환해준다. 나도 자세하게 알지 못하지만 사용자가 사이..