글 작성자: NoHack
728x90

Devtools

오늘날에는 프론트엔드의 코어 기본기(HTML, CSS, JavaScript)와 함께 개발 도구를 능숙하게 다루는 것 또한 중요해졌습니다. 구형 웹 브라우저와의 호환성을 위해 트랜스파일러의 도움을 받기도 하고, 수많은 리소스를 하나의 파일로 압축해 주는 번들러의 도움을 받기도 합니다. 이 외에도 프론트엔드에서 사용되는 개발 도구는 정말 많습니다.

그래서 이번 쿠키런 소식 페이지 만들기 시리즈를 작성하게 되었고, 이전 장에서 만든 쿠키 뉴스에 개발 도구를 같이 적용해 보면서 익숙해지시면 좋겠습니다. 이전 글인 화면 만들기에 이어서 진행되니, 되도록이면 시리즈 첫 장부터 진행해 주세요 😆

개발 도구 설치는 모두 npm으로 진행하니, 진행에 앞서 Node.js를 설치해 주세요. (LTS v16 기준)

프로젝트 설정 (npm 명령어)

진행했던 프로젝트의 루트에서 터미널을 연 다음, 아래 과정을 진행해 주세요.

$ npm init -y

npm init은 프로젝트에 대한 설명을 작성하면, 작성한 내용을 바탕으로 package.json 파일을 생성하는 명령입니다. 기본 명령을 실행하면 프로젝트 초기 세팅에 대해 많은 질문을 하지만, -y 옵션을 지정하면 기본 세팅으로 알아서 진행합니다. package.json은 앞으로 설치할 패키지에 대한 의존성 정보를 관리하며, NPM으로 패키지 설치 시 이 파일을 참조합니다.

이후 필요한 패키지는 다음 명령들로 설치하거나 제거하면 됩니다.

# 패키지 설치
$ npm install 패키지명
$ npm install -D 패키지명

# 패키지 제거
$ npm uninstall 패키지명

패키지를 설치하면 루트에 위치한 node_modules 디렉토리에 저장되어, 프로젝트 내라면 어디서든 사용 가능합니다. 그리고 설치 시 -D 옵션을 지정하면, 개발 단계에서만 사용할 수 있도록 설치할 수 있습니다. 설치된 패키지에 대한 정보는 package.json 파일에 작성됩니다.

마지막으로 npm run과 npx 명령도 알아보고 넘어가겠습니다.

$ npm run 스크립트
$ npx 패키지명

npm run은 package.json 파일의 scripts 부분에 작성된 커맨드를 실행할 수 있는 명령으로, 주로 프로젝트를 빌드하거나 개발 서버를 켤 때 사용합니다. npx는 npm 5.2 버전부터 기본으로 제공되는 패키지 실행 도구이며, 지역 또는 전역에 패키지를 설치하는 npm과 달리 패키지를 설치하지 않고도 항상 최신 패키지를 불러와 실행합니다.

npm과 함께 yarn이라는 패키지 매니저도 많이 사용하지만, 본 시리즈에서는 npm으로 진행합니다.

Webpack

프론트엔드 개발 시 자바스크립트 모듈을 사용하는 것이 이제는 필수입니다. 하지만 모든 브라우저가 ES6 모듈 문법을 지원하고 있지는 않아, 변수의 이름이 충돌하거나 하는 문제가 발생할 수 있습니다. 이럴 때 번들러의 도움을 받게 되면, 모듈을 지원하고 있지 않은 브라우저라도 문제를 해결할 수 있으며, 번들링 뿐만 아니라 개발 생산성까지 높여줍니다.

번들러 중에는 대표적으로 웹팩(Webpack)이 있습니다. 다양한 모듈 포맷(ES2015, CommonJS, AMD)을 지원하고, Loader와 Plugin 옵션으로 수많은 기능을 제공 받을 수 있습니다. 아래 그림은 웹팩의 핵심 역할을 나타낸 그림입니다.

번들링(Bundling)이란 여러 파일을 압축 또는 난독화를 통해 하나의 파일로 묶어주는 작업입니다.

Installation

설치

웹팩을 사용하기에 앞서 npm으로 웹팩을 설치해야 합니다.

$ npm install -D webpack webpack-cli

설치하는 두 패키지는 개발 단계에서만 필요하기 때문에, -D 옵션을 지정해 설치합니다. 그리고 설치가 완료되었으면, 루트 디렉토리에 webpack.config.js라는 이름의 파일을 만들고 웹팩을 설정할 준비를 합니다. 웹팩 기본 설정을 사용해도 상관없지만, 대부분의 경우 상황에 맞춰 설정을 커스텀합니다. 웹팩은 기본적으로 webpack.config.js를 설정 파일로 참조하지만, --config 옵션으로 별도 지정 가능합니다.

