코린이[코딩 어린이]

v-text디렉티브나 수염표기법(Mustache syntax)으로 나타내는 값은 모두 일반 텍스트로 출력이 된다.

이는 HTML엘리먼트의 textContent를 업데이트하기 때문이다. 이는 결국 HTML을 작성한 문자열을 변수의 값으로 대입하더라도 HTML태그를 가지고 있는 문자열 그대로 렌더링이 된다.

반면 v-html디렉티브는 HTML엘리먼트의 innerHTML값에 변수값을 전달하기 때문에 문자열이 HTML마크업 언어로 표현되도록 한다. innerHTML에 바로 값을 집어 넣기 때문에 변수는 반드시 HTML평문이어야 하며, Vue의 문법을 사용해도 컴파일이 되지 않는다.

수염표기법 / v-text디렉티브

<div v-text="msg"></div> <!-- 안녕하세요 -->
<div v-pre>{{msg}}</div> <!-- 안녕하세요 -->

setup() {
    const msg = "안녕하세요"
    return {
        msg
    }
},

v-pre디렉티브를 이용한 컴파일 무시

<div v-pre>{{msg}}</div> <!-- {{msg}} -->

변수는 선언하고 값을 넣으면 자동으로 DOM에 업데이트가 된다. Options API를 사용하기 위해서는 단순히 data옵션에 변수를 선언하면 되며, 컴포지션 API와 함께 이용하기 위해서는 setup함수를 생성하고 그 안에 일반적인 자바스크립트 변수를 선언하듯이 선언하면 된다. 선언된 변수는 템플릿의 변수와 결합될 수 있도록 반드시 객체 형식으로 반환돼야 한다.

template

<template>
    <div>
        <div id="date">
            {{date}}
        </div>
        <div id="date2">
            {{date2}}
        </div>
    </div>
</template>

script

export default {
    setup() {
        const date = Date().toString()
        return {
            date
        }
    },
    data() {
        return {
            date2: Date().toString()
        }
    }
}

setup함수 내에서 변수를 선언하고 반환하는 방법과 기존과 동일한 방식의 Options API를 이용해 변수를 선언하고 반환하는 방법을 보여준다.

setup함수에서는 date라는 함수를 선언하고 자바스크립트의 Date클래스의 toString메서드를 이용해 현재 날짜와 시간을 얻어온다.

같은 값을 얻어오지만 Options API는 data라는 별도의 옵션 함수를 이용해 date2에 날짜와 시간을 대입하는 것을 알 수 있다.

Vue2까지는 Option API만 제공을 했으며, 컴포넌트를 생성할 때 옵션 속성이라 불리는 data, methods, computed등과 같은 것들을 정의해야 했다. 이는 코드가 길어지면 가독성을 낮추는 문제점이 있었기에 다른 컴포지션 프레임워크들과 같이 컴포지션 API를 지원하고자 setup함수를 제공하게 됐다.

setup함수의 구조

setup() {
    const data = 1
    return { data }
}

이전 Options API에서 사용하던 computed, watch옵션은 모두 setup함수에서도 구현이 가능하다.

기존 methods옵션으로 제공하던 함수의 경우 다음과 같이 변수로 할당하여 반환하면 된다.

const foo = () => { data = 2 }
return { foo }

Alias

초창기 Vite는 Alias를 지원하지 않아 서드파티 라이브러리를 사용하곤 했다. 하지만 2020년 5월 Vite는 공식적으로 Alias를 지원하게 되었다. Alias를 이용하면 대규모 프로젝트를 진행할 때 각 파일의 경로를 모두 적어줘야 하는 불편함을 해소해준다.

Alias를 구성하기 전에 경로를 생성할 때 도움을 줄 수 있는 path라이브러리를 설치해준다.

NPM [ path 설치 ]

$ npm install path

Alias를 설치하면 컴포넌트를 불러올때 /src/components/component.vue와 같이 할 필요없이 @components/component.vue라고 할 수 있다.

vite.config.js

import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@app_modules': path.resolve(__dirname, './src/modules'),
      '@store': path.resolve(__dirname, './src/store')
    }
  },
  plugins: [vue()]
})

이제 import를 할 때 '../../assets/style ...'을 할 필요없이 '@/assets/style ...'로 사용할 수 있게 되었다.

컴포넌트로 진입할 때는 '../../components/component.vue'를 할 필요없이 @components/component.vue로 깔끔하게 입력할 수 있게 되었다.

Vite 바로가기

SASS ADD

$ npm add -D sass

.scss 파일 생성하기

main.js [ 전역 설정 ]

import './assets/styles/reset.scss'

전역으로 설정하려면 main.js에 내가 생성한 .scss파일을 한줄 추가해준다.

.vue [ 직접 추가하기 ]

