Bootstrap과 Parcel

Bootstrap과 Parcel (Bootstrap and Parcel)

Parcel 번들러를 사용해서 Bootstrap 프로젝트를 처음부터 구성하고 실행하는 방법을 단계별로 안내하는 가이드예요.

출처: 문서

본문

바로 결과를 보고 싶으신가요? 이 가이드의 소스 코드와 동작 데모를 twbs/examples 저장소에서 다운로드할 수 있어요. StackBlitz에서 예시를 열어 볼 수도 있지만, Parcel이 현재 그곳에서 지원되지 않아 실행은 할 수 없어요.

Parcel이란? (What is Parcel?)

Parcel은 별도 설정 없이 바로 사용할 수 있는(zero-configuration) 세팅으로 개발 과정을 단순화하도록 설계된 웹 애플리케이션 번들러예요. 더 고급 번들러에서 볼 수 있는 기능을 제공하면서도 사용 편의성에 초점을 맞춰, 빠른 시작을 원하는 개발자에게 이상적이에요.

설정 (Setup)

Bootstrap으로 Parcel 프로젝트를 처음부터 만들 거라서, 실제로 시작하기 전에 몇 가지 사전 준비와 초기 단계가 필요해요. 이 가이드는 Node.js가 설치되어 있고 터미널에 어느 정도 익숙하다는 것을 전제로 해요.

  1. 프로젝트 폴더를 만들고 npm을 설정해요. my-project 폴더를 만들고, 대화형 질문을 피하기 위해 -y 인자로 npm을 초기화할게요.
mkdir my-project && cd my-project
npm init -y
  1. Parcel을 설치해요. Webpack 가이드와 달리 여기에는 빌드 도구 의존성이 하나만 있어요. Parcel은 언어 트랜스포머(예: Sass)를 감지하면 자동으로 설치해요. 이 의존성이 개발용으로만 쓰이고 프로덕션용이 아니라는 것을 표시하기 위해 --save-dev를 사용해요.
npm i --save-dev parcel
  1. Bootstrap을 설치해요. 이제 Bootstrap을 설치할 수 있어요. 드롭다운, 팝오버, 툴팁이 위치 계산에 의존하기 때문에 Popper도 함께 설치할게요. 그런 컴포넌트를 사용할 계획이 없다면 여기서 Popper는 생략해도 돼요.
npm i --save bootstrap @popperjs/core

이제 필요한 의존성이 모두 설치됐으니, 프로젝트 파일을 만들고 Bootstrap을 import하는 작업을 시작할 수 있어요.

프로젝트 구조 (Project structure)

이미 my-project 폴더를 만들고 npm을 초기화했어요. 이제 src 폴더와 스타일시트, JavaScript 파일도 만들어서 프로젝트 구조를 완성할게요. my-project에서 다음을 실행하거나, 아래에 보이는 폴더와 파일 구조를 직접 만들어도 돼요.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

완료되면 전체 프로젝트가 이렇게 보일 거예요.

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

이 시점에서 모든 게 올바른 위치에 있지만, Parcel이 서버를 시작하려면 HTML 페이지와 npm 스크립트가 필요해요.

Parcel 구성 (Configure Parcel)

의존성이 설치되고 프로젝트 폴더가 코딩을 시작할 준비가 됐으니, 이제 Parcel을 구성하고 프로젝트를 로컬에서 실행할 수 있어요. Parcel 자체는 설계상 구성 파일이 필요 없지만, 서버를 시작하려면 npm 스크립트와 HTML 파일이 필요해요.

  1. src/index.html 파일을 채워요. Parcel이 렌더링할 페이지가 필요하므로, index.html 페이지로 CSS와 JavaScript 파일을 포함한 기본 HTML을 구성해요.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>

여기 div class="container"와 <button>으로 Bootstrap 스타일을 조금 넣어서, Parcel이 Bootstrap CSS를 로드했는지 확인할 수 있게 했어요.

Parcel이 Sass를 사용 중임을 자동으로 감지해서 이를 지원하는 Sass Parcel 플러그인을 설치해요. 하지만 원한다면 npm i --save-dev @parcel/transformer-sass로 직접 실행할 수도 있어요.

  1. Parcel npm 스크립트를 추가해요. package.json을 열고 scripts 객체에 다음 start 스크립트를 추가해요. 이 스크립트로 Parcel 개발 서버를 시작하고, dist 디렉터리에 컴파일된 뒤 우리가 만든 HTML 파일을 렌더링할 거예요.
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
  1. 마지막으로 Parcel을 시작해요. 터미널에서 my-project 폴더에 들어가서 방금 추가한 npm 스크립트를 실행해요.
npm start

이 가이드의 다음이자 마지막 섹션에서는 Bootstrap의 모든 CSS와 JavaScript를 import할 거예요.

Bootstrap import (Import Bootstrap)

Parcel에 Bootstrap을 import하려면 두 번의 import가 필요해요. 하나는 styles.scss에, 다른 하나는 main.js에 해요.

  1. Bootstrap의 CSS를 import해요. Bootstrap 소스 Sass 전체를 import하려면 src/scss/styles.scss에 다음을 추가해요.
// Import all of Bootstrap's CSS
@import "bootstrap/scss/bootstrap";

원한다면 스타일시트를 개별로 import할 수도 있어요. 자세한 내용은 Sass import 문서를 참고하세요.

선택사항: 최신 버전의 Dart Sass에서는 Sass 사용 중단 경고(deprecation warning)가 보일 수 있어요. 루트 폴더에 .sassrc.js 파일을 만들어 다음 구성을 추가하면 조용히 시킬 수 있어요.

module.exports = {
  silenceDeprecations: ['import', 'mixed-decls', 'color-functions', 'global-builtin']
}
  1. Bootstrap의 JS를 import해요. Bootstrap의 모든 JS를 import하려면 src/js/main.js에 다음을 추가해요. Popper는 Bootstrap을 통해 자동으로 import돼요.
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

필요에 따라 JavaScript 플러그인을 개별로 import해서 번들 크기를 줄일 수도 있어요.

import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'

Bootstrap 플러그인을 사용하는 방법에 대한 자세한 내용은 JavaScript 문서를 참고하세요.

  1. 끝났어요! 🎉 Bootstrap 소스 Sass와 JS가 모두 로드되면 로컬 개발 서버가 이렇게 보일 거예요.

이제 사용하고 싶은 Bootstrap 컴포넌트를 마음대로 추가하면 돼요. 추가 커스텀 Sass를 포함하고, 필요한 Bootstrap CSS·JS 일부만 import해서 빌드를 최적화하는 방법은 전체 Parcel 예시 프로젝트를 꼭 확인해 보세요.

여기 잘못됐거나 오래된 내용이 보인다면 GitHub에 이슈를 열어 주세요. 문제 해결이 필요하다면 GitHub에서 검색하거나 토론을 시작하세요.

더 알아보기 (Learn more)