NUXT JS 에서 부트스트랩 사용하기

부트스트랩이란?
부트스트랩은 오픈소스 CSS라이브러리로 반응형(responsive) 모바일 페이지를 우선시 하고 있다. 전세계에서 가장 많이 사용 되는 CSS라이브러리중 하나라고 한다.

Nuxt프로젝트에 Bootstrap세팅과정
yarn create nuxt-app <프로젝트명> 커맨드를 사용해서 새 프로젝트를 생성하고 등장하는 여러 질문에서 UI프레임 워크를 Bootstrap Vue를 선택한다.

넉스트 프로젝트에 부트스트랩 추가 방법은 아래 가이드를 참조 했다.
(처음부터 프로젝트를 만드는 것이 아닌, 기존 프로젝트에 부트스트랩을 적용 하고 싶다면 아래 커맨드를 이용 하면 된다.)
https://bootstrap-vue.org/docs

프로젝트가 잘 생성 되었다면
yarn dev커맨드를 이용 해서 서버를 실행한다.

비주얼스튜디오(code .커맨드)를 이용 해서 비주얼 스튜디오로 해당 프로젝트를 연다.

pages/index.vue파일을 아래와 같이 작성 해준다.

<template>
  <div>
    <div class="row">
      <div class="col-md-6 mt-5 mx-auto">
        <form v-on:submit.prevent="login" action="">
          <h2 class="h3 mb-3 font-weight-normal">로그인하기</h2>
          <div class="form-group">
            <label for="email">이메일주소</label>
            <input type="email" v-model="email" class="form-control" placeholder="이메일주소" />
          </div>
          <div class="form-group">
            <label for="password">암호</label>
            <input type="password" v-model="password" class="form-control" placeholder="암호" />
          </div>
          <button class="btn btn-lg btn-primary btn-block" type="submit">로그인하기</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data:() => ({
    email: '',
    password: '',
  })
}
</script>

부트스트랩CSS설명
row : (_grid-framework.scss) 테이블의 <tr>과 같은 역할을 한다.

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

col-md-6 : 부트스트랩 그리드 시스템의 핵심인데, col은 테이블의 <td>와 같은 역할을 하며 col-화면사이즈-가로크기 형식으로 나타낼 수 있다. 가로크기는 좌우 폭을 12로 잡으며 1을 지정 한다면 1/12 크기가 된다. 미지정시 col 갯수만큼 자동지정 되며 화면사이즈를 xs(=미지정), sm, md, lg 로 모바일과 데스크탑 등 기기 화면 크기에 맞추어서 지정 사이즈를 변경 할 수 있다. 여기서는 md-6을 지정 하였으므로 xs는 12가 default로 지정 된다. (=col-12)

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

모바일 사이즈 일때는 12/12로 좌우에 꽉 찬다.

브라우저의 좌우폭을 md(768px~992px) 까지 늘리자 6/12 이 적용 되어서 버튼 크기가 좌우폭의 절반을 차지 하는 것을 확인 할 수 있다.

이에 대해서 더 자세히 알고 싶다면 부트스트랩 홈페이지를 정독하자.

mt-5 : 마진 탑 (margin-top) 을 1~5 중 5를 준다.

.mt-5, .my-5 {
    margin-top: 3rem !important;
}

mx-auto : (_spacing.scss) 마진 left, right를 auto로 준다.

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

mb-3 : 마진 바텀 (margin-bottom) 을 1~5중 3을 준다.

h3, .h3 {
    font-size: 1.75rem;
}

font-weight-normal : 폰트 굵기를 보통으로 지정 한다.

.font-weight-normal {
    font-weight: 400 !important;
}

form-group : 폼 그룹의 여백을 지정 한다.

.form-group {
    margin-bottom: 1rem;
}

form-control : 폼 컨트롤 (input)의 모양을 정의 한다.

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

btn : 버튼의 커서 모양 지정

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

btn-lg : 버튼 크기를 지정 한다.

.btn-lg, .btn-group-lg > .btn {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

btn-primary : 프라이머리(파란색) 버튼 색깔을 지정 한다.

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

btn-block : 좌우로 꽉 차는 버튼을 만든다.

.btn-block {
    display: block;
    width: 100%;
}

결과확인
웹브라우저를 열고 http://localhost:3000/ 확인시 아래와같이 이쁘게 반응형 웹페이지가 작성 된 것을 알 수 있다.

이렇게 즉시 부트스트랩 CSS가 사용 가능한 이유는 NUXT프로젝트 초기 생성시에 부트스트랩을 골랐기 때문이고 필요한 기본 세팅이 이미 되어 있다. 기존 Vue.js에서 부트스트랩을 추가 하기 위해서 이것저것 귀찮은 작업을 해줘야 하는 것과는 상반된다. (아래와 같이 nuxt.config.js파일에 이미 부트스트랩 모듈이 포함 되어 있는 것을 확인 할 수 있다.)

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'testapp',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

여기서 'bootstrap-vue/nuxt' 항목을 제거시 CSS가 빠지고 아래와 같이 뼈대만 남는 것을 알 수 있다.

이로써 오늘의 포스팅에서는 넉스트 프레임워크에서 부트스트랩을 적용 하는 방법을 알아 보았다.
기회가 된다면 부트 스트랩 하나만 자세히 다루어 보도록 하겠다.