티스토리 뷰

21세기 프론트엔드 목차

  1. 개발 환경 세팅하기
  2. webpack 확장하기
  3. 배포하기

Modern software development

웹 개발에 대해 이 움짤보다 더 잘 설명할 자신이 없다. 당장 2018년 웹 개발자 로드맵만 봐도 배울게 넘친다. (그리고 지금 이 시간에도 계속해서 늘어나고 있다.) 이제 막 프론트엔드 개발을 시작하려 하거나 오래전에 웹 개발을 배운 뒤 정보를 업데이트하지 않았다면 아득한 기분이 들 것이다.

각종 툴과 프레임워크를 '반드시' 공부해야 하는 것은 아니다. CV 페이지를 하나 만드는데 굳이 리액트나 뷰까지 동원해야 할까? 그냥 순수 마크업으로만으로도 만들 수 있다. 무턱대고 최신 기술을 적용하기 전에 정말 그 기술이 필요한지, 왜 필요한지, 다른 대안은 없는지 고민하는 과정이 우선이어야 한다. 오죽하면 설레발 주도 개발이라는 용어까지 나왔다.

만약 새로운 기술을 배우기로 했다면, 바로 시작해보자! 막상 시작해보면 생각만큼 어렵지는 않다. 모든 것이 서로 얽혀있기 때문에 하나를 배우면 동시에 다른 하나를 같이 배우게 된다.

흔히 쓰인 방법

HTML 파일에 외부 CSS나 자바스크립트 코드를 <link>태그나 <script>태그로 가져오는 방식이 많이 쓰였다. (그리고 지금도 많이 쓰인다.)

<!-- 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가 최고였는데, 지금은 Yarn이나 npm이 자주 쓰인다.) npm은 마치 앱스토어에서 어플리케이션을 다운받아 쓰듯이 자바스크립트 패키지를 쉽게 찾고 다운받아서 웹사이트에 적용시킬 수 있도록 만들어준다. 이렇게 하면 해당 웹사이트가 어떤 패키지를 사용하고 있는지 한 눈에 볼 수 있고, 패키지 관리도 훨씬 쉬워진다.

npm은 Node.js를 기반으로 한다. Node.js 홈페이지에서 안정적인 LTS버전을 다운받자. (Node.js를 설치하면 npm도 설치된다. 정확히는 Node.js의 패키지 생태계가 npm이다.) npm을 사용한다는 것은 CLI 환경에서 작업을 한다는 것을 의미미한다. 많은 사람들이 커맨드 라인을 보면 겁을 먹는데, 너무 두려워할 필요는 없다. 익숙해지면 오히려 GUI보다 편하다.

설치가 끝났다면 이제 터미널이나 cmd를 열고 잘 설치되었는지 확인해보자.

Node.js 버전 확인:

$ node -v

npm 버전 확인:

$ npm -v

이제 21세기 프론트엔드 개발 환경 세팅에 첫 삽을 떴다. index.html이 있는 작업 디렉토리로 이동해서 npm 환경을 초기화해주자.

$ mkdir project
$ cd project
$ npm init

projcet 폴더를 만들고 cd project를 통해 project 폴더로 이동했다. npm init을 실행하면 이것저것 설정하는 질문이 뜰텐데 그냥 모두 엔터를 누른다. 나중에 수정할 수 있다. 설정이 끝났다면 index.html이 있는 디렉토리에 package.json이라는 새로운 파일이 생긴다.

{
  "name": "project",
  "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",
  "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"
  }
}

이제 다른 사람과 프로젝트를 함께 할 때 package.json 파일을 주면 상대방은 $ npm install 명령어를 통해 필요한 자바스크립트 패키지를 한번에 다운받을 수 있게 된다. node_modules/jquery/dist/폴더를 보면 jQuery 코드들이 모여있는 것을 볼 수 있다.

<!-- 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는 project 폴더 내 어디서든 사용 가능하며, Node.js는 서버사이드 언어이기 때문에 패키지의 경로를 따로 지정해주지 않아도 모두 알아서 패키지를 가져와 준다. 이제 index.html에서 jQuery를 불러오는 <script>태그를 지우고 사이트를 새로고침하면? 아쉽지만 브라우저는 require를 모르기 때문에 에러가 뜬다. (브라우저는 파일 시스템에 접근하지 못한다.) 그래서 webpack를 사용한다.

webpack 사용하기

webpack은 '모듈 번들러'다. Browserify라는 모듈 번들러도 있는데, webpack은 번들링 뿐만 아니라 부가적인 기능을 많이 제공하고 있어 매우 편리하다. 번들링이라는 것은 여러 자바스크립트 파일들을 하나로 합친다는 의미다. 현재 index.html에서는 jquery.min.jsindex.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을 수정한다.

<!-- 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는 빌드를 자동화해주는 도구다. 예전에는 GruntGulp가 쓰였지만, 요즘은 npm에 포함되어 있는 스크립트 기능(npm script)을 사용하는 추세다. 별도의 패키지를 설치할 필요 없이 package.json만 수정하면 된다.

{
  "name": "project",
  "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"
  }
}

buildwatch라는 명령어를 추가했다.

$ 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",
  "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",
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

buildwatch처럼 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.htmllocalhost:8000에서 열린다. 자바스크립트 파일을 수정하면 브라우저를 새로고침해주기도 한다. 이제 기본적인 세팅을 모두 끝냈다. 이번 글에서는 5개의 파일(index.html, index.js, bundle.js, package.json, webpack.config.js)과 하나의 폴더(node_modules)를 만들었다.

index.html

<!-- 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>

index.js

var $ = require('jquery');
console.log($('#title').text());

package.json

{
  "name": "project",
  "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",
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './',
    compress: true,
    port: 8000
  },
};
댓글
댓글쓰기 폼