1.웹팩 시작하기에 앞서...
👉웹팩은 자바스크립트 환경에서 쓰이는 모듈 번들러 입니다 (아래 참조)
우리가 웹서비스를 사용하려면 서버로 부터 네트워크 요청을 해야합니다
요즘 웹서비스는 고도화되고 방대해졌고. 단순히 이런 서비스를 사용하기 위해
네트워크로 부터 많은파일(HTML,CSS,JS,Images...)들을 요청하게 되면 속도도 매우 느리게됩니다.
이를 해결하고자 이런 많은파일들을 압축하고 모듈화 시켜즐 녀석이 필요해 졌습니다.
이 역할 즉 , 모듈 번들링을 해주는 녀석이 바로 "웹팩"입니다
이미지 : 번들링을 해주는 웹팩
이미지 : 웹팩 사용시 네트워크 요청 자료가 줄어들고 렌더링 시간이 줄어든다
👉웹팩을 사용하기 위해서는
Node.js와NPM이 컴퓨터에 설치 되어 있어야한다
Node.JS
👉 자바스크립트 실행 환경
자바스크립트는 브라우저에서 실행되는 언어이다
사용자는 페이지 접근시 서버로 부터 페이지 정보를 요청하고
서버는 **페이지정보**를 줍니다 페이지정보내에는 자바스크립트 정보또한 들어있고 이 자바스크립트는 브라우저 엔진에 의해 실행됩니다
브라우저별 엔진
한마디로 자바스크립트는 브라우저에 종속된언어 입니다
크롬에서는 이런 브라우저 엔진(자바스크립트를 실행시켜주는녀석)을 브라우저에서 따로 때어내서 출시하게 됩니다 (아래그림 참조)
이로서 자바스크립트를 크롬,사파리와 같은 브라우저에 종속되지않고
브라우저 이외의환경 에서 사용이 가능해졌습니다. (서버만들기 가능)
이렇게 외부로 빠져나온 브라우저엔진을 우린 node js 라고 합니다
nodeJs 역사
참조 : https://www.youtube.com/watch?v=pTm5E3jcOeY
NPM
- npm 이란?
👉 npm : 자바스크립트 라이브러리 도구(= 메이븐과 비슷 유사 합니다)
nodeJs 를 설치하면 함께 설치된다
- npm 설치
**npm init -> npm 프로젝트 설정 -> package.json 생성 -> npm 설치 완료** 
강의 화면 : package json 생성됨
- npm 사용한 프로젝트 설치방식
1.프로젝트 설치
**npm install -i [특정라이브러리 이름]**해당프로젝트에 "node_modules" 라는 폴더생성됨 -그폴더 하위 라이브러리 파일 설치 되있음
이렇게 프로젝트 내부에 스크립트로 특정라이브러리를 사용하면 안된다
제이쿼리 프로젝트 설치 : npm i jquery 실행 → node_modeules 하위 jquery 폴더 추가됨
- 전역설치 :
**npm install [특정라이브러리 이름] --global**
전역적으로 설치됨 - 시스템레벨에서 사용
# window : AppData/Roaming/npm/node_modules
# mac : /usr/local/lib/node_modules
에생성된다
전역으로 특정라이브러리를 설치하면 커맨드 환경에서도 라이브러리를 사용할수 있다
2. package.json 알아보기
- dependencies 와 devDependencies 차이점
- dependencies(npm i 라이브러리)
👉코드에 직접적 영향을주는 라이브러리들 react, vue ,jquery **2. dependencies(npm i 라이브러리 -d )**👉개발을 할떄 도움을주는 보조라이브러리
=> webpack , sass ,,,,
npm 을 왜사용하는가?
라이브러리 버전 관리를 위해
특정라이브러리가 다른라이브러리 에 연관될떄
=> npm 을 사용하지 않으면 컴포넌트 상에서 해야함
=> npm 을 사용하면 생성된 package.json 안에서 라이브러리 관리
3. 웹팩 , 웹팩 cli 이란
👉웹팩 : 최신 프론트엔드 프레임워크 에서 많이 사용되는 모듈 번들러
👉번들링 (빌드,번들링,변환 같은의미):
위그림과 같이 몇십 몇백 개의 자원들(HTML,CSS,JS,Images...) 하나의 파일로(.js, .js, .png, .css )병합 및 앞축 해주는 동작
👉웹팩 cli
webpack-cli는 webpack과 관련된 명령어를 사용할 수 있게 해주는 패키지이다.
