Vue 기초

Vue에서의 keep-alive와 Nuxt에서의 keep-alive

인프런 짐코딩 강의를 듣고 정리한 글입니다.

RouterLink를 활용한 검색 엔진 최적화

Pinia 스토어 선언, Option API와 Composition API 방식에 의한 차이

플러그인은 일반적으로 Vue에 전역 수준의 기능을 추가할 때 사용하는 기능을 말함.플러그인에 대해 엄격하게 정의 된 멈위는 없으나,유용한 시나리오는 아래와 같음app.component() 메서드를 사용하여 전역 컴포넌트를 등록 하고자 할 때app.directive()

주로 페이지 이동을 리다이렉션 하거나 취소하여 특정 페이지 진입을 보호하는 데 사용됩니다.전역적으로 설정, 라우트에서 설정, 컴포넌트 내에서 설정하는 방법이 존재합니다.

상태 관리란, Pinia란, Pinia에 저장해야 할 것, 저장하지 말아야 할 것, storeToRefs, mapStores. $patch, $reset

axios 컴포저블 함수 구현

Transition을 이용해나타났다 사라지기, 슬라이드 효과를 만들어 보는 예제 코드 필요Teleport 컴포넌트로 모달 만들기?

Vite 공식 홈페이지에서 env검색, 내용을 정리.vite.config.js에서 설정이 가능한 내용들과, js파일단에서 그 정보들을 어떻게 사용할 수 있는지 정리T우주 프로젝트에서는 어떻게 사용하고 있는지도 정리.alias에 대해서도 정리해볼까?

Vue에는 다양한 히스토리 모드가 있다.Hash - createWebHashHistory()History - createWebHistory()Memory - createMemoryHistory()각각에 대해 자세히 알아볼 것.SPA, SSR, CSR에 대해서 Vue와

(강의에 나온 내용이라서 번외로 이전 포스팅에 적어야 할 내용)ref로 object 타입을 선언하는 경우와 reactive로 object 타입을 선언하는 경우의 차이점.ref로 선언하면 새로운 object를 덮어씌워도 반응형을 잃지 않고, reactive로 선언하면 반

PostDetailView와 PostEditView는 파라미터를 받는 구조로, 동적 라우팅이라고 함.

인프런 짐코딩을 수강 후, 강의 내용을 바탕으로 정리뷰 라우터는 Vue.js를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 Vue.js의 공식 라우터 입니다.URL을 따라 어떤 페이지를 보여줄지 매핑해주는 라이브러리.기본 세팅이 된 Vue 프로젝트에 아래와

Vue의 동적 컴포넌트는 동적으로 컴포넌트를 전환할 수 있는 기능을 제공합니다. 하나의 컴포넌트 내에서 조건에 따라 다른 컴포넌트를 동적으로 렌더링하고자 할 때 매우 유용합니다. Vue의 component 태그를 사용하여 이를 구현할 수 있습니다.component 태그

은 Vue 3에서 도입된 새로운 컴포넌트 정의 방식으로, Composition API를 더 간결하게 사용할 수 있도록 만들어진 특별한 script 구문입니다. 기존에 setup() 함수를 사용하는 방법보다 더 직관적이고 간결하게 컴포넌트를 작성할 수 있게 도와줍니다.s

Vue에서 Template Refs는 컴포넌트 내의 특정 DOM 요소나 자식 컴포넌트에 직접 접근할 수 있게 해주는 기능입니다. 이를 통해 DOM 조작이나 자식 컴포넌트의 메소드 호출 등, 보다 세부적인 제어가 가능합니다. 일반적으로 Vue는 데이터를 기반으로 UI를

Vue의 Provide와 Inject는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전역적으로 전달할 때 사용하는 API입니다. 부모-자식 관계에서 직접적인 props 전달 대신, 중첩된 컴포넌트 구조에서 멀리 떨어진 컴포넌트 간에도 데이터를 공유할 수 있습니다. 즉,

Slot은 컴포넌트 외부에서 컨텐츠를 전달받아, 전달 받은 컨텐츠를 노출하고자 할 때 사용합니다.FancyButton이라는 자식 컴포넌트에 Click이라는 문자열 텍스틑 전달하였습니다.FancyButton template 내부의 slot 태그가 전달 받은 컨텐츠로 교체

컴포넌트 등록에는 전역 등록과 지역 등록이 있습니다.AppCard를 사용하는 곳에서 위 코드와 같이 props를 전달할 수 있습니다(이전에 공부했던 대로, 아래 두 예제는 v-bind를 통해 전달했기 때문에 :title로 전달한 모습입니다).props의 동작 방식을 간

종종 반응형 상태가 변경되었을때 다른 작업(api call 등)을 수행해야 하는 경우가 있습니다. watch 함수를 이용하면 반응형 상태가 변경될 때마다 특정 작업을 수행할 수 있습니다.위처럼 코드를 작성 후 vue devtools 내에서 message 값을 변경하면

이벤트 처리는 v-on 디렉티브로 사용할 수 있고, @단축 표현으로 많이 사용됩니다.위 코드와 같이 이벤트 처리를 하는 것은 이전 글에서 많이 다루었으니 다루지 않았던 내용을 기록해 보겠습니다.@click="" 내부에서 $event로 이벤트 객체에 접근할 수 있습니다.

디렉티브는 v- 접두사가 있는 특수 속성입니다. 단어의 의미처럼 DOM요소에게 "~하게 작동하라" 라고 지시하는 지시문입니다. 조건부 렌더링이 필요한 경우 v-if, v-else, v-else-if, v-show를 사용할 수 있습니다.v-if는 실제로 렌더링됩니다. v

비즈니스 로직에 의한 화면 노출 변화가 필요할 때, HTML 요소에 클래스를 붙이거나 떼어야 할 필요가 있습니다. 이럴때 Vue의 클래스 바인딩을 사용할 수 있습니다.:class 바인딩을 이용하여 active 클래스와 text-danger 클래스를 선택적으로 부여하는

템플릿 문법은 간단히 사용하면 매우 편리하나, 템플릿 표현식 내 코드가 길어질 경우 가독성이 떨어지고 유지보수가 어려워질 수 있습니다. 짧은 예시 코드를 들어 보겠습니다.이 코드를 어떻게 개선할 수 있을까요?위와 같은 computed를 작성 후,템플릿 코드를 이렇게 수

반응형 상태 선언하기 ref 함수 반응형 상태 구조 분해하기(toRef) readonly를 이용하여 반응형 객체의 변경 방지

setup 함수는 Composition API 사용을 위한 진입점 역할을 합니다. Lifecycle Hook에 대해 공부할 때 정확한 호출 시점을 다시 공부하도록 하겠습니다. 우선, 인스턴스가 생성되기 전에 실행된다고 알고 넘어가도록 하겠습니다.setup 함수의 첫 번

Vue3 주요 특징 Vue3는 Vue.js의 최신 버전입니다. SPA 개발을 위한 프레임워크로 , MVVM(Model-View-ViewModel)을 기반으로 합니다. Vue 3는 여러 가지 성능 개선과 기능 추가가 이루어진 버전으로, 특히 Composition API라