피곤한아이

[Vue.js] Component

작성자:
Featured image for [Vue.js] Component

  Vue.js Vue.js – The Progressive JavaScript Framework 1. Component? 컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 단위로 분할하고 사용할 수 있다. 하나의 앱은 중첩된 컴포넌트의 트리로 구성된다. 가. Vite Vite는 기존의 복잡한 설정 없이 빠르게 Vue 프로젝트를 시작하기 위해서 사용한다. 시작하기 Vite, 프런트엔드 개발의 새로운 기준 나. vue file SFC의 파일명은 항상 PascalCase로 작성한다. (첫 … 더 읽기

[Vue.js] Watchers

작성자:
Featured image for [Vue.js] Watchers

Vue.js Vue.js – The Progressive JavaScript Framework 1. 왜 씀? Computed Properties는 getter에서 발생할 수 있는 사이드 이펙트를 방지하기 위해서 getter는 순수함수여야 한다. 앞서 Computed Propertyis를 배우면서 위와 같이 배웠다. 상태 변경에 대한 반응으로 사이드 이펙트(ex. DOM을 변경하거나 비동기 작업의 결과를 기반으로 다른 상태를 변경하는 것)를 수행해야 하는 경우 어떻게 해야 할까? 2. watch function … 더 읽기

[Vue.js] Lifecycle Hooks

작성자:
Featured image for [Vue.js] Lifecycle Hooks

1. 생명주기 각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행된다. setup, beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted 등의 Lifecycle hook이 존재한다. 이 중에서 setup, mounted, updated, unmounted 정도는 기억하고 있자. 2. Lifecycle hooks 등록하기 가장 일반적으로 사용되는 훅은 onMounted, onUpdated, onUnmounted가 있다.

[Vue.js] 리스트 렌더링

작성자:
Featured image for [Vue.js] 리스트 렌더링

  1. 배열 가. 기본 문법 배열을 리스트로 렌더링 할 수 있습니다. 현재 아이템의 index도 지원한다. 당연히 중첩 for문도 가능하다. <template>을 이용할 수도 있다. 나. Destructuring Assignment v-for는 JavaScript의 for문과 비슷하다. Destructuring Assignment(구조 분해 할당)도 사용할 수 있다. 2. 객체 v-for는 객체의 속성을 반복하는 데 사용할 수도 있다. index와 마찬가지로 key는 선택적으로 사용할 수 있다. … 더 읽기

[Vue.js] 조건부 렌더링

작성자:
Featured image for [Vue.js] 조건부 렌더링

  1. v-if 2. v-show v-if와 차이점은 v-show가 있는 엘리먼트는 항상 렌더링 되고 DOM에 남아 있다는 것입니다. display CSS 속성만 전환한다. v-show는 <template> 엘리먼트를 지원하지 않는다. 또한 v-else와 상호작용하지 않는다. 3. v-if? v-show?   v-if v-show 렌더링 참일 때만 렌더링 항상 전환 비용 크다 적다 초기 렌더링 비용 적다 크다 용도 런타임 시 조건이 변경될 … 더 읽기

[Vue.js] Class & Style 바인딩

작성자:
Featured image for [Vue.js] Class & Style 바인딩

1. Class & Style 바인딩 이전에 v-bind를 이용해서 Attribute 바인딩 해보았다. 하지만 class와 style은 문자열로만 바인딩하기엔 너무 복잡하다. 그래서 뷰에선 v-bind가 class 및 style과 함께 사용될 때 문자열 외에도 다양한 방법을 제공한다. 2. Class 바인딩 가. 객체로 바인딩 클래스를 동적으로 토글하는 방법이다. 1) 인라인 여러 클래스를 토글할 수 있습니다. :class 디렉티브는 일반 class 속성과 공존할 … 더 읽기

[Vue.js] Computed Properties

작성자:
Featured image for [Vue.js] Computed Properties

1. 왜 씀? Computed Properties는 왜 필요할까? 템플릿 내 표현식은 유지보수에 불리하다. 템플릿의 여러 곳에서 사용되면 같은 표현식이 여러 번 사용된다. 이는 일관성 있게 관리하기 어렵다. publishedBooksMessage라는 computed property가 선언되었다. computed() 함수에는 getter로 사용될 function이 입력돼야 하며, 반환되는 값은 computed ref다. 마찬가지로 계산 결과를 publishedBooksMessage.value로 접근할 수 있다. computed property은 의존된 반응형을 자동으로 추적한다. publishedBooksMessage는 … 더 읽기

[Vue.js] Reactivity

작성자:
Featured image for [Vue.js] Reactivity

1. ref() Composition API에서 반응형 상태를 선언하는 권장 방법이다. ref()의 인자로 전달되면 ref object로 wrapped되어 반환된다. 이때 .value 프로퍼티를 가진다. 가. 왜 씀? ref()를 사용하면 변수의 값이 변경될 때 Vue.js가 자동으로 이 변경을 감지하고 DOM을 적절하게 업데이트한다. 이것이 가능한 이유는 Vue가 컴포넌트를 처음 렌더링할 때부터, 모든 ref를 기억,추적하기 때문이다. 표준 JavaScript에서는 일반 변수의 접근이나 변형을 … 더 읽기

[Vue.js] Directive & Modifiers

작성자:
Featured image for [Vue.js] Directive & Modifiers

0. 출처 Vue.js Vue.js – The Progressive JavaScript Framework 1. Directive v- 접두사가 있는 특수한 속성. 디렉티브 설명 v-bind 데이터와 속성이나 요소, 컴포넌트 props를 바인딩 v-on 이벤트 리스너를 추가 v-if 조건에 따라 요소를 렌더링 v-else v-if의 “else” 블록 v-else-if v-if의 “else if” 블록 v-for 배열을 기반으로 요소를 반복 v-model 양방향 데이터 바인딩 v-show 조건에 따라 … 더 읽기