😏새로운 기술을 접하며...
벌써 개발자로서 공부를 시작한지 3개월이 지났다. Javascript,python,Html,Css 부터 시작해서 React.js 와 Redux까지 정말 3개월도안 많은 기술스텍을 접해보고 최대한 내 것으로 만들기 위해 노력하며 달려왔다. 이제 다음 주 부터는 위코드의 마지막 과정인 기업협업 과정이다. 운이 좋게도 이번에 기업협업 후보 중에 제일 가고 싶었던 브랜디(Brandi) 로 협업을 나가게 되었다. 이미 나갔다 온 11기 선배들에게 조언을 들어본 결과 브랜디에서 사용하는 기술스텍은 지금까지 배웠던 React.js가 아닌 Vue.js라고 했다. 이 이야기를 듣자마자, 걱정부터 앞서기 시작했다. 아직 React라는 라이브러리도 완벽하게 사용하지 못하는 상태에서 새로운 기술을 배우는게 맞는건가 싶었다. 하지만 개발자라면 앞으로도 끊임없이 새로운 기술들이 나올테고 시대를 잘 따라가기 위해서는 새로운 기술을 공부하는 것이 옳다고 판단 헀다. 그렇기에 협업을 나가기 전에 미리 Vue.js에서 중요한 개념인 웹팩에 대해서 미리 공부해보기로 했다.
웹팩이란 무엇인가?
웹팩(Webpack)은 최신에 프레임워크에서 가장 많이 사용되는 모듈 번들러이다. 여기서 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript)등 모두 각각의 모듈로 보고 이를 병합된 하나의 결과물을 만드는 도구를 의미한다.
모듈이란 ,
// math.js
function sum(a, b) {
return a + b;
}
function substract(a, b) {
return a - b;
}
const pi = 3.14;
export { sum, substract, pi }위는 math.js라는 sum,substract, pi 기능을 갖고있는 모듈이다. 즉 이처럼 성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하고 export를 통해서 해당 기능을 사용 할 수 있다.
위와 같이 웹 애플리케이션을 구성하는 많은 자원들을 하나로 병합하고 압축해주는 동작을 모듈 번들링이라고 정의할수 있다. ( 빌드, 번들링, 변환 모두 같은 의미로 통일한다 )
☺️웹팩의 필요성에 대하여..
1. 파일 단위로 자바스크립트 모듈 관리하기
<!-- index.html -->
<html>
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<script src="./app.js"></script>
<script src="./main.js"></script>
</body>
</html>
// app.js
var num = 10;
function getNum() {
console.log(num);
}
// main.js
var num = 20;
function getNum() {
console.log(num);
}위와 같이 index.html에서 같은 변수 이름을 갖고 다른 값을 정의하고 있는 두가지의 자바스크립트를 불러온다고 가정하자. 그렇다면 과연 html에서 출력되는 값은 무엇일까? 아마도 main.js의 값인 num = 20 이 결과로 출력 될 것 이다. app.js에서 10을 선언하고 main.js에서 다시 20을 선언해주었기 때문에 나타나는 문제점이다. 이러한 문제점을 개발환경이 복잡해질수록 선언한 변수의 이름을 기억하기 어렵기 떄문에 의도치 않게 똑같은 변수이름을 선언하여 나타날 수 있다.
2. 웹 개발 작업 자동화 도구
- 웹팩 없이 작업할 때 텍스트 편집기에서 코드를 수정한 뒤 브라우저를 새로고침을 해야만 화면에 변경된 내용을 볼 수 있었다 또한 웹 서비스를 개발하고 웹서버에 배포하기 위해서는 HTML,CSS, Js압축 같은 작업들을 해야만 했다. 하지만 웹팩을 사용하면 이러한 작업들을 자동화 시킬 수 있는 도구를 사용하여 편리하다.
3. 웹의 성능 향상
- 웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아닌 실시간으로 요청한다 그렇기 때문에 브라우저에서 서버로 요청하는 파일을 크게 줄이면서 로딩속도, 그리고 높은 성능을 낼 수 있게 되었다.
✌️웹팩의 4가지 주요 속성 살펴보기...
웹팩의 빌드 과정에는 중요한 속성 네 가지가 있다.
1.Entry
entry 속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로이다.
// webpack.config.js
module.exports = {
entry: './src/index.js'
}위 코드는 웹팩을 실행 했을떄 src 폴더 밑의 index.js을 대상으로 웹팩이 빌드를 수행하는 코드이다.
👀그렇다면 Entry 파일에는 어떤 내용이 들어가야 할까?
entry 속성은 웹의 전반적인 구조의 내용이 담겨져야한다. 웹팩은 해당 파일을 가지고 웹 어플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들이 다겨져야한다.
블로그 서비스를 웹팩으로 빌드한다고 했을 떄를 예를 들어보자.
// index.js
import LoginView from './LoginView.js';
import HomeView from './HomeView.js';
import PostView from './PostView.js';
function initApp() {
LoginView.init();
HomeView.init();
PostView.init();
}
initApp();위 코드는 해당 서비스가 SPA 이라 가정하고 작성된 코드이다. 사용자의 로그인 화면, 로그인 후 진입하는 메인화면, 그리고 게시글을 작성하는 화면 등 웹에서 필요한 화면들을 모두 index.js에서 불려져 사용되기 떄문에 웹팩을 실행하면 해당 파일등의 내용까지 해석하여 파일을 빌드 시켜준다.
entry: {
login: './src/LoginView.js',
main: './src/MainView.js'
}
위와 같이 엔트리 포인트를 여러 개로 나눌 수 있다. 하지만 위와 같이 엔트리 포인트를 분리하는 경우는 싱글 페이지 애플리케이션이 아닌 특정 페이지로 진입 했을 때 서버에서 해당 정보를 내려주는 형태의 MVC(멀티 페이지 애플리케이션) 에 더 적합한 Entry 유형이다.
이열... 웹팩 끝냈어
~~~