<style lang="scss" scoped>
@import "../../assets/styles/main/header.scss";
    
</style>

scoped로 처리해주지 않으면 전역에 적용되기 때문에 적용시켜주어야 한다.

ES모듈을 하나의 번들로 컴파일하는 작업을 진행하기 위해서 다음 명령어를 입력한다.

$ npm run build

Vite는 기본적으로 Rollup을 이용하여 번들을 생성한다. 별다른 설정이 없다면 dist폴더가 생성되고 그 아래에 번들화된 js, html, css, asset파일들이 생성된다.

Vite의 개발서버는 웹 애플리케이션을 개발하는 과정에서 매우 유리하지만 실제 서버 환경에 애플리케이션을 배포하기 위해서는 번들을 생성하여 그 크기를 줄이고 자바스크립트의 코드를 최소화하는 것이 네트워크 속도나 보안 면에서 좋다.

Vue3 Vite란 ?

Vite는 에반 유가 Vue3로 개발을 함에 있어 별다른 번들 생성 없이 ES Module을 바로 웹 브라우저에 렌더링 할 수 있도록 만든 개발 툴로서 매우 빠른 HMR(Hot Module Replacement)을 제공한다. 번들을 생성하는 과정이 필요 없어 서버의 시작속도가 매우 빠르며, 개발자 역시 번들없이 모듈화된 컴포넌트의 수정사항을 브라우저로 볼 수 있다.

Vite는 Vue3를 주요 프레임워크로 지정하고 개발된 만큼 Vue프로젝트와 완벽한 호환성을 자랑한다. 특히 ECMAScript6를 따르는 Vue3의 모듈이 별다른 컴파일 과정 없이 브라우저에 렌더링 될 수 있게 해주는 기능은 Vue를 이용한 개발을 매우 쉽게 해준다.

프로젝트 생성하기

$ npm init @vitejs/app project-name

생성이 완료되면 폴더가 생성되고 Vue로 프로젝트를 진행할 때 필요한 필수 요소들이 생성된다.

package.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "vite": "^2.9.9"
  }
}

이제 package.json이 들어 있는 프로젝트 폴더에서 npm명령어를 수행하여 필요한 의존 패키지를 설치한다.

$ npm install

node_modules폴더가 생기며 많은 패키지들이 설치된다.

실행하기

$ npm run dev

npm run dev를 수행하면 package.json 내 script속성에 명시된 vite가 npx를 통해서 실행이 된다.

점수에 따라 클래스 변경하기 [ 조건을 여러개 넣을 때 ]

// 현재 넣어둔 조건
const newItems = [
    {
        score: 8.3
    }
]

<span class="icon" :class="[ { star0: data.newItems[0].score === 0 }, { star2: data.newItems[0].score > 0 && data.newItems[0].score < 2 }, { star1: data.newItems[0].score >= 2 } ]"></span>
<span class="icon" :class="[ { star0: data.newItems[0].score <= 2 }, { star2: data.newItems[0].score > 2 && data.newItems[0].score < 4 }, { star1: data.newItems[0].score >= 4 } ]"></span>
<span class="icon" :class="[ { star0: data.newItems[0].score <= 4 }, { star2: data.newItems[0].score > 4 && data.newItems[0].score < 6 }, { star1: data.newItems[0].score >= 6 } ]"></span>
<span class="icon" :class="[ { star0: data.newItems[0].score <= 6 }, { star2: data.newItems[0].score > 6 && data.newItems[0].score < 8 }, { star1: data.newItems[0].score >= 8 } ]"></span>
<span class="icon" :class="[ { star0: data.newItems[0].score <= 8 }, { star2: data.newItems[0].score > 8 && data.newItems[0].score < 10 }, { star1: data.newItems[0].score >= 10 } ]"></span>

스코어가 0점이면 'star0'삽입, 0보다 크고 2보다 작으면 'star2'삽입, 2와 같거나 2보다 크면 'star1'삽입

...

:: 조건이 3개 이상 들어가야 하는 부분에서 사용

클래스 바인딩 기본기

data: {
    isActive: true,
    noActive: false
}

<div :class="{active: isActive, 'active-a': noActive}"></div>

-가 있을때는 ' '를 붙여준다. =>

<div class="active"></div>

객체 사용

data: {
    classObject {
        isActive: true,
        noActive: false
    }
}

<div :class="classObject"></div>

결과는 위와 같다.

객체를 반환하는 계산된 속성에 바인딩

data: {
    isActive: true,
    error: null
},
computed: {
    classObject: function() {
    	return {
            active: this.isActive && !this.error,
            'text-danger': this.error && this.error.type === 'fatal'
        }
    }
}

<div :class="classObject"></div>

이 결과도 위와 같다.

배열구문

