Portfolio

목차 1. [Day34] Vue 문서 읽어보기 1. Vue 시작하기 1-1. Vue란 1-2 Vue 설치하기 1-3. v-”key” (디렉티브)1-4. components 옵션 2. 애플리케이션과 인스턴스 생성 2-1. 애플리케이션 API (creatApp, mount) - 링크 2-2. 인스턴스 API - 링크 3. 라이프사이클 3-1. 라이프사이클 다이어그램 3-1. 라이프사이클 훅 4.탬플릿 문법 4-1. 보간법(interpolation)4-2. 디렉티브 4-3. 약어 5. Data와 Method (필기필요)5-1. Data 속성 5-2. Method 속성

1. [Day34] Vue 문서 읽어보기

1. Vue 시작하기

1-1. Vue란

The Progressive JavaScript Framework

주의 Vue는 2version에서 3version으로 넘어가는 과도기에 있다.

뷰(View) 레이어만 초점을 맞추어, 다른 라이브러리, 프로젝트와의 통합이 쉽다

선언적 렌더링 & 반응형

이중 중괄호 구문 - {{}}으로 데이터를 선언적으로 렌더링
데이터와 DOM이 {{}} 를 통해 연결되었다면, 이는 반응형(reactive) || 반응성을 가졌다고 한다.
data가 바뀌면 화면도 바뀐다.

counter를 증감시키면, 자동으로 DOM의 변경된 counter가 렌더된다.

1-2 Vue 설치하기

CDN 방식 설치

html head 부분에 script tag 추가

코드

<script src="https://unpkg.com/vue@next"></script>

기본 사용법

Vue.createApp({options}).mounted(”#app”)

options를 가진 Vue App을 만들고, #app에 해당하는 html에 마운트 하기

Counter 예시 코드


<div id="app">{{counter}}</div>
    <script>
      const App = {
        data() {
          return {
            counter: 0,
          };
        },
        mounted() {
          setInterval(() => {
            this.counter += 1;
          }, 1000);
        },
      };

      Vue.createApp(App).mount("#app");
    </script>

1-3. `v-”key”` (디렉티브)

Vue에서 특정 element에 vue 문법을 적용하기 위해 사용하는 문법

v-bind

해당 element의 속성에 vue에서 지정한 data를 부여하기 위해 사용하는 디렉티브

일반적인 사용형태 : v-bind:속성명:”data 이름”

v-bind:title=”message”

해당 element의 title 속성에 vue의 데이터 중 message 값을 바인딩한다.

v-bind:fruit-name=”name”

해당 element의 fruit-name 속성에 vue의 데이터중 name의 값을 바인딩한다

v-bind:class

일반적인 class 지정과 함께 쓰일 수 있으며, v-bind: class=”{클래스명 : data 속성}” 로 해당 element에 class를 부여
해당 element는 data 속성에 따라 해당 클래스를 부여 받게 된다.
ex) isActive가 true일 때에만, 해당 element는 orange 클래스를 갖는다. <div v-bind:class="{ orange: isActive }">

Counter 코드 예시


<div id="app">
      <div v-bind:class="{orange: active}">{{counter}}</div>
    </div>
    <style>
      .orange {
        color: orange;
      }
    </style>
    <script>
      const App = {
        data() {
          return {
            counter: 0,
            active: true,
          };
        },
      };

      const app = Vue.createApp(App).mount("#app");
    </script>

v-on

‘사용자 입력 핸들링’으로 Vue의 Methods 옵션에 있는 함수들을 이벤트핸들러로 바인딩

Vue의 methods 속성

Vue의 App 옵션 객체에 사용할 수 있는 속성으로, 필요한 함수들을 정의하는 객체
주의 -s 가 붙는 복수형임
methods안에 필요한 함수들을 생성한다.

methods : { increase(){ doSomething.. } }

v-on:이벤트명 = 이벤트핸들러함수명 을 통한 이벤트핸들러 등록

<button v-on:click=”increase”></button>

v-if

조건문: data속성에 따라 출력 여부를 결정하는 디렉티브

<div v-if=”active”> Hello Vue! </div>

active속성이 true인 경우에만 해당 element를 렌더링

v-for

반복문: for에서와 같이 반복문을 사용하도록 하는 디렉티브

<li v-for=”fruit in fruits">{{ fruit }} </li>

fruits 예시코드


// html
<ul>
  <li v-for="fruit in fruits">
    {{fruit}}
  </li>
</ul>

// js
data(){ return fruits: ['Apple','Banana','Cherry']}

1-4. components 옵션

components

Vue의 옵션 중 하나로 컴포넌트를 만들어, html에서 하나의 태그로 사용가능하도록 하는 옵션 반복사용 및 캡슐화를 위해 사용

component만들기

template으로 html 구조 생성
props로 template에 넘겨줄 data를 배열형태로 정의

html에서 component 사용하기

정의된 컴포넌트는 html의 tag를 사용하듯이 사용
tag의 속성 역시 넘겨줄 수 있다.
주의 js에서는 camelCase, KebapCase로 작성하더라도 Vue엔진이 내부적으로 snake-case로 변환하기 때문에 html에서는 tag와 속성 모두 snake-case로 사용해야함

FruitItem ⇒ <fruit-item />, props:[”fruitName”] ⇒ <fruit-item fruit-name=”” / >

FruitItem 컴포넌트 예시코드


// at .js
const FruitItem = {
	template : `<li> {{ fruitName }} </li>`
	props: ["fruitName"]
}

const App = {
	components : { 
		FruitItem
	},
	...,
}

// at html
<fruit-item fruit-name="Orange"></fruit-item>

반복문과 함께 사용한 Fruits 예시 코드


