-
[TIL] 웹팩에 대하여IT 지식 2020. 12. 29. 15:10728x90
저는 프로젝트 초기 셋팅을 주로 create-react-app 이나, create-next-app을 활용하여 진행합니다. 이 npx 명령어들은 웹팩과 바벨에 대한 셋팅까지 자동으로 해주기 때문에 이전까지는 제가 웹팩이나 바벨에 대해 신경을 쓰지 않아도 됐습니다. 하지만 프론트엔드 개발자로서 웹팩과 바벨에 대한 기본적인 이해가 필요하다고 생각하게 되었습니다(내가 활용하고 있는 기술 스택이 뭔지는 알고 써야하니까요). 그래서 이번 포스팅에서는 웹팩이란 무엇이고 이것을 어떻게 활용하는 지에 대해 알아보도록 하겠습니다.
1. 웹팩이란?
웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 소스코드 등(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합된 하나의 결과물로 만드는 도구를 의미합니다.
2. 모듈이란?
모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다.
// math.js function sum(a, b) { return a + b; } function substract(a, b) { return a - b; } const pi = 3.14; export { sum, substract, pi } //출처: https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#%EB%AA%A8%EB%93%88%EC%9D%B4%EB%9E%80위의 예시처럼 math.js는 sum, substract, pi라는 세 가지 함수를 지니고 있는 모듈이라고 할 수 있습니다.
웹팩에서 지칭하는 모듈은 비단 자바스크립트만을 의미하지 않습니다. 웹팩에서는 웹 어플리케이션을 구성하는 모든 자원을 각각의 모듈로서 인식합니다. HTML,CSS Javascript 뿐만이 아니라, Images, Font 등등의 파일들이 전부 해당합니다.
웹팩은 위와 같은 과정을 통해 수백개의 웹 어플리케이션 자원들을 하나로 통합하는 과정인 '모듈 번들링'을 통해 자원을 통합 관리합니다.
3. 웹팩의 등장 배경
웹팩이 등장하게 된 배경은 크게 세 가지입니다.
1) 파일 단위의 자바스크립트 모듈 관리의 필요성
2) 웹 개발 작업 자동화 도구
3) 웹 어플리케이션의 빠른 로딩 속도와 높은 성능
1) 파일 단위의 자바스크립트 모듈 관리의 필요성
자바스크립트의 변수 유효 범위는 기본적으로 전역적으로 설정되어 있습니다. 최대한 넓게 설정된 변수 범위(이하 스코프)는 자바스크립트 어디에서도 접근하기 용이하다는 장점을 가지고 있습니다. 하지만, 이는 오히려 매우 큰 단점으로 작용하기도 합니다. 바로 변수가 쉽게 바뀔 수 있다는 점입니다.
// app.js var num = 10; function getNum() { console.log(num); } // 출처: https://joshua1988.github.io/webpack-guide/motivation/why-webpack.html#%ED%8C%8C%EC%9D%BC-%EB%8B%A8%EC%9C%84%EC%9D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AA%A8%EB%93%88-%EA%B4%80%EB%A6%AC// main.js var num = 20; function getNum() { console.log(num); } //출처: https://joshua1988.github.io/webpack-guide/motivation/why-webpack.html#%ED%8C%8C%EC%9D%BC-%EB%8B%A8%EC%9C%84%EC%9D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AA%A8%EB%93%88-%EA%B4%80%EB%A6%AC<!-- index.html --> <html> <head> <!-- ... --> </head> <body> <!-- ... --> <script src="./app.js"></script> <script src="./main.js"></script> <script> getNum(); // 20 </script> </body> </html> //출처: https://joshua1988.github.io/webpack-guide/motivation/why-webpack.html#%ED%8C%8C%EC%9D%BC-%EB%8B%A8%EC%9C%84%EC%9D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AA%A8%EB%93%88-%EA%B4%80%EB%A6%AC위의 HTML파일을 실행해보면 결과 값이 20으로 나오게 됩니다. app.js 에서 선언한 변수가 main.js에서 다른 변수로 바뀌었기 때문입니다. 보여드린 예시는 코드가 길지 않아 문제를 바로 확인할 수 있었지만, 대규모 프로젝트에서 이런 문제가 발생한다면 문제점을 찾는 것은 쉽지 않습니다. 이러한 문제점은 코드의 안정성을 떨어뜨리기 때문에 오래전부터 자바스크립트 개발자들에게 커다란 고민으로 작용했었습니다.
2) 웹 개발 작업 자동화 도구
프론트엔드 개발을 하다보면 CSS와 같은 작업을 할 때에는 코드 한 줄 바꾸고 새로고침을 하는 경우가 잦습니다. 이는 개발하는 입장에서는 굉장히 번거로운 일입니다. 이 외에도 개발자는 웹 서비스를 배포할 때 HTML,CSS,JS 압축, CSS 전처리기 변환등의 작업을 매번 거쳐야만 했습니다. 웹팩은 이런 반복적이고 귀찮은 일들을 처리해주기 위해 등장하게 되었습니다.
3) 웹 어플리케이션의 빠른 로딩 속도와 높은 성능
인터넷이 발달하지 않았던 시대에도 웹페이지의 로딩 속도가 느리면 사용자들은 쉽게 사이트를 이탈하곤 했습니다. 더욱이 요즘처럼 인터넷 기술이 더욱더 발달한 시대에는 사이트가 5초 이내에 등장하지 않으면 이탈해버리고 말죠. 그래서 각 웹페이지마다 빠른 로딩 속도가 요구되고 있습니다.
이 문제를 해결하기 위해서 기존의 모든 웹 페이지 정보를 불러오는 방식에서 벗어나서, 필요한 최소한의 정보만을 요청하고 가져오는 식의 웹 페이지 개발이 주목받기 시작했습니다. 웹팩이 수행하는 기능에는 이러한 웹페이지 정보의 분할 요청도 있습니다.
4) 웹팩의 해결책
웹팩은 위와 같은 문제를 다음과 같은 방식을 해결합니다.
(1) 웹팩 모듈링
자바스크립트의 유효 변수 범위에 대한 문제를 웹팩은 ES6의 Modules문법과 모듈 번들링으로 해결합니다.
(2) HTTP 요청 숫자의 제약
사이트의 반응 속도를 높이기 위해 웹팩은 HTTP 요청 숫자를 제한하고 있습니다. 이는 각 브라우저 별로 상이하며, 웹팩의 모듈번들링을 활용하면 HTTP 요청 숫자 제약을 피할 수도 있습니다.
(3) Code Spliting
웹팩의 Code Spliting 기능을 활용하면 원하는 모듈을 원하는 타이밍에 로딩할 수 있습니다.
4. 마무리
웹팩은 최신 Front-end UI Framework를 사용하는데 거의 필수적인 기술로 사용되고 있습니다. 대부분의 프레임워크에서 초기 셋팅을 도와주는 패키지 등이 존재하며, 그 패키지 내부에는 웹팩과 바벨에 대한 설정이 어느정도 다 되어 있기에 개발자 입장에서는 이 부분을 거의 신경쓰지 않아도 되는 것이 사실입니다. 하지만 그래도 내가 쓰고 있는 기술이 어떤 것인지를 잘 알아야 더욱 고성능의 웹 어플리케이션을 만들 수 있고, 후에 문제가 생기거나 다른 변화가 생겼을 때 빠르게 적응할 수 있을 것입니다.
나중에 기회가 된다면 직접 웹팩을 설정하는 시간도 가져보도록 하겠습니다.
감사합니다~
728x90'IT 지식' 카테고리의 다른 글
새해 맞이 2020 개발 트렌드 돌아보기 - 가장 많이 사랑받은 기술들 (0) 2021.01.06 새해 맞이 2020 개발 트렌드 돌아보기 - 가장 많이 사용한 기술들 (0) 2021.01.06 [TIL] 동적 라우팅 (0) 2020.12.06 [TIL] 로컬 스토리지, 세션 스토리지 그리고 쿠키 (0) 2020.12.06 [TIL] Timer 만들기 (1) 2020.12.06