Vue

[Vue3] Vue.js 시작하기 - 프로젝트 생성

[Vue3] Vue.js 시작하기 - 프로젝트 생성

[Vue3] 반응형 객체(reactive, ref, toRefs, toRef, readonly) 정리

[Vue3] 반응형 객체(reactive, ref, toRefs, toRef, readonly) 정리

[Vue3] computed 정리

[Vue3] computed 정리

[Vue3] v-if, v-show 정리

[Vue3] v-if, v-show 정리

[Vue3] v-for 정리

[Vue3] v-for 정리

[Vue3] 컴포넌트간 v-model 적용하기

[Vue3] 컴포넌트간 v-model 적용하기

[Vue3] emit 정리

[Vue3] emit 정리

[Vue3] Props 정리

[Vue3] Props 정리

[Vue3] 컴포넌트 정의 및 사용

[Vue3] 컴포넌트 정의 및 사용

[Vue3] Watch, WatchEffect 정리

[Vue3] Watch, WatchEffect 정리

[Vue3] v-model 양방향 바인딩 정리

[Vue3] v-model 양방향 바인딩 정리

[Vue3] Key Modifiers, System Key Modifiers 정리

[Vue3] Key Modifiers, System Key Modifiers 정리

[Vue3] Event Modifiers 정리 (.stop, .prevent..)

[Vue3] Event Modifiers 정리 (.stop, .prevent..)

[Vue3] Non Props 속성 정리 (fallthrough 속성)

[Vue3] Non Props 속성 정리 (fallthrough 속성)

[Vue3] Vuetify 적용 방법

[Vue3] Vuetify 적용 방법

[Vue3] 중첩된 라우트 정리

[Vue3] 중첩된 라우트 정리

[Vue3] Vue Router 404 처리

[Vue3] Vue Router 404 처리

[Vue3] 동적 Router 적용 및 route name 지정 적용해보기

[Vue3] 동적 Router 적용 및 route name 지정 적용해보기

[Vue3] Vue Router 적용해보기

[Vue3] Vue Router 적용해보기

[Vue3] provide, inject 정리

[Vue3] provide, inject 정리

[Vue3] Slot 정리

[Vue3] Slot 정리

Vue는 User Interface(UI)를 빠르게 만들기 위한 자바스크립트 기반 프레임워크 이다. Vue를 사용하면 웹을 쉽고 빠르게 효율적으로 개발할 수 있다.

Vue 애플리케이션을 만드는 방법은 아래와 같다.

최신 버전의 노드가 설치되어있는지 확인 후

명령어를 입력하면 create-vue를 설치 및 실행하며, TypeScript 및 테스트 지원과 같은 몇 가지 선택적 기능에 대한 프롬포트가 표시된다.

선택을 완료 하면 프로젝트가 생성되는데 이후 의존성 추가 후 기동을 하면 동작한다.

npm run dev 를 하게 되면 아래와 같이 로컬에서 접속 할 수 있는 주소가 뜬다.

[Vue3] Vue.js 시작하기 - 프로젝트 생성

reactive()

reactive()함수를 객체나 배열같은 레퍼런스 타입을 반응형 객체로 선언할 수 있다. 해당 함수로 선언한 객체의 값이 변경되면 자동으로 값이 렌더링 된다.

선언

사용법

ref()

reactive()함수가 객체 타입에만 동작한다면, ref()함수는 number, string, boolean 같은 primitive 타입의 반응형 상태를 만들 때 사용한다.

선언

여기서 선언된 text는 value라는 단 하나의 속성을 갖는 객체가 된다. 여기서 value는 Hello이다. 그래서 자바스크립트 문법 내애서 text의 값을 가져오기 위해서는 text.value로 해당 데이터에 접근해야 한다. ex) console.log(text.value)

사용법

ref → Object

ref()로 선언한 데이터를 반응형 객체의 속성으로 주입또한 가능하다. 아래 예제를 살펴보자

[Vue3] 반응형 객체(reactive, ref, toRefs, toRef, readonly) 정리

템플릿 문법 {{ }}은 간단히 사용하면 매우 편리하지만, 템플릿 표현식 내의 코드가 너무 길어질 경우 가독성이 떨어지고 유지보수하기 어려워 질 수 있다. 아래 코드는 간단하게 num이 짝수면 짝수 아니면 홀수를 출력하는 표현식이다. 템플릿 표현식안에서 삼항연산자를 사용해서 이렇게 표현해도 큰 문제는 없지만 가독성이 떨어진다는 단점이 존재한다.

