[Bootstrap] 프로젝트 설정하기

https://getbootstrap.com/

📝 npm으로 Bootstrap 프로젝트 생성하기

1. 디렉토리 생성 후 npm project 지정

$ npm init -y
$ npm i -D parcel-bundler

parcel-bundler는 개발시에만 사용하기 때문에 '-D'를 붙여 개발의존성으로 설치한다.

설치완료 후 생성된 package.json 파일을 열어서 "scripts" 부분에 dev, build 명령을 추가한다.

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }

2. bootstrap 설치

$ npm i bpptstrap@5.2.1

bootstrap은 브라우저에서 동작해야하므로 '-D'을 생략하여 일반의존성으로 설치한다.

3. scss 파일 설정

@import "../node_modules/bootstrap/scss/bootstrap";

기본 제공 스타일을 연결한다.

4. js 파일 설정

import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

기본 제공 js파일을 연결한다.

5. scss와 js 파일에서 필요한 기능만 추가하기

// scss
@import "../node_modules/bootstrap/scss/mixins";

// js
import Modal from 'bootstrap/js/dist/modal' // js의 경우 node_modules 폴더를 거치지 않고 바로 접근 가능

new Modal(document.querySelector('#exampleModal'), option)

js의 경우 기능별로 초기화가 필요한 경우가 있다.