Isaac Kim Dev Blog

[Vue.js | Vue 3] Vue.js 시작하기 (설치, 환경설정, CLI, CDN) Vue.js는 CLI, CDN 방식의 프로젝트 개발 환경을 제공하고 있는데, CLI를 권장합니다. Vue.js CLI 먼저 Vue.js CLI방식으로 프로젝트 개발 환경을 세팅합니다. 메인 페이지의 Install 버튼을 눌러서 Vue.js 개발 환경을 세팅할 수 있는데요. 먼저 Node.js를 설치해야 합니다. Windows 사용자라면, Node.js공식 홈페이지에 접속해서 Node.js LTS 버전을 설치해주시면 되고, 리눅스(Linux)/맥(Mac) 사용자라면 쉘 명령어로 설치할 수 있습니다. Node.js가 설치가 되었다면, 다음 명령어를 사용해 Vue 빌드 툴의 설치와 Vue 프로젝트를 생성할 수 있습니다. ..

[Vue.js] Vue CLI 프로젝트 : Mixin Vue.js에서 Mixin은 공통으로 사용되는 기능을 한 곳에 모아서 관리하는 방식을 말합니다. 코드를 여러 컴포넌트에서 반복해서 사용하지 않고 한 곳에 모아 두고 mixins 옵션을 통해 공통 코드를 불러와 쓴다면 코드의 중복을 줄일 수 있습니다. 다음 캡처한 이미지를 보면, 부모 컴포넌트와 자식 컴포넌트에서 각각 날짜와 시간을 출력하는 것을 확인할 수 있습니다. 다음 이미지에서 보이는 getDateAndTime 함수는 부모 컴포넌트와 자식 컴포넌트에서 사용되고 있습니다. 아래 보이는 이미지는 methods에 직접 함수를 등록해서 사용하는 것이기 때문에 각 컴포넌트에 작성되어 있으므로 코드의 중복이 발생했다고 볼 수 있습니다. 부모 컴포넌트와 자식 ..

[Vue.js] Vue CLI 프로젝트 : props, $emit 부모-자식 컴포넌트 간 Object 전달 이전 글 2022.02.13 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Props 데이터 수정하여 부모 컴포넌트에도 알리기 $emit() 2022.02.13 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : props의 활용 2022.02.12 - [JS & Framework/vue.js] - [Vue.js] Vue.js CLI 프로젝트 : 부모 자식 간의 데이터 전달 Props 오늘은 부모-자식 컴포넌트 간의 데이터를 전달할 때 Object 데이터를 전달하는 것을 보도록 하겠습니다. # 부모 컴포넌트 부모..

[Vue.js] Vue CLI 프로젝트 : Props 데이터 수정하여 부모 컴포넌트에도 알리기 $emit() 이전 글 2022.02.13 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : props의 활용 2022.02.12 - [JS & Framework/vue.js] - [Vue.js] Vue.js CLI 프로젝트 : 부모 자식 간의 데이터 전달 Props 2022.02.12 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vuetify Buttons 버튼 사용하기 Props를 사용하면 자식 컴포넌트에서는 부모 컴포넌트의 데이터를 받아서 사용할 수 있습니다. 그런데, 자식 컴포넌트에서 부모 컴포넌트에서 받아온 데이..

[Vue.js] Vue CLI 프로젝트 : props의 활용 이전 글 2022.02.12 - [JS & Framework/vue.js] - [Vue.js] Vue.js CLI 프로젝트 : 부모 자식 간의 데이터 전달 Props 2022.02.12 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vuetify Buttons 버튼 사용하기 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : 컴포넌트(Component) 등록과 사용 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vue 파일 공부하기 2022.02.11 - [JS & Fram..

[Vue.js] Vue.js CLI 프로젝트 : 부모 자식 간의 데이터 전달 Props 이전 글 2022.02.12 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vuetify Buttons 버튼 사용하기 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : 컴포넌트(Component) 등록과 사용 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vue 파일 공부하기 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트, vuetify 설치하기 2022.02.11 - [JS & Fr..

[Vue.js] Vue CLI 프로젝트 : Vuetify Buttons 버튼 사용하기 이전 글 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI로 시작하기 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트, vuetify 설치하기 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vue 파일 공부하기 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : 컴포넌트(Component) 등록과 사용 이전 글에 이어서 글을 작성하겠습니다. App.vue 파일의 코드는 아래 이미지와 같..

[Vue.js] Vue CLI 프로젝트 : Vue 파일 공부하기 Vue CLI 프로젝트 설치 및 Vuetify 플러그인도 설치를 하게 되면 프로젝트의 구조는 아래 이미지와 같이 복잡한 구조를 나타내게 됩니다. App.vue 파일을 main 페이지로 생각하고 App.vue 파일부터 확인해봅니다. 아래 이미지에서 왼쪽이 처음 소스고, 오른쪽 이미지가 변경한 소스인데요. 태그 안에 html 코드를 넣으면 메인 페이지가 아래 이미지 [ 왼쪽에서 오른쪽으로 ] 와 같이 변경되는 것을 확인할 수 있습니다. 태그의 바인딩을 사용해서 작업도 해보죠. data에 세팅된 title의 값 "Hello Vuetify"를 바인딩된 것을 확인할 수 있습니다. 버튼하고 버튼의 간단한 조작도 추가해봅니다. 다음과 같은 화면을 확인할..

[Vue.js] Vue CLI로 시작하기 Vue cdn방식으로 학습을 하다가 좀 더 깊게 알아보기 위해 Vue CLI로 시작하는 방법을 알아보았습니다. Vue CLI로 시작하기 위해서는 node.js, npm이 설치되어 있어야 합니다. 설치되어있지 않으면 node.js를 설치해줍니다. node.js 와 npm 설치 여부를 먼저 확인합니다. # node.js, npm 설치 확인하기 $ node --verison $ npm --version # vue cli 확인 vue cli도 설치되어 있는지 확인합니다. $ vue --version # vue cli 를 설치합니다. vue cli를 설치하려면 npm을 사용합니다. -g 플래그를 사용해 전역으로 설치합니다. 명령어 $ npm install -g @vue/c..