티스토리 뷰

SW 개발/JavaScript

NPM을 이용하여 프론트엔드 라이브러리 적용하기

지단로보트 2016. 9. 20. 13:32

개요

대개 jQuery, Bootstrap과 같은 프론트엔드 영역의 라이브러리(또는 프레임워크)를 프로젝트에 적용시 해당 라이브러리를 직접 다운로드하거나 CDN을 활용하는 방식을 사용해왔다. 이러한 방법은 최근의 백엔드 영역의 빌드 자동화에 비하면 대단히 낙후된 방법으로 이를 극복하기 위해 서버 영역에서는 WebJars, 클라이언트 영역에서는 Bower 등이 등장하였다. 이번 글에서는 Node.js의 패키지 매니저인 NPM을 이용하여 프로젝트에 프론트엔드 라이브러리를 적용하는 방법을 소개하고자 한다.

package.json

NPM을 이용하여 프론트엔드 모듈을 설치하기 위해 프로젝트 루트에 package.json을 아래와 같이 작성한다.

{
    "name": "helloworld-app",
    "version": "0.0.1",
    "devDependencies": {
        "grunt": "~1.0.1",
        "webpack": "~1.13.2",
        "webpack-dev-server": "~1.15.1",
        "grunt-webpack": "~1.0.14",
        "grunt-contrib-copy": "~1.0.0",
        "jquery": "~3.1.0",
        "bootstrap": "~3.3.7",
    }
}
  • jquery, bootstrap 프론트엔드 모듈을 사용하기 위해 의존성 정보를 작성하였다. 작성 후 커맨드 창에서 npm install를 실행하면 프로젝트 루트의 node_modules 디렉토리에 앞서 정의한 모듈이 설치된다.

Gruntfile.js

앞서 설치한 프론트엔드 모듈을 개발환경 또는 배포환경에 적용하기 위해 프로젝트 루트에 Gruntfile.js을 아래와 같이 작성한다. (Gruntfile.js는 프로젝트 빌드 도구인 Grunt의 작업 설정 파일이다.)

module.exports = function (grunt) {

    grunt.initConfig({
        copy: {
            build: {
                files: [
                    {
                        expand: true,
                        cwd: 'node_modules',
                        src: ['bootstrap/dist/**'],
                        dest: 'build/assets'
                    }
                ]
            }
        },
        webpack: {
            build: {
                entry: './src/app.js',
                output: {
                    path: 'build',
                    filename: 'app.js'
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-webpack');
    grunt.registerTask('dev', ['copy:dev', 'webpack:dev']);
}
  • copy 작업은 grunt-contrib-copy를 이용하여 node_modules에 존재하는 Bootstrap의 배포 파일(CSS, 글꼴, 이미지 등)을 지정한 경로에 복사한다. src 옵션에 복수개의 복사 대상 경로를 지정할 수 있다.
  • webpack 작업은 grunt-webpack을 이용하여 모듈 개념을 도입하여 작성한 사용자의 JavaScript 파일을 컴파일한다.
  • 뒤에 설명할 소스 코드까지 작성을 완료하고 커맨드 창에서 grunt build 명령을 실행하면 위 작성한 작업들이 순서대로 실행된다.

index.html

애플리케이션의 시작점인 /src/index.html을 아래와 같이 작성한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>Hello, World</title>
    <link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap-theme.min.css">
    <script src="app.js"></script>
</head>
<body>
</body>
</html>
  • 앞서 작성한 grunt-contrib-copy 작업에 따라 개발환경에 복사된 Boostrap의 CSS 파일을 로드하도록 작성하였다.
  • CSS는 기존의 방식대로 로드하지만 JavaScript는 NPM 모듈의 장점을 활용할 것이다.

app.js

Webpack으로 빌드할 /src/app.js를 아래와 같이 작성한다.

window.$ = window.jQuery = require('jquery');
require('bootstrap');
  • NPM을 이용한 프론트엔드 모듈 관리의 장점은 위와 같이 Webpack이 제공하는 require() 구문을 이용하여 설치된 모듈을 참조할 수 있어 재사용성이 증가한다는 것이다. 위 2개 문장 만으로 JavaScript에서 jQuery와 Bootstrap의 API를 전역 범위에서 사용할 수 있다.
  • 사용자가 작성한 JavaScript 파일은 반드시 UTF-8 인코딩으로 저장해야 한다. Webpack은 빌드 대상이 되는 파일들을 모두 UTF-8 인코딩으로 간주하기 때문에 다른 인코딩을 사용할 경우 글자가 깨진채 빌드된다.
저작자표시 비영리 동일조건
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함