위의 코드를 computed를 사용하여 아래와 같이 변경 할 수 있다.

아래 코드와 같이 computed사용 없이도 충분이 구현이 가능하기 때문에 꼭 computed를 써야되나 라는 생각이 들 수 있다.

결론적으로는 computed를 사용하는 것이 성능상 훨씬 좋다. 그 이유는 computed를 사용했을 경우에 나온 데이터가 캐싱되기 때문이다. 그리고 computed함수가 실행되는 시점은 함수 안의 데이터가 변경되는 시점이다. 위의 예시에서는 `num`이 변경되는 경우이다. 그리고 computed는 읽기 전용 함수이기 때문에 아래와 같이 값을 변경하려고 하면 경고 창이 발생한다.

그래서 computed의 값을 변경하고 싶다면 get, set 함수를 사용해야 한다.

[Vue3] computed 정리

v-if

Vue에서 특정 조건에 따라서 컴포넌트를 렌더링 할 때는 v-if를 사용한다. v-if안의 조건이 true이면 출력 false면 출력 되지 않는다.

if - else, if - else if - else 또한 사용 가능하다.

<template> 태그를 사용하여 하나의 조건으로 여러 개의 HTML요소를 렌더링 할 수도 있다.

v-show

v-show를 사용해서도 요소를 아래와 같이 표현할 수 있다.

이렇게만 봤을 때는 v-if와 사용법은 똑같고 큰 차이가 없는 것으로 보이는데, v-if와 v-show의 가장 큰 차이는 요소의 렌더링 여부이다. v-if는 안에 조건이 true일 경우 렌더링 자체가 되지 않지만, v-show일 경우는 조건의 true, false 여부의 상관 없이 무조건 렌더링이 되고 조건에 따라서 display:none / display: block 속성 전환이 된다.

[Vue3] v-if, v-show 정리

목록을 출력할 때는 v-for디렉티브를 통해서 렌더링 할 수 있다.

표현할때는 아래와 같이 리스트의 인덱스를 가져올 수도 있다.

v-for를 사용할 때 한 가지 주의 할 점은 같이 태그에서 v-if랑 같이 사용하는 것을 금지하고 있다. 공식문서에 의하면 v-if는 v-for보다 우선순위가 높기 때문에 아래와 같은 에러가 발생 할 수 있다고 한다.

그래서 v-for와 v-if가 같이 사용이 필요할 경우에는 아래와 같이 사용하라고 말해주고 있다.

[Vue3] v-for 정리

Vue3 프로젝트를 만들면서 Vuetify까지 설치해서 사용하는 방법을 정리해보겠다.

Vuetify란 구글의 Material Design가이드라인을 기반으로 스타일과 컴포넌트를 제공하여 UI를 보다 쉽게 만들 수 있다.

프로젝트 생성

(나는 참고로 3.1.10 버전의 vue 프로젝트를 만들었다.)

Vuetify 설치

프로젝트에서 Vuetify와 관련된 종속성을 설치한다.

vuetify@next → Vuetify 3의 최신 버전을 설치

@mdi/font → Material Design Icons 폰트 패키지이며, 아이콘 사용을 위해 설치

[Vue3] Vuetify 적용 방법

Vue Router를 사용할 때 중첩 라우트(Nested Routes)를 사용하여 계층적인 컴포넌트 구조를 보여줄 수 있다.

위와 같이 헤더에 Menu1, Menu2, Menu3 이 있고 클릭하는 Menu에 따라서 보여줄 컴포넌트가 <RouterView> 에 렌더링 되는 구조가 있다고 가정했을 때, 중첩된 컴포넌트를 사용하면 아래와 같이 <RouterView> 안에서 또 다시 렌더링 될 컴포넌트들을 보여줄 수 있다.

중첩된 라우트 설정하는 방법은 children 속성으로 라우트를 넣어주면 된다.

위와 같이 설정된 라우트는 아래와 같이 보여진다.

/nested → NestedView 컴포넌트 렌더링

[Vue3] 중첩된 라우트 정리

지정된 페이지가 아닌 경로에 사용자가 접근 했을 시에 보여주는 404페이지를 만들어보려고 한다.

Router를 정의해 놓은 js 파일에 아래와 같은 경로를 추가한다.

path: '/:NotFound(.*)*' 에 대해서 간단히 설명하자면

NotFound → 단순한 변수 명 ( 실제 동작에는 영향을 주지 않는다. )

