instance 모든 Vue 어플리케이션은 createApp 함수를 사용해서 intance를 만드는 것부터 시작이다. import { createApp } from 'vue' const app = createApp({ /* root component options */ }) root component instance를 생성하기 위해 사용하는 createApp 함수에는 실제 컴포넌트를 넘겨야하고 모든 어플리케이션은 자식으로 다른 컴포넌트를 가질 수 있는 "root component"가 존재해야 한다! 아래처럼 root component로 사용할 컴포넌트를 임포트해서 createApp 함수에 넣어주면 된다! import { createApp } from 'vue' // root component import..

Vue-CLI Vue-CLI는 기본 CRA와 마찬가지로 webpack과 babel 같이 복잡한 설정을 별도로 하지 않고도 Vue 개발 환경을 설정해주는 아주 편리한 도구이다. 우선, npm 혹은 yarn이 설정되어 있어야 하고 node도 설치되어 있어야 한다. npm과 node가 세팅되어 있다면 아래 명령어를 이용해 vue를 설치하면 된다. # npm npm install -g @vue/cli # yarn yarn global add @vue/cli Vue-CLI로 첫 프로젝트 만들어보기! 아래 명령어를 통해 간단히 Vue 프로젝트를 생성할 수 있다. vue create [프로젝트명] 위 명령어를 통해 vue 프로젝트를 생성하려고 하면 아래처럼 Default 옵션을 선택할 지, 아니면 여러 기능을 직접 ..

새로 입사한 회사의 프론트엔드 스택이 Vue.js이기 때문에 빨리 익혀야 할 것 같아서 공부를 시작한다. React에 대해 어느정도 익숙해져 있는 상태이므로 큰 어려움은 없을 것 같다고 생각한다! 항상 공식 문서는 옳으니까 공식문서를 읽으면서 공부를 진행하려고 한다 https://vuejs.org/guide/introduction.html Introduction | Vue.js Join in-person 1-3 November 2022, Toronto, Canada Join the Vue community in-person for VueConf Toronto from 1-3 November 2022! Use the code VUEJS to get 25% off on tickets! vuejs.org Vu..

이벤트 버블링 (Event Bubbling) 어떠한 특정 요소에서 이벤트가 발생하면 이 요소에 할당된 이벤트가 실행되고 가장 먼 조상까지 해당 이벤트가 전파되는 특성이다. 예를 HTML 마크업이 a > div > span와 같고 a, div, span을 모두 클릭 시 alert가 나타나는 이벤트를 가지고 있다하면 span 태그를 클릭하면 span < div < a 순으로 이벤트가 전파된다. 아래 예시를 통해 좀 더 살펴보자! a b c 제일 하위 태그의 이벤트를 발생시키면 가장 먼 조상까지 이벤트가 전파된다. 이벤트 캡쳐 - Event Capture 이벤트 버블링과 반대로 어떠한 특정 요소에서 이벤트 발생하면 이 요소에 할당된 이벤트가 실행되고 가장 먼 자손 까지 해당 이벤트가 전파되는 특성이다. 예를 ..