뷰시리즈 마무리 '라우터' 포스팅입니다. 이외 vue시리즈 마무리 소감을 곁들인!

📌 Vue의 생명주기 >각각의 Vue 컴포넌트 인스턴스는 생성되고 소멸될 때 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프사이클(lifecycle)이라 한다. 라이프사이클 훅(Lifecycle hooks)은 라이프사이클 단계에서 사용자가 자신의 코드를

📌 1. Provide / Inject 1) Provide와 Inject란? 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 Props를 사용했었다. 그런데 위와 같이 Props의 깊이가 깊다고 가정해보자. 그것도 아주 많이 깊다고 가정해보면, 계속해서 P

html과 마찬가지로 컴포넌트에 컨텐츠를 전달할 수 있도록 해준다.한마디로, 특정 내용 뭉텅이를 가져다가 컴포넌트 안에 삽입시키고 싶을 때 쓰는 것이다.역시 예시로 시작해보자.FancyButton.vue를 만들었다.버튼에서 보여줘야할 텍스트가 화면마다 다르다고 가정해보

📌 Non-Prop 속성(fallthrough 속성) >Non-Prop 속성은 props 또는 event 에 명시적으로 선언되지 않은 속성 또는 이벤트이다. (ex. class, style, id) 이전포스팅(emits)에서 '왜 이벤트를 선언해야 하는가?'라

📌 컴포넌트에 v-model 만들기 >컴포넌트를 만든 후 해당 컴포넌트에 v-model을 적용하려면 @update:modelValue 이벤트를 사용하여 v-model을 만들 수 있다. 기본적으로 v-model은 html요소인 ``태그에서 사용한다. 위의 v-mo

이전 포스팅에서 props와 emit에 대해 다뤘다.이번 포스팅에서는 그 중 emit에 대해 좀 더 자세히 다뤄보겠다.자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달 또는 트리거의 목적으로 이벤트를 내보낼 수 있다. 이벤트는 컴포넌트의 emit 메서드를 통하여 발생시킬

컴포넌트에 등록할 수 있는 사용자 정의 속성.간단히 말하면, 자식 컴포넌트에서 props를 선언하면 부모 컴포넌트에서 데이터(속성)를 전달할 수 있다.위의 그림을 통해 직관적으로 알 수 있다.부모 컴포넌트의 데이터를 자식 컴포넌트로 전달시키는 역할이다.쉽게 예시 먼저

싱글파일컴포넌트에서 CSS기능 (scoped / 모듈) 그리고 컴포넌트 등록시 명명 규칙등의 가이드를 분리하여 정리한 포스팅입니다.지속적으로 가이드를 추가 수정 할 예정입니다.<style>태그에 scoped속성이 있는 경우 해당 CSS는 현재 컴포넌트의 요소에만

기본적으로 Single-File Component는 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법이다. Vue에서 Single-file component는 템플릿(template), 로직(script), 스타일(style)을 하나의

📌 1. Watch >composition API의 watch는 반응형 상태가 변경 될 때마다, 이를 감지하여 특정 작업을 수행하게 하는 "감시자 역할"을 한다. 한 마디로, 반응형 상태가 변경 되었을 때 이를 감지하여 다른 작업(DOM변경, 비동기 작업 등등..)

📌 양방향 바인딩 v-model 1. v-model 이란? >입력 요소의 상태와 자바스크립트의 상태를 동기화 시켜주는 디렉티브. 즉, v-model은 양방향 바인딩을 시켜주는 디렉티브이다. 양방향 바인딩이란 무엇일까? 말 그대로, 단방향이 아닌 양방향을 연결시켜

자바스크립트의 버블링과 캡처링의 개념과 예시에 대해 정리한 내용입니다. 추가적으로, event.target과 event.currentTarget의 차이에 대해 정리한 포스팅입니다.

📌 디렉티브(Directives)란? >**디렉티브는 v-접두사가 있는 특수 속성이다. 그대로 직역하면 '지시'를 뜻한다. 즉, 디렉티브는 기능상에서 중요한 역할인 컴포넌트(또는 DOM요소)에게 " Vue는 여러가지 내장 디렉티브를 제공한다. v-text v-ht

v-for는 반복문을 사용하기 위한 디렉티브이다. 배열 또는 객체의 항목을 순차적으로 가져와 렌더링 할 수 있다.

📌 1. v-if >v-if 디렉티브는 조건부로 블록을 렌더링 할 때 사용된다. 위의 코드에서 visible이 true라면 "Hello Vue3!" 텍스트가 화면에 렌더링 될 것이고, false라면 렌더링 되지 않을 것이다. 조건에 따라 화면에 렌더링을 하게 해

클래스를 동적으로 바인딩 하기 위해서는 :class(v-bind:class)를 사용할 수 있다. 위의 예시는 클래스 동적 바인딩의 기본적인 예시다.isActive가 true이므로, 클래스에 acitve가 바인딩된다.개발자 도구를 켜서 확인해보면, <div clas

📌 1. computed 1-1. computed란? >템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성. 템플릿 안에 다음과 같은 코드가 있다고 가정해보자. 위와 같이 템플릿 표현식 내 코드가 길어질 경우, 가독성이 떨어지고 유지보수가 어려워질 수

📌 1. Proxy란? >Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로, 가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 한다. Proxy의 사전적 뜻은 '

반응형이란, 데이터가 변경되었을 때 이를 감지하고 이에 반응하여 DOM이 자동으로 업데이트 되는 성질을 말한다. 즉, 데이터를 변경하면 화면이 변경되는 것이다.쉬운 이해를 위해 반응형 상태를 생성하는 코드를 살펴보자.버튼을 클릭하면, state.count의 값이 +1