.* → 모든 경로를 매칭하는 정규 표현식

* → 0개 이상의 경로 세그먼트를 포함 가능

따라서 이 경로는 정의되지 않은 모든 경로를 NotFoundView로 리다이렉트 한다.

References

[Vue3] Vue Router 404 처리

route를 지정할 때 동적 route를 만들 수도 있고, route에 name을 붙여서 router에서 name을 활용 할 수도 있다.

이런식으로 route 설정을 할 경우 /posts/1, /posts/2, /posts/3 같은 URL은 모두 같은 PostDetailView.vue라는 컴포넌트로 매핑되게 된다. 파라미터는 콜론 : 으로 표시하면 된다.

그리고 해당 route를 호출하는 router에서 route에서 지정한 name을 가지고도 호출할 수 있다.

router.push 를 사용해서 route를 호출할 때 파라미터는 문자열 또는 위의 방식처럼 객체가 될 수 있다.

[Vue3] 동적 Router 적용 및 route name 지정 적용해보기

vue router란 컴포넌트들의 조합으로 이루어진 SPA에서 URL이 변경되면 어떤 컴포넌트들이 렌더링 될 지 보여주는 라이브러리이다.

router를 이용하면 변경될 요소에 대해서 페이지를 새로고침하지 않고 컴포넌트를 변경 될 요소로 재 랜더링해서 사용자의 경험을 개선할 수 있다.

라우터란? (Router)

라우트란? (Route)

vue-router 설치

컴포넌트 구조

router의 기본적인 실습은 아래처럼 공통된 Header 영역은 그대로 두고

content영역을 “/” 로 접근 시 HomeView.vue를 보여지게 하고 “/about”으로 접근 시 AboutView.vue를 렌더링 해보도록 하겠다.

[Vue3] Vue Router 적용해보기

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 props를 통해서 전달이 가능하다. 그렇다면 만약 전달해야하는 데이터가 아래와 같이 컴포넌트 간에 Deep가 깊어지면 어떻게 전달해야 할까

이미지 출처 : https://ko.vuejs.org/guide/components/provide-inject.html

이럴때 provide를 통해 전달이 가능하다. 부모 컴포넌트에서 provide로 정의된 데이터에 대해서는 자식 컴포넌트나 그 하위 컴포넌트까지도 모두 inejct를 통해서 접근이 가능하다.

최상위 부모 컴포넌트인 TheView.vue에서 provide(’변수 명’, 전달할 인자)를 정의하기만 하면 그 하위 컴포넌트에서는 inject(’변수 명’)을 통해서 해당 데이터에 접근할 수 있다.

TheView.vue에서는 message를 provide하지 않았는데 그럴 때 하위 컴포넌트에서 만약 전달받지 못한 데이터라면 두 번째 매개변수로 디폴트 값을 정해서 사용할 수 있다.

[Vue3] provide, inject 정리

Slot이란?

부모 컴포넌트에서 자식컴포넌트를 사용할 때 컨텐츠를 전달할 수 있는데 이 때 사용하는 것이 <slot> 이다.

최종적으로 렌더링되는 모습은

이런식으로 내부 컨텐츠를 자식 컴포넌트에게 제공할 수 있다.

[Vue3] Slot 정리

Non-Prop 속성이란 부모 컴포넌트에서 자식 컴포넌트로 prop이나 event를 상속할 때 자식 컴포넌트에서 명시적으로 선언되지 않는 속성을 의미한다.

요소 상속

이런식으로 버튼을 클릭했을 때 안녕하세요 라는 alert창을 띄어주는 컴포넌트가 있다고 가정했을 때 부모 컴포넌트에서 class=”hello-btn”, id=”hello-btn”, @click=”sayHello” 라는 속성과 이벤트를 자식 컴포넌트로 상속 해주었다.

그리고 이미 자식 컴포넌트 buttton 에는 btn, btn-primary 라는 클래스가 이미 존재하는 상태이다.

이 경우 최종적으로 렌더링은 아래와 같이 된다.

[Vue3] Non Props 속성 정리 (fallthrough 속성)

반응형 변수에 v-model 을 적용하여 <template> 태그 내에서 입력 요소의 값과 자바스크립트 값의 데이터를 양방향 바인딩 할 수 있다.

이것과 마찬가지로 부모 컴포넌트와 자식 컴포넌트간에도 v-model 을 통해서 양방향 데이터 바인딩을 할 수 있다.

이 경우 Vue는 자동으로 아래와 같이 동작하게 된다.

