grace's dev_note

v-for v-for 디렉티브를 사용하여 배열인 목록을 렌더링 할 수 있습니다. const items = reactive([ { id: 1, message: 'Java' }, { id: 2, message: 'HTML' }, { id: 3, message: 'CSS' }, { id: 4, message: 'JavaScript' }, ]); {{ item.message }} v-for=”item in items” 문법을 사용해서 배열에서 항목을 순차적으로 할당합니다. v-for=”(item, index) in items” 문법을 사용해서 배열 인덱스를 가져올 수 있습니다. 항목을 나열할 때 각 :key 속성에는 고유한 값을 지정해야 합니다. (vue 2.2.0 부터 필수) v-for 객체 v-for를 사용..

v-if v-if 디렉티브는 조건부로 블록을 렌더링 할 때 사용됩니다. Hello Vue3! v-else v-else 디렉티브는 v-if가 거짓(false)일 때 렌더링 하는 블록입니다. Hello Vue3! Good bye! v-else-if v-else-if는 이름에서 알 수 있듯이 v-if에 대한 ‘else if 블록' 입니다. 여러 조건을 연결할 수 있습니다. A B C Not A/B/C 여러개의 HTML요소를 v-if 디렉티브로 연결하고 싶다면 을 사용할 수 있습니다. Title Paragraph 1 Paragraph 2 v-show 요소를 조건부로 표시하는 또 다른 옵션은 v-show 디렉티브 입니다. Title toggle show v-if vs. v-show v-if는 실제로 렌더링됩니다...

HTML 클래스 바인딩 객체 바인딩 클래스를 동적으로 바인딩 하기위해서는 :class(v-bind:class)를 사용할 수 있습니다. ({ active: isActive.value && !hasError.value, 'text-danger': !isActive.value && hasError.value, })); 배열에 바인딩 배열에 :class를 바인딩하여 클래스 목록을 적용할 수 있습니다. const activeClass = ref('active') const errorClass = ref('text-danger') 인라인 스타일 바인딩 HTML style 속성에 객체값을 바인딩할 수 있습니다. const activeColor = ref('red') const fontSize = ref(30) 템플릿..

Computed 템플릿 문법({{ }})은 간단히 사용하면 매우 편리합니다. 하지만 템플릿 표현식 내 코드가 길어질 경우 가독성이 떨어지고 유지보수가 어려워질 수 있습니다. 예를 들어 아래와 같이 객체가 있는경우: const teacher = reactive({ name: '짐코딩', lectures: [ 'HTML/CSS', 'JavaScript', 'Vue3' ] }) 그리고 에 author가 책을 갖고 있는지 없는지 여부를 표시하고 싶을 경우: 강의가 존재 합니까?: {{ teacher.lectures.length > 0 ? 'Yes' : 'No' }} 이 시점에서 템플릿 표현식은 복잡해지며 선언적이지 않습니다. 또 이러한 코드를 여러곳에서 반복적으로 사용해야 한다면 더더욱 비효율 적일 것입니다. ..

반응형 상태 선언하기 JavaScript 객체에서 반응형 상태를 생성하기 위해서는 reactive() 함수를 사용할 수 있습니다. import { reactive } from 'vue' // 반응형 상태 const state = reactive({ count: 0 }) 컴포넌트 에서 반응형 객체를 사용하는 예제입니다. {{ state.count }} ref로 원시값 반응형 데이터 생성하기 reactive() 함수는 객체타입에만 동작합니다. 그래서 기본타입(number, string, boolean)을 반응형으로 만들고자 할 때 ref 메소드를 사용할 수 있습니다. import { ref } from 'vue' const count = ref(0) ref 메서드는 변이가능한(mutable) 객체를 반환합니..

Setup setup() 함수(hook)는 Composition API 사용을 위한 진입점 역할을 합니다. 그리고 setup 함수는 컴포넌트 인스턴스가 생성되기 전에 실행됩니다. 기본 사용 반응형 API(Reactivity API)를 사용하여 반응형 상태를 선언하고 script setup에서 객체를 반환하여 에 노출할 수 있습니다. setup() 함수를 사용할 수 있지만 SFC와 Composition API를 함께 사용하는 경우 script setup을 사용하는 것을 권장하고 있기에, script setup 사용 기준으로 설명하겠습니다. 반환된 객체의 속성은 구성 요소 인스턴스에서도 사용할 수 있습니다(다른 옵션이 사용되는 경우): {{ count }} Props 접근 setup 함수의 첫 번째 매개변수..

Vue3에서 발표한 Composition API에는 크게 반응형 API(Reactivity API), 라이프 사이클 훅(Lifecycle Hooks), 종속성 주입이 있습니다. API(Reactivity API) ref(), reactive()와 같은 API를 사용하여 reactive state(반응 상태), computed state(계산된 상태), watcher(감시자)와 같은 것들을 만들 수 있습니다. 반응형 {{ reactiveMessage }} Add message 일반 {{ normalMessage }} Add message Vue 인스턴스는 크게 생성(create)되고 DOM에 부착(mount)되고, 업데이터(update)되며, 없어지는(destroy) 4가지 과정을 거치게 됩니다. 종속성 ..

Vue.js는 MVVM(Model-View-ViewModel) 패턴을 표방하고 있지만 코어 라이브러리는 ViewModel에 집중되어 있습니다. 코드의 재활용성이나 속도에 큰 장점이 있는 단일 페이지 어플리케이션(SPA: Single Page Application)을 개발할 때 Router와 같은 공식 라이브러리를 이용할 수 있으며, 여러 컴포넌트들이 상태를 유지하고 데이터를 공유하기 위해서 Vuex와 같은 라이브러리를 이용할 수 있습니다. Vue는 가상노드(VNode)를 생성하는 해당 노드에 먼저 모든 DOM을 구성한 후 브라우저에게 최종 DOM 엘리먼트 변경을 통지함으로써 속도 저하를 방지했습니다. 하지만, 개발이 지속되면서 코드의 길이가 길어져 가독성이 떨어지고, 수많은 컴포넌트들이 공유하는 데이터 ..

지난 게시글에 이어 진행됩니다. 두 가지 에러를 모두 핸들링 해주고 났는데도 불구하고 또 다른 에러가 저의 테스트를 막습니다(...) 제발 테스트 하게 해줘! TypeError: Cannot set properties of undefined (setting 'hasOwnProperty') 이번에 만난 에러는 이런 에러입니다. 각 컴포넌트를 가져오려고하는데 가져오지 못하는걸까? shallowMount 에서 에러가 발생했는데 컴포넌트가 undefined 인 것 처럼 보여서 뭔가 컴포넌트를 인식을 못하는걸까? 해서 틸드 기호로 가져오던 import 도 상대 경로로 수정해보고 파일 확장자를 지정해주지 않아서일까 해서 파일 확장자도 지정해주었는데도 불구하고 에러가 계속해서 발생했습니다. 여러 구글링을 진행해본 결..

지난 게시글에 이어 발생한 jest 에러입니다. 지난 에러를 해결한 후 다시 실행했더니 아래와 같은 에러가 발생했습니다. ReferenceError: location is not defined / ReferenceError: document is not defined The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string. Consider using the "jsdom" test environment. ReferenceError: document is not defined 사실 이 에러는 에러 메세지를 읽어보시면 아실 수 있을 ..