지금까지 잘 따라오셨다면 프로젝트 구조가 다음과 같을 겁니다.

.prettierrc 파일의 유무는 시리즈 진행에 아무 영향 없으니 무시하셔도 좋습니다 😅

Entry (시작점)

웹팩은 모든 것을 모듈로 다루며 자바스크립트 뿐 아니라 CSS, 이미지 등의 파일도 모듈로 로딩합니다. 이러한 작업은 웹팩의 Loader에 의해 진행되는데 이건 잠시 후 만나보고, Entry 먼저 알아보겠습니다. Entry는 불러온 모든 모듈의 시작점이 되는 모듈이며, 이 지점을 바탕으로 모듈간 의존성 그래프를 그립니다. 위에 첨부한 웹팩 그림에서 좌측이 의존성 그래프를 보여주는 예입니다.

엔트리의 기본값(경로)은 ./src/index.js이지만, 설정 파일에서 변경 가능합니다.

// webpack.config.js
module.exports = {
  entry: './asset/js/main.js',
};

우리 프로젝트의 시작점은 main.js이므로 알맞게 경로를 지정해 줍시다.

Output (출력)

웹팩은 설정 파일의 Entry를 기준으로 번들링을 진행하고, 번들링 된 결과 파일을 Output에 지정한 경로에 저장합니다. 출력 파일이 저장되는 기본 경로는 ./dist/main.js이며, 함께 생성되는 기타 파일들은 동일하게 ./dist에 저장됩니다. 이 값 역시 설정 파일에서 변경 가능합니다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './asset/js/main.js',
  output: {
  	// path.resolve (경로를 조합해 주는 Node.js API)
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

Output은 path와 filename 속성으로 설정하며, path 속성의 값으로 경로를 조합하고, filename 속성의 값으로 번들링 된 파일의 이름을 정할 수 있습니다. 번들링 된 파일의 이름을 정할 때 위와 같이 직접 풀네임(fullname)을 적는 것 외에도 웹팩 자체적으로 해시값을 생성해 짓는 방법도 있습니다. 궁금한 분들은 여기에서 확인해 보세요.

Loader (로더)

자바스크립트는 기본적으로 자바스크립트 또는 json 파일만 이해할 수 있습니다. 하지만 Loader의 도움을 받는다면, CSS나 이미지와 같은 파일들을 모듈 형태로 자바스크립트 안에 불러올 수 있습니다. 이것이 가능한 이유는 Loader가 이들을 불러올 때, 자바스크립트로 알맞게 변환해 주기 때문입니다.

Loader는 외부 패키지이므로 npm으로 설치해야 합니다.

$ npm install -D style-loader css-loader file-loader

이들 역시 개발 단계에서만 필요하므로, -D 옵션을 지정해 설치하면 됩니다. 설치한 이후에는 설정 파일에 module.rules를 추가하고, 그 안에 test와 use 프로퍼티로 이루어진 객체를 나열하면 됩니다. test에는 변환이 필요한 확장자를 정규 표현식 형태로 적어주고, use에는 변환에 사용할 Loader들을 배열로 나열하면 됩니다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './asset/js/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
};
use에 나열된 Loader들은 오른쪽에서 왼쪽으로 순차 실행됩니다 👏

Plugins (플러그인)

로더는 특정 확장자를 가진 파일을 모듈로 변환하는데 사용하지만, 플러그인은 번들을 최적화하거나 애셋을 관리하고, 환경 변수 주입 등과 같은 광범위한 작업을 수행할 수 있습니다. 플러그인을 사용하려면 코드 상단에서 require로 설치한 플러그인을 가져오고, 설정에 plugins 프로퍼티를 만들어 그 안에 인스턴스를 생성하면 됩니다.

다양한 플러그인이 있지만, 본 시리즈에서는 HtmlWebpackPlugin만 설치해서 적용합니다.

$ npm i -D html-webpack-plugin

이 플러그인은 번들 파일을 포함한 index.html 파일을 자동으로 생성해 줍니다. 우리는 번들링 파일의 이름을 bundle.js로 고정했지만, 해시값을 이용하는 경우 매번 달라질 수 있습니다. 이럴 때 이 플러그인을 사용하면 자동으로 번들 파일이 추가된 index.html을 생성해 주므로 매우 편리합니다.

