페이지방식 개발 – 글로벌 환경

글로벌 환경의 웹개발에서 모듈환경으로의 웹개발로 변화가 된 가장 중요한 두가지 개념은 npm과 webpack (grunt, gulp 등) 이다.

npm은 node package manager 로 모듈 관리자이다.

webpack은 여러가지 모듈을 모아서 하나로 만들어주는 모듈 번들러이다.

페이지 방식으로 된 웹페이지를 하나 만들고 모듈 방식으로 변경해가면서 웹팩에 대한 기본 개념을 익혀보자.

먼저 적당할 폴더를 만든다. c:\eastflag\webpack-demo 와 같이 특정한 폴더를 만든 다음, 윈도우 탐색기에서 해당 폴더를 우클릭해서 webstorm을 열거나 만일 webstorm이라는 context-memu가 없다면 webstorm에서 해당 폴더를 open한다.

src 폴더 아래에 index.js 화일을 만들고 아래와 같이 입력한다.

index.html을 추가하고 아래와 같이 입력한다.

위의 코드는 lodash라는 자바스크립트 화일을 글로벌 환경으로 로딩한 다음 div 태그를 만들고 그 안에 Hello webpack 이라는 문구를 넣은 다음 body 태그에 붙이는 예제이다.

실행해보면 Hello webpack 이라는 문구가 보일것이다.

대부분의 페이지 방식의 php, jsp, asp 같은 서버사이드 렌더링에서 사용하는 방식이다. 여기서의 문제점을 나열하면 아래와 같다.

1. 글로벌 환경으로 실행되기 때문에 변수의 충돌이 일어날 가능성이 있다.

lodash에서 _ 라는 변수를 사용하고 있는데 두번째 이후로 로딩하는 자바스크립트 화일에서 _를 다시 정의하면 변수의 충돌이 발생하여 오동작이 일어나게 된다.

실제로 jquery에서 사용하는 $라는 변수는 다른 라이브러리에서도 많이 사용하기 때무에 충돌이 일어날 수 있다. 그래서 네임스페이스 패턴이나 IIFE 패턴을 사용하여 충돌을 피하는 방법을 사용하게 된다.

2.  로딩순서에 의존성이 있다.

아래 jquery 화일 로딩 후에 jquery-ui 로딩을 순서를 바꾸어서 테스트해보자.

<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

순서를 바꾸면 에러가 난다. 왜냐하면 jquery-ui가 jquery를 사용하기 때문에, 즉 의존성이 있기 때문에 반드시 jquery가 먼저 로딩이 되어야 한다.

이제 이 부분이 모듈 환경으로 넘어가면 npm이 jquery-ui를 먼저 설치를 하더라도 의존성이 있는 화일을 알아서 먼저 설치해주게 되므로 의존성 문제를 해결할 수 있게 된다.

3. 페이지가 바뀔때 마다 이전페이지에서 로딩했던 동일한 자바스크립트 화일들이 대부분 다시  로딩 되어져야 한다.

모바일이 등장하면서 페이지가 바뀔때 마다 많은 자바스크립트와 css가 로딩이 되는것은 네트워크 트래픽 증가와 속도의 저하를 가져오게 되면서 SPA 프레임웍이 등장하게 된다.

모듈 저장소 만들기

이제 위의 글로벌환경으로된 웹 페이지 방식을 모듈방식으로 변경해보자.

위에서는 lodash라는 라이브러리는 브라우저에서 실행시에 인터넷에서 가져오게 된다. 모듈방식에서는 lodash 라이브러리를 먼저 가져온뒤에 필요한 부분만을 가져와서 배포하게 된다.

먼저 npm init 으로 모듈저장소를 먼저 만든다. 이 명령을 수행한 후에 어떤 변화가 있는가? package.json 파일이 만들어졌을 것이다. 이 화일은 모듈방식 개발에서 가장 중요한 환경 화일이다.

이제부터 설치하는 모든 모듈들은 node_modules에 저장되고 그 정보는 package.json 화일에 기록되게 된다.

npm install –save lodash

lodash라는 모듈은 누군가가 벌써 모듈화해서 npm 저장소에 넣어 두었다.  그렇기 때문에 install 명령을 사용하면 그 저장소에서 모듈을 다운로드 해서 설치하게 된다.

