Front-end 개발

📄 본문Vue 3에서는 새로운 기능 중 하나로 ****를 도입했습니다. 이 기능을 통해 컴포넌트의 DOM을 현재 트리 구조가 아닌 다른 위치로 이동(render) 시킬 수 있습니다.특히 모달, 툴팁, 드롭다운처럼 레이어가 겹쳐지거나 포지션이 자유로워야 하는 UI 구현에 유용하게 활용됩니다.1. 🧠 Teleport란?는 Vue 3에서 새롭게 도입된 내장 컴포넌트입니다.기본적인 역할은 특정 DOM 노드로 컴포넌트의 내용을 이동시키는 것입니다.✅ 기본 문법 to 속성에는 콘텐츠를 렌더링할 타겟 요소의 CSS 선택자를 지정합니다.실제 DOM은 그 위치로 "텔레포트"되지만, Vue 컴포넌트 계층에는 영향을 주지 않습니다.2. 🧪 왜 필요할까?일반적인 구조에서는 모달이 특정 컴포넌트 안에 위치하면, CSS ..

📄 본문Vue 생태계에서 상태 관리는 필수적인 부분입니다. 오랫동안 Vue 공식 상태 관리 라이브러리로 자리잡았던 Vuex가 있지만, Vue 3와 Composition API 시대에 맞춰 더 가볍고 직관적인 Pinia가 등장하며 많은 개발자들의 관심을 받고 있습니다.이번 글에서는 Vuex의 한계와 Pinia의 장점, 그리고 Vuex에서 Pinia로 상태 관리 코드를 마이그레이션하는 실습 예제를 소개합니다.1. Vuex의 한계와 Pinia 등장 배경Vuex는 Vue 2 시절부터 상태 관리의 표준으로 사용되었지만, 몇 가지 불편한 점이 존재합니다.복잡한 boilerplate 코드타입스크립트 지원이 번거로움Composition API와의 자연스러운 연동 부족이에 대응해 Vue 팀이 공식적으로 권장하는 차세대..

📄 본문Vue 3가 출시되면서 가장 큰 변화 중 하나는 Composition API의 도입입니다. 기존 Options API와는 구조와 작성 방식이 많이 달라져, 처음 Vue 3를 접하는 개발자라면 혼란을 겪을 수 있습니다.이번 글에서는 Vue의 두 가지 API 방식인 Composition API와 Options API의 차이점을 비교하고, 각각의 장단점과 활용 예제를 소개합니다.✅ Options API란?Vue 2에서 주로 사용된 방식으로, 컴포넌트를 정의할 때 data, methods, computed, watch 등 옵션을 명확하게 구분하여 작성합니다. {{ message }} Update 📌 장점구조가 명확해 초보자가 이해하기 쉬움Vue 2 경험자에게 익숙한 방식빠르게 작성 가..

1. Lottie란? 웹 및 모바일 애플리케이션에서 벡터 애니메이션을 쉽게 사용할 수 있게 해주는 라이브러리입니다. Lottie는 Adobe After Effects에서 만든 JSON 파일을 로드하여 애니메이션을 렌더링합니다. 2. lottie 사용방법? -라이브러리 설치 Vue 3 + Typescript Support npm install lottie-web-vue OR yarn add lottie-web-vue Vue 2 (v2 사용시 1.2.1로 설치하세요.) npm install lottie-web-vue@1.2.1 - Vue 2.x import Vue from 'vue' import LottieAnimation from 'lottie-web-vue' Vue.use(LottieAnimation);..