[데브코스/TIL] DAY83 - Vue(1)

✨ 뷰 시작하기

1. 스캐폴딩(scaffolding)

npm create vue@latest

• JSX : 설정 X. 뷰는 기본적으로 template를 지원함. JSX는 리액트에서 사용
• Pinia : Vue3에서 사용 가능한 상태 관리 패키지

2. 기본 구조

• package.json
  - private : 애플리케이션 공개 여부 (대부분 true, 공개 X)
  • dependencies : 실행할 때 필요한 의존성 모듈 정의. 프로덕션(배포 및 서비스) 환경에서도 사용
  • devdependencies : 개발할 때 필요한 의종성 모듈 정의. 개발 환경에서만 사용
• main.js : 뷰 애플리케이션 초기화 & 구성 역할
  • createApp() : 뷰 애플리케이션의 인스턴스 생성
• App.vue : 루트 컴포넌트 (가상 상위 컴포넌트)

3. SFC, Single File Component

• Vue에서 컴포넌트를 작성하는 방식 중 하나
• 하나의 파일 안에 HTML, CSS, JS 포함
• 3가지 태그
  • <script> : JavaScript 작성, 0~1개
  • <template> : HTML 작성, 필수로 1개
  • <style> : CSS 작성, 0~1개

<script>
export default {
	name: "컴포넌트 이름",
    data() {
    	return { ... }
    },
    ...
}
</script>
<template>
</template>
<style>
</style>

4. Options API & Composition API

• SFC내, script 태그 안에 코드 작성 시 지켜야 하는 문법 규칙
• Options API : 기존부터 있던 방식
• Composition API : Vue3에서 도입된 방식

5. 데이터 보간법

• template 태그 내에서 data를 사용하는 방법
• 콧수염 문법 (mustache syntax) 사용 {{ 데이터 속성 }}
• 데이터를 직접 입력 O, JS 표현식 O
  • 단, 최대한 데이터로만 넣어서 사용하도록

6. 디렉티브

• template 태그 내에서 data 옵션 속성을 사용하기 위한 방법
• v-[]로 시작하는 뷰에서만 사용 가능한 특별한 속성들
• 하단에 자세히 설명

✨ 디렉티브 종류

1. v-html

• 값에 HTML 태그가 포함될 때, 태그를 html로 반영해서 출력
• XSS(Cross-Site Scripting) 공격에 매우 취약
  • 사용자기 입력한 데이터를 출력할 때 사용X
  • 개발자가 직접 작성한 데이터를 출력할 때만 사용

<script>
export defulat {
  data() {
    message: "<strong>message</strong>",
  }
}
</script>
<template>
<h1>{{ message }}</h1>
<h1 v-html="message"></h1>
</template>

2. v-text

• HTML 태그가 포함될 때, 태그까지 텍스트로 치환 출력

<template>
<h1 v-text="message"></h1>
</template>

3. v-pre

• 컴파일을 건너뜀
• 컴파일 해야 할 코드양은 줄여주어 성능에 도움이 됨
• script 영역 내 뷰 문법을 사용하지 않으면 v-pre로 성능 개선 가능

<template>
<h1 v-pre>{{ message }}</h1>
</template>

컴파일을 진행하지 않으므로 위의 결과는 {{ message }}

4. v-bind

• 데이터를 속성에 바인딩할 때 사용
• vue 3.4 이상부터 v-bind를 제외하고 :속성으로 축약 가능
• 속성명과 데이터명이 같다면 더 짧게 축약 가능
• 조건 처리 가능

<template>
<h1 v-bind:id="id"></h1>
<h1 :id="id"></h1>
<h1 :id></h1>
<h1 :class="isActive ? 'active' : 'inactive'">text</h1>
</template>

5. v-if, v-else-if, v-else

• 조건부 렌더링
• 조건에 맞아야 보여짐

<template>
<p v-if="weather === 'sunny'">sunny</p>
<p v-else-if="weather === 'rainy'">rainy</p>
<p v-esle-if="weather === 'cloudy'">cloudy</p>
<p v-esle>unknown</p>
</template>

6. v-show

• 조건부 렌더링
• 보여주냐, 안 보여주냐
• 자주 스위칭 되는 경우, 해당 디렉티브가 도움이 된다

<template>
<p v-show="isVisible">hello</p>
</template>

7. v-cloak

• 렌더링 되면 없어지는 요소
• 이 디렉티브를 잘 사용하면 디테일 보완 가능
  • 초기 렌더링 시, 컴파일 속도가 느리면 찰나의 깜빡임이 있음
  • 렌더링이 완료되면 v-cloak 설정 제거됨

<template>
<h1 v-cloak>{{ message }}</h1>
</template>
<style scoped>
  [v-cloak] {
    display: none;
  }
</style>

8. v-for

• for문처럼 배열 데이터 순회

<template>
<ul>
	<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>

📌 출처

수코딩(https://www.sucoding.kr)