Je개발 일지

[ Reference ] https://vuejs.org/guide/essentials/component-basics.html 컴포넌트는 UI 를 독립적이고 재사용 가능한 방향으로 사용할 수 있도록 도와준다. App 을 구성할 때 컴포넌트를 중첩해서 사용하는 것은 일반적인 형태다 컴포넌트를 중첨ㅂ해서 사용하는 것은 일반 HTML 을 사용하는 것과 유사해 보인다. 하지만 Vue 는 독자적인 컴포넌트 모델을 사용하고 있으며 개발자가 작성한 컨텐츠나 로직을 각 컴포넌트에서 캡슐화할 수 있다. 1. Defining a Component build 의 과정을 거친다면, 우리는 보통 ** .vue ** 확장자(이 확장자가 SFC 를 의미) 를 사용해서 Vue 컴포넌트를 만들 것이다. You clicked me {{..

[ Reference ] https://vuejs.org/guide/essentials/template-refs.html Template Refs | Vue.js vuejs.org Vue 의 선언적 렌더링은 대부분 직접적인 DOM 작업을 추상적으로 실행하지만(* 간접적으로 실행한다는 의미) 일을 하다 보면 실제 DOM element에 직접 접근해야할 때가 있다. 이런 경우에는 ** ref ** 의 특별한 속성을 사용해서 해결할 수 있다. ** ref ** 는 ** v-for ** 의 ** key ** 속성과 비슷한 특수 속성이다. 특정 DOM element, 혹은 하위 구성 element 인스턴스를 마운트된 이후에 이를 직접 참조할 수 있도록 도와준다. 타사 라이브러리를 초기화할 때도 이런 방법은 유용할..

[ Reference ] https://vuejs.org/guide/essentials/watchers.html Watchers | Vue.js vuejs.org 1. Basic Example Vue 에서는 ** computed ** 를 이용해서 값을 선언적으로 계산할 수 있다. 하지만 상태 변화에 따라 발생하는 사이드 이펙트를 다뤄야하는 상황이 발생하기도 한다. 예를 들어서 DOM 을 조작한다고 할 때, 혹은 비동기 연산의 결과에 따라 다른 상태를 변경해야하는 것 등이 있다. 이런 경우 Composition API 의 watch 함수를 사용하면 반응성 있는 상태가 변경될 때마다 콜백 함수를 실행할 수 있다. Ask a yes/no question: {{ answer }} (* 위의 예제 코드를 잠깐 해..

[ Reference ] https://vuejs.org/guide/essentials/lifecycle.html Lifecycle Hooks | Vue.js vuejs.org https://vuejs.org/api/composition-api-lifecycle.html Composition API: Lifecycle Hooks | Vue.js vuejs.org 원래는 Essentials 의 내용만을 적고 상세한 내용들은 다음에 옮기려고 했으나 이번에는 이 두 가지를 한 번에 같이 하는 것이 더 효율적이라는 생각이 들어서 함께 사용하기로 했다. !! 주의점: 여기에서 설명하는 라이플 사이클 hook은 모두 Composition API 에서만 사용하는 것들입니다. Options API 의 라이플 사이클 훅..

[ Reference ] https://vuejs.org/guide/essentials/forms.html Form Input Bindings | Vue.js vuejs.org 1. Basic Usage Text Message is: {{ message }} ** v-model ** 을 사용할 때 주의할 점은 IME 가 필요한 언어, 즉 한글은 작성하고 있는 중에 업데이트 되지 않는다. 쉽게 설명하면 한 글자로 업데이트가 되며, 키를 입력하는 자음, 모음 각각 하나에 반응해서 업데이트 되지 않다는 말이다. 그렇기에 한글을 사용할 때 사용자의 경험을 제대로 주고 싶다면 input 태그에 이벤트를 발생시켜서 이벤트 핸들러로 데이터를 바인딩 하는 방식이 필요하다. {{ msg3 }} Multiline Text..

[ Reference ] https://vuejs.org/guide/essentials/event-handling.html Event Handling | Vue.js vuejs.org 1. Listening to Events 이벤트를 실행하기 위해서 ** v-on ** 이라는 디렉티브를 사용할 수 있다. ** v-bind ** 를 ** : ** 로 축약할 수 있듯이 ** v-on ** 은 축약형으로 ** @ ** 을 사용할 수 있다. 이벤트 핸들러를 사용하는데는 두 가지의 방법이 있다. 첫 번째는 Inline, 두 번째는 Method 다. 2. Inline Handlers Inline handler 는 굉장히 간단하고 전형적인 방식이다. const count = ref(0) Add 1 Count is: ..

[ Reference ] https://vuejs.org/guide/essentials/list.html List Rendering | Vue.js vuejs.org 1. v-for ** v-for ** 디렉티브는 배열에서 item들을 렌더링할 때 사용할 수 있다. ** v-for ** 디렉티브는 ** item in items ** 라는특별한 구문을 필요로 한다. 여기서 items 는 array 를 의미하고 item 은 각 array 의 요소 별칭이다. const items = ref([{ message: 'Foo' }, { message: 'Bar' }]) {{ item.message }} ** v-for ** 는 상위 범위 속성에 모두 접근할 수 있고, 내부에서 만들 수 있는 두 번째 별칭은 inde..

[ Reference ] https://vuejs.org/guide/essentials/computed.html Computed Properties | Vue.js vuejs.org 1. Basic Example Template 표현 방식은 매우 편리하지만 그만큼 간단한 작동을 위한 것이라는 의미도 내포한다. 너무 많은 로직을 Template 안에 넣게 되면 무거워지면서 유지하기가 어려워진다. 반응형 데이터를 포함하는 복잡한 논리의 경우 계산된 속성을 사용하는 것이 권장된다. Has published books: {{ publishedBooksMessage }} 여기에서 계산된 속성을 ** publishedBooksMessage ** 로 선언했다. ** computed( ) ** 함수는 getter 함수..

[ Reference ] https://vuejs.org/guide/essentials/reactivity-fundamentals.html Reactivity Fundamentals | Vue.js vuejs.org 공식 문서에서는 예시 코드를 Options API, Composition API 둘 다 지원하고 있다. 나는 개인적으로 Composition API 를 더 선호하고 있기 때문에 Composition API 로 예시 코드를 가져오도록 하겠다. 1. Declaring Reactive State ** reactive( ) ** 함수를 사용하게 되면 반응성이 있는 객체나 배열을 만들 수 있다. import { reactive } from 'vue' const state = reactive({ cou..

[ Reference ] https://vuejs.org/guide/essentials/template-syntax.html Template Syntax | Vue.js vuejs.org Vue 는 선언적 바인딩을 가능하게 하는 HTML 기반의 Template 구문을 사용한다. 모든 Vue template 은 HTML Parser 나 규격 호환 브라우저에서 파싱할 수 있는 유효한 HTML이다. Vue 는 template 을 높은 정도로 최적화된 자바스크립트 코드로 컴파일한다. 여기에 반응성 시스템까지 겹쳐서 Vue 는 리렌더링 해야 하는 최소한의 Element 를 파악해 앱 상태가 변경될 때 최소한의 DOM 을 조작할 수 있도록 만든다. (* 의미하는 바를 잘 생각해보자. HTML 을 이용해서 DOM T..