Component 구성요소 Vue의 컴포넌트는 .vue 라는 확장자를 가진 파일로 구성되어 있고 template, script, style 부분으로 나뉘어져 있다. hello Vue! template 부분에는 실제 HTML을 작성하고 script 부분에는 컴포넌트 관련 로직들과 함수 및 state와 props 등에 관련한 내용을 작성하고 style 부분은 css를 작성한다. template 부분은 필수로 작성되어야 하며 script와 style 부분은 필요하지 않을 경우에는 삭제해도 된다. 그리고 template, script, style 부분은 아래처럼 외부 파일을 불러서 쓸 수도 있다. scoped style style 태그에 scoped라는 옵션을 추가하면 해당 컴포넌트에서만 적용되는 스타일을 의미..

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..