webpack 공부하기 -1

웹팩을 공부하기 위해서는, 정적 페이지를 구성해보자 

html 파일과 javaScript를 생성해서 기본 페이지 구성을 갖춘다. 

 

다음과 같이 폴더경로에 파일들을 생성하고, 안에 내용을 채웠다.

(와 근데, JavaScript, html로 웹사이트 만드는 거 진짜 오랜만이네 재밌네 ㅋ)

 

 

위와 같을때 생기는 문제? 

hellow.js에도 word 가 있고 world.js에도 word가 있어서 결국 가장 늦게 선언된 script로 덮어쓰기 되면서 word라는 단어는 ‘world’ 가 된다.

지금은 나혼자만들어서 문제를 바로 인지 할 수 있었지만, 여러 개발자들이 작업할 경우 변수의 이름이 중복될 가능성이 생길 수 있다. 

그래서 규모있는 애플리케이션에서는 이름의 충돌이 너무나 심각한 문제이기 때문에 그걸 극복하기 위한 여러가지 테크닉들이  존재한다고  한다. 

이게 얼마나 위험하냐면, 마치 엄청나게 큰 하드디스크 안에 폴더 기능이 없어서 하나의 그 루트 폴더 안에 막 1억개의 파일이 있다 그러면 그 파일의 이름이 충돌이 나는 문제가 너무나 심각한 문제 입니다.

 

 

그래서 등장한 것이 있다? Module !!!

이런 문제들을 극복하기 위해 등장한 것이 “모듈” 이라는 개념입니다.

웹브라우저의 기본적으로 모듈의 기능이 최신 브라우저에 탑재되어 있습니다.

모듈을 사용하기 위해서는 모듈을 사용하고 싶은 스크립트 태그의 타입을 “module”이라고 써줘야한다.

그리고 전통적인 자바스크립트의 로딩 방식은 삭제한다.

이렇게 로딩하는 것 대신에 “import” 라는 키워드를 이용해서 “js”파일을 가져온다.

import 하기 위해서는 각각의 ‘.js’파일에서 export를 시켜줘야 가능하다. 파일명 그래도 import 해야될 경우는

“export default”를 사용하면되고, import 시 파일명을 수정하고 싶으면 “export”를 사용하면 된다.

 

script 태그에 type = "module" 로 설정해주고, js 파일을 원하는대로 네이밍 해서 쓰면 이름이 중복되는 일을 없앨 수 있다.

대신 이렇게 쓸때는, export default 를 사용해줘야 한다. 

위와같이 결과가 잘 나오는 것을 확인할 수 있었다. 

근데 지금와서 처음본건데, 네트워크창에 js파일이 나온다. 맨날 react에서 CRA로 사용하니, bundle로 묶여있어서 이런게 나오는지도 몰랐네... 참 새롭다.. 하하하 ㅎㅎㅎㅎㅎ

 

 

그러면 이렇게 했을 때, 생기는 문제가 뭘까?

위와같이, hello.js 와 world.js 파일을 다운받았는데, 지금은 다운로드 받은 javascript 파일이 2개밖에 되지 않지만 만약에 수백개가된다면??!! 또한 javaScript 뿐만 아니라 css, 이미지 파일 같이 여러가지 파일을 다운로드 받는 다고 생각하면 네트워크 커넥션이 엄청나게 많아질것이다.

그러면 사용자 입장에서 그리고 서비스를 제공하는 입장에서도 더많은 컴퓨팅 파워를 사용해야 합니다.

그리고 네트워크의 부하가 많이 생기면서 컴퓨터가 서비스하는 속도가 느려질 수 밖에 없습니다.

사용자 입장에서는 서비스 경험이 떨어지고 서비스를 컴퓨터의 자원이 많이 사용되기 때문에 돈을 더 많이 써야 되는 그런 단점이 생긴다!!

그래서 여러 개의 파일을 하나로 묶어서 제공하고 싶다는 생각을 한 사람들이 만든 도구가 바로 번들러 라는 도구고

번들러의 대표주자가 바로 webpack 이다.

 

이제 시작이네.... 화이팅 해보자고!!!

 

 

참고

https://www.youtube.com/watch?v=cp_MeXO2fLg&list=PLuHgQVnccGMChcT9IKopFDoAIoTA-03DA