Bootstrap과 Vite

Bootstrap과 Vite (Bootstrap and Vite)

Vite 빌드 도구로 Bootstrap 프로젝트를 처음부터 구성하고 실행하는 방법을 단계별로 안내하는 가이드예요.

출처: 문서

본문

바로 결과를 보고 싶으신가요? 이 가이드의 소스 코드와 동작 데모를 twbs/examples 저장소에서 다운로드할 수 있어요. StackBlitz에서 예시를 열어 실시간 편집을 해 볼 수도 있어요.

Vite란? (What is Vite?)

Vite는 속도와 단순함을 위해 설계된 현대적인 프런트엔드 빌드 도구예요. 특히 현대적인 JavaScript 프레임워크를 위한 효율적이고 간결한 개발 경험을 제공해요.

설정 (Setup)

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

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

이제 필요한 의존성이 모두 설치·설정됐으니, 프로젝트 파일을 만들고 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 vite.config.js

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

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

이 시점에서 모든 게 올바른 위치에 있지만, 아직 vite.config.js를 채우지 않았기 때문에 Vite는 동작하지 않을 거예요.

Vite 구성 (Configure Vite)

의존성이 설치되고 프로젝트 폴더가 코딩을 시작할 준비가 됐으니, 이제 Vite를 구성하고 프로젝트를 로컬에서 실행할 수 있어요.

  1. 편집기에서 vite.config.js를 열어요. 비어 있으므로 서버를 시작하려면 약간의 기본 구성(boilerplate)을 추가해야 해요. 이 구성 부분은 프로젝트의 JavaScript를 어디서 찾을지, 개발 서버가 어떻게 동작해야 하는지(src 폴더에서 가져오고 핫 리로드를 쓰는)를 Vite에 알려 줘요.
import { resolve } from 'path'

export default {
  root: resolve(__dirname, 'src'),
  build: {
    outDir: '../dist'
  },
  server: {
    port: 8080
  },
  // Optional: Silence Sass deprecation warnings. See note below.
  css: {
     preprocessorOptions: {
        scss: {
          silenceDeprecations: [
            'import',
            'mixed-decls',
            'color-functions',
            'global-builtin',
          ],
        },
     },
  },
}

참고: 최신 버전의 Dart Sass로 소스 Sass 파일을 컴파일하면 Sass 사용 중단 경고가 표시돼요. 이는 Bootstrap의 컴파일이나 사용을 막지 않아요. 우리는 장기적인 해결책을 준비 중이지만, 그동안 이 사용 중단 공지는 무시해도 돼요.

  1. 다음으로 src/index.html을 채워요. 이 HTML 페이지는 Vite가 브라우저에서 로드해서, 이후 단계에서 추가할 번들된 CSS와 JS를 활용할 페이지예요.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
    <script type="module" src="./js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>

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

  1. 이제 Vite를 실행할 npm 스크립트가 필요해요. package.json을 열고 아래에 보이는 start 스크립트를 추가해요(테스트 스크립트는 이미 있을 거예요). 이 스크립트로 로컬 Vite 개발 서버를 시작할 거예요.
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
  1. 마지막으로 Vite를 시작해요. 터미널에서 my-project 폴더에 들어가서 방금 추가한 npm 스크립트를 실행해요.
npm start

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

Bootstrap import (Import Bootstrap)

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

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

  1. 다음으로 CSS를 로드하고 Bootstrap의 JavaScript를 import해요. CSS를 로드하고 Bootstrap의 모든 JS를 import하려면 src/js/main.js에 다음을 추가해요. Popper는 Bootstrap을 통해 자동으로 import돼요.
// Import our custom CSS
import '../scss/styles.scss'

// 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해서 빌드를 최적화하는 방법은 전체 Vite 예시 프로젝트를 꼭 확인해 보세요.

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

더 알아보기 (Learn more)