21세기 프론트엔드 (1) 시작하기
솔직히 프론트엔드 개발에 대해 이 움짤보다 더 잘 설명할 자신이 없습니다. 당장 2018년 웹 개발자 로드맵만 봐도 배울게 넘칩니다. (그리고 지금 이 시간에도 계속해서 늘어나고 있습니다.) 이제 막 프론트엔드 개발을 시작하려는 분이나 오래전에 웹 개발을 배운 뒤 정보를 업데이트하지 않은 분들은 아득한 기분이 들겁니다. 그래도 막상 시작해보면 생각만큼 어렵지는 않습니다. 모든 것이 서로 얽혀있기 때문에 하나를 배우면 동시에 다른 하나를 같이 배우게 됩니다. 이번 글에서만 npm과 npm scripts, webpack을 다룹니다. 너무 걱정하지 마세요.
오래된 방법
처음 웹 프로그래밍을 배울 때는 HTML 파일에 외부 CSS나 자바스크립트 코드를 <link>태그나 <script>태그로 가져오라고 배웁니다. 이렇게요:
(html comment removed: index.html )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>index</title>
</head>
<body>
<h1 id="title">Hello, world!</h1>
<script src="index.js"></script>
</body>
</html>
이정도만 해도 웹사이트는 잘 돌아갑니다. 하지만 많은 점이 불편합니다.
- 만약 자바스크립트 코드가 방대해져서 파일을 30개로 쪼갠다면
index.html에는 30개의 script태그가 필요하게 됩니다. CSS도 마찬가지구요. - 뿐만 아니라 외부 자바스크립트 라이브러리를 가져올 때도 문제가 생깁니다. 만일 jQuery 3.3.1 버전을 다운받아서
<script src="jquery-3.3.1.min.js"></script>와 같은 코드를 작성한다면 jQuery 3.4.0 버전이 나왔을 땐 다시 코드를 다운받는 수고를 해야합니다. - 다른 사람과 프로젝트를 공유할 때도 불편합니다. 어떤 파일이 어떤 라이브러리나 프레임워크를 사용하고 있는지 일일히 설명해야하고, 또 그 파일들을 모두 공유해야 하니까요.
npm(node package manager) 사용하기
그래서 npm이라고 하는 '패키지 매니저'를 사용합니다. (원래는 대부분 Bower를 사용했는데, 이젠 npm이 더 인기있습니다.) npm은 마치 앱스토어에서 어플리케이션을 다운받아 쓰듯이 자바스크립트 패키지를 쉽게 찾고 다운받아서 웹사이트에 적용시킬 수 있도록 만들어줍니다. 이렇게 하면 해당 웹사이트가 어떤 패키지를 사용하고 있는지 한 눈에 볼 수 있고, 패키지의 버전 관리도 훨씬 쉬워집니다.
npm은 Node.js를 기반으로 합니다. Node.js 홈페이지에서 안정적인 LTS버전을 다운받으세요. Node.js를 설치하면 npm도 설치됩니다. npm을 사용한다는 것은 CLI 환경에서 작업을 한다는 것을 의미합니다. 많은 분들이 커맨드 라인을 보면 겁을 먹는데, 너무 걱정하지 않으셔도 됩니다. 익숙해지면 오히려 GUI보다 편합니다. 자, 설치가 끝났다면 이제 터미널이나 cmd를 열고 잘 설치되었는지 확인해보세요.
Node.js 버전 확인:
$ node -v
npm 버전 확인:
$ npm -v
이제 21세기 프론트엔드 개발 환경 세팅에 첫 삽을 떴습니다. index.html이 있는 작업 디렉토리로 이동해서 npm 환경을 초기화해줍니다.
$ npm init
이것저것 설정하는 질문이 뜰텐데 그냥 모두 엔터를 눌러주세요. 나중에 수정할 수 있습니다. 설정이 끝났다면 index.html이 있는 디렉토리에 package.json이라는 새로운 파일이 생깁니다.
{
"name": "project-name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
이제 npm으로 jQuery를 설치해볼까요?
$ npm install jquery
이 명령어를 실행하면 npm의 중앙 저장소에서 jQuery를 다운받아 node_modules라는 폴더에 저장합니다. package.json을 새로고침하면 내용이 바뀐 것을 볼 수 있습니다.
{
"name": "project-name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1"
}
}
정말 편합니다. 이제 다른 사람과 프로젝트를 함께 할 때 node_modules 폴더를 주지 않고 package.json 파일을 주면 상대방은 $ npm install 명령어를 통해 필요한 자바스크립트 패키지를 한번에 다운받을 수 있게 됩니다. node_modules/jquery/dist/폴더를 보면 jQuery 코드들이 모여있는 것을 볼 수 있습니다.
(html comment removed: index.html )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>index</title>
</head>
<body>
<h1 id="title">Hello, world!</h1>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
이렇게 하면 index.js에서 jQuery를 사용할 수 있습니다. 하지만 패키지를 설치하고 불러 올때마다 node_moduels 폴더를 뒤져봐야 하는 것은 여전히 불편합니다. 하지만 이것도 쉽게 해결할 수 있습니다.
// index.js
var $ = require('jquery');
console.log($('#title').text());
jquery는 전역에서 사용 가능하며, Node.js는 서버사이드 언어이기 때문에 패키지의 경로를 따로 지정해주지 않아도 모두 알아서 패키지를 가져와 줍니다. index.html에서 jQuery를 불러오는 <script>태그를 지우고 사이트를 새로고침해보세요. 어떤가요? 아쉽지만 브라우저는 require를 모르기 때문에 에러가 뜹니다. (브라우저는 파일 시스템에 접근할 권한을 가지고 있지 않습니다.) 그래서 우리는 webpack를 사용합니다.
webpack 사용하기
webpack은 '모듈 번들러'입니다. Browserify라는 모듈 번들러도 있는데, webpack은 번들링 뿐만 아니라 부가적인 기능을 많이 제공하고 있어 매우 편리합니다. 번들링이라는 것은 여러 자바스크립트 파일들을 하나로 합친다는 의미입니다. 현재 index.html에서는 jquery.min.js와 index.js를 따로 불러들이고 있는데, webpack을 사용하면 bundle.js와 같은 파일 하나만 부를 수 있게 됩니다. 또한 앞서 사용하지 못한 require도 사용할 수 있게 됩니다. 그럼 webpack을 설치해봅니다.
$ npm install webpack --save-dev
--save-dev은 개발 의존으로 설치하겠다는 의미입니다. 즉, webpack이 개발용으로만 쓰이고 실제 배포판에서는 사용되지 않을 것이라는 뜻입니다. package.json을 확인해보면 아까 설치한 jquery와는 다르게 devDependencies로 설치된 것을 볼 수 있습니다.
그럼 이제 webpack을 세팅해볼까요? webpack을 세팅하기 위해서는 webpack.config.js라는 파일을 만들어야 합니다. 파일 이름은 꼭 webpack.config.js이어야 webpack이 실행될 때 이 파일을 참조하게 됩니다.
// webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
}
};
entry는 번들링할 파일, output은 번들링한 결과물로 나올 파일을 의미합니다. 우리는 index.js를 번들링해서 bundle.js로 내보낼 것입니다. index.html을 수정합시다.
(html comment removed: index.html )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>index</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="bundle.js"></script>
</body>
</html>
그리고 webpack을 실행하면!
$ ./node_modules/.bin/webpack
bundle.js가 만들어지고, 사이트도 잘 돌아갑니다. 하지만 매번 index.js를 수정할 때마다 webpack을 실행해주는 건 불편합니다. 이건 어떡할까요?
task runner 사용하기
task runner는 빌드를 자동화해주는 도구입니다. 예전에는 Grunt나 Gulp가 쓰였지만, 요즘은 npm에 포함되어 있는 스크립트 기능을 사용하는 추세입니다. 별도의 패키지를 설치할 필요 없이 package.json만 수정하면 바로 되니까 정말 편합니다.
{
"name": "project-name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --progress -p",
"watch": "webpack --progress --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.10.0",
},
"dependencies": {
"jquery": "^3.3.1"
}
}
build와 watch라는 명령어를 추가했습니다.
$ npm run build
build를 하면 webpack이 실행되며 코드를 빌드해줍니다. UglifyJS와 같은 플러그인을 설치하고 스크립트를 조금 수정하면 minify된 배포용 코드를 만들 수도 있습니다. 이건 다음 글에서 다루겠습니다.
$ npm run watch
watch는 자바스크립트 파일이 수정될 때마다 자동으로 webpack을 실행시켜줍니다. 한 번만 켜두면 자바스크립트 코드를 수정하고 저장할 때마다 webpack이 실행되어 모든 코드가 번들링됩니다. 이제 여기에 웹 서버를 돌리면 개발환경을 더 편리하게 만들 수 있습니다.
웹 서버 사용하기
아파치나 Nginx를 설치하지 않아도 웹서버를 구축할 수 있습니다. webpack이 제공하는 웹서버를 설치하면 됩니다.
$ npm install webpack-dev-server --save-dev
설치가 끝나면 package.json에 스크립트를 추가해줍니다.
{
"name": "project-name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --progress -p",
"watch": "webpack --progress --watch",
"server": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {
"jquery": "^3.3.1"
}
}
build와 watch처럼 server를 사용할 수 있게 되었습니다. 그리고 webpack.config.js에도 서버에 대한 설정을 추가해줍니다.
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
},
devServer: {
contentBase: './',
compress: true,
port: 8000
},
};
그리고 서버를 실행하세요.
$ npm run server
이렇게 하면 webpack.config.js가 있는 디렉토리의 index.html이 localhost:8000에서 열립니다. 자바스크립트 파일을 수정하면 브라우저를 새로고침해주기도 합니다. 정말 엄청나게 편해졌죠. 이제 기본적인 세팅을 모두 끝냈습니다. 이번 글에서 우리는 5개의 파일(index.html, index.js, bundle.js, package.json, webpack.config.js)과 하나의 폴더(node_modules)를 얻었습니다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>index</title>
</head>
<body>
<h1 id="title">Hello, world!</h1>
<script src="bundle.js"></script>
</body>
</html>
index.js
var $ = require('jquery');
console.log($('#title').text());
package.json
{
"name": "project-name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --progress -p",
"watch": "webpack --progress --watch",
"server": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {
"jquery": "^3.3.1"
}
}
webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
},
devServer: {
contentBase: './',
compress: true,
port: 8000
},
};