// webpack.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './asset/js/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
  plugins: [new HTMLWebpackPlugin({ template: 'index.html' })],
};

template 옵션에는 번들된 파일을 주입할 html 파일의 이름을 지정하면 됩니다. 이처럼 플러그인을 추가하는 것 자체는 쉬운 편이지만, 각 플러그인마다 사용법이 다르기에 사용 전에 잘 살펴봐야 합니다. 그리고 웹팩 자체적으로도 설치하지 않고 사용 가능한 플러그인을 다수 보유하고 있으니 확인해 보셔도 좋습니다.

Bundling

프로젝트 수정하기

기본적인 설정은 끝났지만 번들링을 위해 이전 장에서 만들었던 파일들을 조금씩 수정해야 합니다.

index.html

<head>
  <!-- Styles 지우기 -->
  <link rel="stylesheet" href="asset/css/style.css" />
</head>
<body>
  <!-- Scripts 지우기 -->
  <script type="module" src="asset/js/main.js"></script>
</body>

main.js 파일에서 CSS를 모듈식으로 불러올 거고, HtmlWebpackPlugin 플러그인으로 번들 된 파일을 html 문서에 자동 주입할 것이기 때문에 두 부분은 지워주도록 합니다.

main.js

import { createSpinner, hideSpinner } from './loading.js';
import '../css/style.css';

...

function renderNews() {
  const newsList = document.querySelector('.news-list');

  createSpinner(newsList);

  setTimeout(() => {
  	// fetch url 변경
    fetch('../data/news.json')
      ...
  }, 2000);
}

...

상단에 CSS를 불러오는 부분을 추가하고, fetch API의 url을 Output 위치(dist)를 기준으로 변경해 주세요.

spinner.js

import spinnerSrc from '../img/spinner.gif';

export function createSpinner(parent) {
  const spinner = document.createElement('div');
  const img = document.createElement('img');

  spinner.className = 'spinner';
  img.className = 'spinner__img';
  img.src = spinnerSrc;

  spinner.append(img);
  parent.append(spinner);
}

...

상단에서 스피너 이미지를 불러오고, img 요소의 src 속성값으로 사용하도록 합니다.

package.json

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

빌드 시에는 보통 npm run 명령을 이용하기에, scripts 부분에 빌드 커맨드를 추가했습니다.

최종 결과

기존 코드들의 수정을 마치고 빌드 준비가 완료되었다면 터미널에서 다음 명령을 실행해 주세요.

$ npm run build

별다른 오류가 없다면 번들링이 올바르게 마무리되어 루트 안에 dist 디렉토리가 생겼을 것입니다. 그리고 이 안에는 번들링 된 자바스크립트 파일(bundle.js)과 이 파일이 주입된 HTML 문서(index.html)가 있을 것입니다. HTML 문서를 한 번 열어 보시고, 다음 결과와 동일한 지 확인해 주세요.

첨부된 사진과 결과가 동일하다면 올바르게 진행한 것입니다. 여기까지가 웹팩을 적용해보는 과정이었는데 어떠셨나요? 많이 복잡했나요? 그렇게 느끼는 게 처음에는 당연한 거예요 ㅠㅠ. 지금은 익숙하지 않더라도 진행하는 프로젝트에 웹팩을 적용해 보고 하면서 조금씩 친해진다면, 이후에는 필요한 설정을 금방 적용할 수 있을 겁니다!

그리고 본문에서는 빌드를 마치고 나서 결과를 확인했지만, 웹팩 개발 서버를 구성하면 코드를 수정하는 즉시 번들링 된 결과를 실시간으로 확인 가능합니다. 여기서 소개하지는 않지만 웹팩 공식 홈페이지에서 자세하게 설명하고 있으니 꼭 확인해 보시기 바랍니다. 그럼 다음 시리즈인 바벨 적용하기에서 만나도록 해요 😊

웹팩이 적용된 쿠키 뉴스 프로젝트는 Git 저장소에서 확인 가능합니다 ❤️

Series

 

저작자표시 비영리 동일조건

'🌈 기술스택 > Web Basic' 카테고리의 다른 글

쿠키런 소식 페이지 만들기 - [4] Scss 적용하기  (0) 2022.01.19
쿠키런 소식 페이지 만들기 - [3] 바벨 적용하기  (0) 2022.01.19
쿠키런 소식 페이지 만들기 - [1] 화면 만들기  (0) 2022.01.18
웹 접근성과 표준의 중요성  (0) 2021.10.22
Flex 대신 Grid를 사용해 레이아웃 만들기  (0) 2021.10.21

티스토리툴바