//at html
		<div id="app">
      <ul>
        <fruit-item 
					v-for="name in fruits"
					v-bind:fruit-name="name"></fruit-item>
      </ul>
    </div>

//at js
  <script>
      const FruitItem = {
        template: `<li>{{ fruitName }}</li>`,
        props: ["fruitName"],
      };

      const App = {
        components: {
          FruitItem,
        },
        data() {
          return {
            fruits: ["Apple", "Banana", "Cherry"],
          };
        },
        methods: {},
      };

      const app = Vue.createApp(App).mount("#app");
    </script>

2. 애플리케이션과 인스턴스 생성

2-1. 애플리케이션 API (`creatApp`, `mount`) - 링크

createApp({ ...options })

data, methods, componets 와 같은 옵션들을 포함한 객체를 기반으로 Vue 애플리케이션을 생성

mount(selector)

생성한 Vue 애플리케이션을 html의 특정 선택자에 mount한다.
mount함수는 Vue 인스턴스(vm)를 반환한다.
반환된 인스턴스(vm)를 통해 데이터를 변경하거나 함수를 사용하는 등의 행위가 가능

2-2. 인스턴스 API - 링크

애플리케이션 API를 통해 반환된 인스턴스(vm)은 자체적으로 사용가능한 method들이 정의되어 있다.

method들은 사용자 속성명과 구별하기 위하여, $표시를 접두사로 사용
인스턴스 속성들

$data $props $el $options $parent $root $slots $refs $attrs

3. 라이프사이클

3-1. 라이프사이클 다이어그램

다이어그램 보기

3-1. 라이프사이클 훅

hook의 종류

created, mounted, updated, unmounted

각 hook에 대한 before- 메서드도 존재

created와 mounted

해당 생명주기에서 접근 가능한 요소들

data접근 (console.log(this.msg))

beforeCreate : Vue.createApp()으로 생성하기 전이므로, data에 접근할 수 없다.
created, beforeMount, mounted : data에 접근 가능

html DOM 접근 (console.log(document.querySelector("h1")))

beforeCreate , created, beforeMount : 생성된 애플리케이션이 html의 DOM과 연결되기 전이므로 접근 불가
mounted : 애플리케이션과 DOM이 연결된 상태로, html요소에 접근 가능

beforeUpdate와 updated

beforeUpdate 와 updated시 data(this.msg)의 값이 똑같이 변경된 값으로 나타남

중요 이는 update의 시점이 data가 변경되는 시점이 아닌, 화면이 update되는 시점임을 의미

html DOM의 요소를 접근하여 출력(document.querySelector(”h1”).textContent)하면 beforeUpdate 시점의 변경 전 값이, updated 시점에 변경 후 값이 정상적으로 출력됨을 확인할 수 있다.

tip 실무에서는 created와 mounted를 고려하는 상황이 가장 많다.

두개의 라이프사이클 중 created를 먼저 고려하여 로직을 작성해보고, 필요한 경우 mounted 시점을 고려한다

4.탬플릿 문법

💡

내부적으로 Vue는 템플릿을 가상 DOM 렌더링 함수로 컴파일합니다. 반응형 시스템과 결합된 Vue는 앱 상태가 변경될 때 다시 렌더링할 최소한의 컴포넌트를 지능적으로 파악하여 DOM 조작을 최소화

render함수를 직접 작성하거나 jsx를 사용하는 것도 선택적으로 가능하다.

4-1. 보간법(interpolation)

데이터 바인딩의 기본 형태는 이중 중괄호 구문{{ }} 이다.

v-once 디렉티브

data가 반응성을 가지지 않도록 하여, 최초의 data값을 유지하도록 할 수 있다(일회성 보간).

<span v-once>결코 변하지 않을 것입니다: {{ msg }}</span>

v-html 디렉티브

이중 중괄호안의 data는 기본적으로 텍스트로 해석한다. 해당 data를 html요소로 변환하여 출력하기 위해서 v-html 디렉티브를 사용해야 한다.
주의 XSS공격의 취약하다.

백엔드에서 어느정도 XSS 방어 된 data를 보내줄 것이다.
XSS 처리 관련 라이브러리 사용할 것

v-html 예제코드


const rawHtml = '<span style="color: red">This should be red.</span>’

// at html

// 1.이중 중괄호
<p> {{ rawHtml }} </p> 
// '<span style="color: red">This should be red.</span>’

// 2. v-html
<p v-html="rawHtml"></p> 
// This should be red

html요소에서 이중 중괄호 구문 사용하기

html element에서 직접적으로 이중 중괄호 구문을 사용할 수 없음

<div id={{ dynamicId }}> ⇒ 불가!

v-bind 디렉티브를 통해서 사용

<div v-bind:id=”dynamicId”> ⇒ 가능!

html요소에서 js 표현식 사용하기

<div v-bind:id=”'list-' + id”>, ⇒ 가능! <div v-bind:id=”ok ? dynamicId : null”> ⇒ 가능!
표현식이란 한 문장으로 된 js의 식을 의미

사칙연산(number + 1), 삼항연산자( condition ? true : false ), method(msg.split(’’”).join(””))

조건문과 반복문은 허락하지 않음

if(ok){ return msg} ⇒ 불가

4-2. 디렉티브

v- 접두사로 시작하는 모든 속성을 디렉티브라고 함

전달인자

v-bind:href=””

v-on:eventName=””

동적 전달인자

v-bind:[attributeName]=””

v-on:[eventName] = “”

4-3. 약어

v-bind:속성명 = ”data”

⇒ :속성명 =”data”

약어 코드 예시


<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

<!-- 동적 전달인자와 함께 쓴 약어 -->
<a :[key]="url"> ... </a>

v-on:이벤트명 = ”함수명”

⇒ @이벤트명 = “함수명”