data: {
    classActive: 'active',
    classError: 'text-danger'
}

<div :class="[classActive, classError]"></div>

=>

<div class="active text-danger"></div>

3항 연산자

<div :class="[isActive ? classActive : '', classError]"></div>

classError부분은 항상 적용시키고, isActive가 true일 때 classActive를 false일 때 ' '를 적용한다.

JS 파일 [ 원하는 위치에 JS파일 추가하기 ]

const bgImage = [
  {
    image: require("~/assets/imgs/bg01.jpg"),
    alt: '백그라운드 이미지'
  },
  {
    image: require("~/assets/imgs/new01.jpg"),
    alt: '새로운 이미지'
  }
]

// 만든 배열 내보내기
module.exports = {
  bgImage: bgImage,
}

.vue

<!-- 백그라운드 이미지 추가하기 -->
<div class="new_left" :title="data.bgImage[1].alt" :style="{ backgroundImage: 'url(' + data.bgImage[1].image + ')' }"></div>

// 만든 js파일 불러오기
import fakeData from '@/assets/js/fakeData';

export default {
  data() {
    return {
      data: fakeData
    }
  }
}

뷰 스와이프 슬라이드 바로가기

$ npm install

// swiper 상위버전 오류
$ npm install swiper@5.4.5
// 같이 버전 내려줌
$ npm install vue-awesome-swiper@4.1.1

vue-swiper.js [ JS파일 생성하기 ( Error날 경우 : 노드모듈 파일 위치 확인하기 ) ]

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/css/swiper.css';


Vue.use(VueAwesomeSwiper)

nuxt.config.js [ plugins: [ 여기에 추가하기 ] ( 생성한 JS파일 위치 추가하기 ) ]

{ src: '~/plugins/vue-swiper.js', ssr: false }

.vue

HTML 부분

<template>
  <div v-swiper:mySwiper="swiperOption" class="swiper-container">
    <div class="swiper-wrapper">
      <div v-for="(item, index) of items2" :key="'b' + index" class="swiper-slide">
        <div>
          <div class="card_wrap">
            <figure>
              <img :src="item.image" :srcset="item.srcset + ' 2x'" :alt="item.alt" />
            </figure>
            <div class="card_rank"><strong>{{index + 1}}</strong></div>
            <div class="card_mx">
              <span class="icon sp_m ir_pm">MX</span>
              <span class="icon sp_b ir_pm">Boutique</span>
            </div>
          </div>
          <div class="card_information">
            <h3><span class="icon sp_all ir_pm">전체관람가</span> <strong>{{item.alt}}</strong></h3>
            <div class="card_information_btn">
              <NuxtLink to="/">상세정보</NuxtLink>
              <NuxtLink to="/">예매하기</NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
</div>
</template>

Script 부분

<script>
export default {
  data() {
    return {
      items2: [
        {
          image: require("~/assets/imgs/poster05.jpg"),
          srcset: require("~/assets/imgs/poster05@2.jpg"),
          alt: "침묵"
        },
        {
          image: require("~/assets/imgs/poster06.jpg"),
          srcset: require("~/assets/imgs/poster06@2.jpg"),
          alt: "신세계"
        },
        {
          image: require("~/assets/imgs/poster07.jpg"),
          srcset: require("~/assets/imgs/poster07@2.jpg"),
          alt: "마스터"
        },
        {
          image: require("~/assets/imgs/poster08.jpg"),
          srcset: require("~/assets/imgs/poster08@2.jpg"),
          alt: "마약왕"
        },
        {
          image: require("~/assets/imgs/poster08.jpg"),
          srcset: require("~/assets/imgs/poster08@2.jpg"),
          alt: "마약왕"
        },
        {
          image: require("~/assets/imgs/poster08.jpg"),
          srcset: require("~/assets/imgs/poster08@2.jpg"),
          alt: "마약왕"
        },
        {
          image: require("~/assets/imgs/poster08.jpg"),
          srcset: require("~/assets/imgs/poster08@2.jpg"),
          alt: "마약왕"
        }
      ],
      slides: '',
      swiperOption: {
        // breakpoints 사용하지 않을때
        // slidesPerView: 4,
        // spaceBetween: 16,
        loop: false,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        mousewheel: {
          invert: true
        },

        // 반응형
        breakpoints: {
          320: {
            slidesPerView: 1.4
          },
          600: {
            slidesPerView: 1.4,
            spaceBetween: 24
          },
          768: {
            slidesPerView: 2,
            spaceBetween: 24
          },
          960: {
            slidesPerView: 3,
            spaceBetween: 24
          },
          1240: {
            slidesPerView: 4,
            spaceBetween: 16
          }
        }
      }
    }
  }
}
</script>

스와이프 상위 버전들로 했을때 작동하지 않는 부분들이 있음.