이 저장소는 npmjs.com 이라는 곳이다. 여기에 가서 lodash라는 모듈을 확인해보자.

–save 의 의미는 의존성 모듈을 package.json 화일에 기록하라는 것이다.

이 모듈을 설치한 다음 node_modules를 열어보자. node_modules가 모듈이 저장되는 저장소이다. 분명히 lodash  모듈 하나만 설치했는데, 수많은 모듈들이 설치되어있을 것이다. 그 이유가 좀전에 말한 의존성과 관계가 있다. lodash가 의존하는 여러가지 모듈들이 있기 때문에 그 모듈들이 먼저 설치된 다음 lodash 모듈이 설치가 된 것이다.

npm install webpack webpack-cli –save-dev

—save-dev 는 개발 의존성을 package.json에 기록하라는 뜻이다. 개발에 필요한 모듈은 아니지만 개발하는데 필요한 모듈이라는 뜻으로 실제 production할때는 필요없는 모듈이고 개발할때만 필요한 모듈이라는 뜻이다.

여기까지 진행하면 페이지 폴더 구조는 아래와 같을 것이다.

모듈 방식으로의 변경

main.js 화일에서 _라는 lodash 라이브러리는 index.html이라는 웹페이지에 글로벌 변수로 인식되어 어디서나 사용할 수 있다.

이제 글로벌 변수가 아니라 모듈로 사용하기 위해서는 좀전에 로컬에 설치한 lodash 모듈을가져와서 사용하겠다는 부분을 추가한다.

모듈을 정의한 스펙이 CommonJS 스펙으로 이 스펙으로 인해 자바스크립트가 브라우저에서만 사용되는 언어에서 가장 많이 사용되는 언어로 발전하게 되었다.

CommonJS에서는 모듈을 정의하고 배포하는 부분이 export , 모듈을 가져오는 부분이 require 이다.

이것은 es6로 넘어가면서 export, import로 바뀌어졌다.

index.html에서 lodash를 가져오는 script 태그를 삭제 혹은 주석 처리한다.

index.js에는 lodash를 모듈로 가져오도록 아래와 같이 변경한다.

자 이제 브라우저에서 실행을 해보면 될 것같지만 에러가 날것이다. 왜냐하면 아직 import 혹은 require이라는 모듈 방식을 브라우저가 이해하지 못하기 때문이다.

그래서 브라우저가 이해할 수 있도록 lodash에서 필요한 부분만을 꺼내와서 컴파일하고 별도의 자바스크립트 화일을 생성하도록 해야 한다.

이것을 수행하는 역할이 웹팩의 역할이다.

터미널에서 webpack을 수행하기 위해서는 node_modules 아래의 webpack 폴더 아래 bin 폴더의 webpack.js를 node로 실행해야 한다.

node node_modules/webpack/bin/webpack.js

이렇게 긴 명령어를 입력하지 않고 간단하게 하는 방법은 스크립트에등록하는 방법이다. 아래와 같이 package.json에 build 스크립트에 webpack을 등록한다.

그리고 터미널창에 아래와 같이 입력한다.

dist 폴더에 main.js 화일이 생성되었을 것이다.

이 화일을 실행하기 위해서는 index.html 화일을 dist 폴더에 복사한 후에 index.html의 ./src/index.js 를 ./main.js 로 바꾸어 준 다음 실행해 보자. 잘 실행되는것을 알수 있을것이다.

webpack 환경화일 만들기

webpack.config.js 화일을 추가하자.

폴더 구조는 아래와 같을 것이다.

webpack.config.js는 다음과 같다.

이제 이 환경화일을 읽어서 다시 실행해보자.

build 스크립트를 아래와 같이 수정한다.

webpack에서 가장 중요한 두가지는 entry point라는 진입점과 번들링된 결과를 출력하는 output 폴더이다.

여기서는 src/index.js가 entry 포인트가 되며 여기서 부터 시작해서 모든 필요한 모듈들을 번들링 한 다음에

dist/main.js로 output 결과물을 생산하게 된다.

( webpack 버전 4에서는 entry point가 src/index.js  output 폴더가 dist/main.js가 디폴트이다)

dist 폴더에 main.js가 정상적으로 생성되었는지 확인하고 또한 실행해서 결과를 확인해보자.

package.json 의 전체 내용은 다음과 같다.