정리

v-model 은 기본 props 로 modelValue 를 사용한다.

부모에서 입력한 값(username이라는 props)을 자식으로 전달한다.

자식에서는 기본 props인 modelValue를 <script setup> 태그 내에 정의 한다. 부모로 이벤트 전달을 위한 emit도 같이 정의한다. 이름은 update:modelValue

자식에서 입력한 값을 부모로 전달한다 @input="$emit('update:modelValue', $event.target.value)"

[Vue3] 컴포넌트간 v-model 적용하기

사용

PostCreate.vue ( 자식 )

TheView.vue ( 부모 )

자식 컴포넌트에서 emit 을 사용하는 방법은 위의 방법 이외에도 아래와 같이 여러 방법이 있다.

[Vue3] emit 정리

props 는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방식을 말한다.

TheView.vue 라는 부모 컴포넌트에서 각각의 AppCard.vue 라는 자식 컴포넌트로 데이터를 전달하는 상황을 가정해보자

props 를 전달하는 방식은 여러가지가 있다.

부모 컴포넌트 ( TheView.vue )

1. 정적 데이터 전달

[Vue3] Props 정리

컴포넌트 정의

Vue3에서 컴포넌트 는 UI를 재사용 가능하게 하고 독립적인 단위로 나누는 핵심 개념이다. Vue 하나의 최상위 컴포넌트(App.vue)에서 시작되며 여러 개의 하위 컴포넌트로 구성된다.

컴포넌트의 정의는 싱글 파일 컴포넌트(SFC)와 문자열 컴포넌트로 정의하는 두 가지 방법이 있는데 싱글 파일 컴포넌트로 정의하는 것이 일반적이다.

싱글 파일 컴포넌트는 <template> , <script>, <style> 이러한 코드를 갖는 .vue 파일 확장자를 갖는 파일을 의미한다.

컴포넌트 등록 및 사용

Vue에서는 컴포넌트를 전역 또는 지역으로 등록해서 사용할 수 있다.

전역

[Vue3] 컴포넌트 정의 및 사용

반응형 상태가 변경되었을 때를 감지하여 다른 작업을 수행해야 하는 경우가 있다. ex) api call..

Vue에서는 watch() 함수를 통해 해당 작업을 수행할 수 있다.

Watch()

반응형 객체 또한 변경을 감지할 수 있다. 이때 중첩된 모든 속성도 트리거가 된다.

[Vue3] Watch, WatchEffect 정리

form에서 입력 양식을 처리할 때 입력 요소의 값과 자바스크립트 요소의 값을 동기화 해야 하는 경우가 많다.

input

아래 태그에서 처럼 input 태그의 입력이 있을 때마다 @input 디렉티브를 통해서 value 를 동기화 해주어야 한다.

이 작업을 단축한 것이 v-model 디렉티브이다. v-model 디렉티브를 사용하면 아래와 같이 코드를 줄일 수 있다.

이렇게 v-model 을 사용하면 자동으로 양방향 데이터 바인딩이 가능하다.

checkbox

[Vue3] v-model 양방향 바인딩 정리

이벤트가 실행될 때 키보드의 특정 키로 실행했는지 확인해야 될 때도 종종 있다. Vue에서는 이러한 상황을 위해 키 수정자를 추가할 수 있다.

위의 코드와 같이 text에 todo를 입력하고 enter 를 눌러야 addTodo 함수가 실행도록 설정 할 수 있다.

Vue에서 일반적으로 사용되는 키에 대한 수정자는 아래와 같다

.enter 

.tab

.delete → (Delete키와 Backspace 키를 모두 수신한다.)

.esc

.space

.up

.down

.left

.right

[Vue3] Key Modifiers, System Key Modifiers 정리

이벤트를 조작할 때 event.preventDefautl(), event.stopPropagation() 함수를 사용하는 것은 굉장히 일반적인 현상이다.

하지만 함수 내부에서 이러한 이벤트 처리 보다는 순수한 비즈니스 로직이 들어가면 훨씬 효율적일 것이다.

Vue에서는 이러한 문제 해결을 위해 수정자(Modifier)를 제공한다.

.stop

간단한 코드로 알아보자

Modifier 테스트를 위해 간단한 요소를 만들었다. 각 요소를 클릭했을 시에는 클릭한 태그가 콘솔에 찍히도록 두었다. 화면은 아래와 같을 것 이다.

[Vue3] Event Modifiers 정리 (.stop, .prevent..)