Isaac Kim Dev Blog

[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 프로젝트 : 컴포넌트(Component) 등록과 사용 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vue 파일 공부하기 지난 글에 이어서 글을 작성합니다. 이번 글에서는 Vue 컴포넌트(Component)를 등록하고 사용하는 방법을 알아보겠습니다. # 컴포넌트를 사용하는 방법 1 먼저 Vue CLI 프로젝트 구조에서 App.vue 파일과 같은 위치에 Home.vue라는 파일을 생성합니다. Home.vue 파일은 다음과 같이 작성합니다. 그리고 App.vue 파일로 돌아와서 태그 제일 상단에 위에서 만든 home 컴포넌트에 대한 정보를 입력합니다. import homeComponent from "./home...

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

[Vue.js] Vue CLI 프로젝트, vuetify 설치하기 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI로 시작하기 Vue CLI 프로젝트 시작에 이어서 bootstrap과 같은 vue용 Component 라이브러리인 vuetify를 설치합니다. # vuetify 설치하기 $ vue add vuetify 선택 옵션이 나오는데 저는 Vuetify 3 Preview (Vuetify 3) 을 선택해봤습니다. 성공적으로 설치가 된 것 같습니다. 이제 소스를 보면 많은 변화들이 생겨 있는 것을 확인할 수 있습니다. vue project를 실행해보겠습니다. # Vue 프로젝트 실행 명령어 $ npm run server http://localhost:8080..

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

[Vue.js | Vue 2] Vue.js 시작하기 (입문) Vue.js에 대해서 공부를 하기 시작하면서 공부한 내용을 공유하고자 글을 작성합니다. 틀린 부분이 있다면 지적해주시고 고쳐갈 수 있도록 댓글 남겨주시면 감사하겠습니다. Vue.js는 프론트엔드 프레임워크로 현재 가장 인기 있는 프론트 엔드 기술 중 하나입니다. react.js, vue.js, angular.js 등이 있는데요. 저는 그 중 Vue.js가 가벼우며 접근하기가 비교적 쉽다(?)는 얘기를 듣고 Vue.js를 먼저 공부하게 되었습니다. Vue.js의 시작은 매우 간단합니다. vue.js 파일을 html의 프로덕션 환경인 경우 아래 CDN으로 사용합니다. 위 vue.js 파일 혹은 cdn 으로 링크를 걸었다면, 이제 vue.js를 사용..

[Vue.js] Vue Object - Vue 객체 Vue 개발은 Vue 객체를 생성하는 것으로 시작됩니다. Vue development starts with creating a Vue object. Vue 앱은 Vue 함수에서 Vue 인스턴스를 생성하는 것으로 시작합니다. A Vue app starts by creating a Vue instance from a Vue function. Vue object를 생성합니다. Create a Vue object. var vm = new Vue({ // options }); Vue 인스턴스를 생성할 때 주로 사용되는 옵션으로 el, data, methods 가 있습니다. The most commonly used options when creating a Vue..

[Vue.js | Vue 2] Getting started with vue.js vue.js 시작하기 Getting started with vue.js vue.js는 대화형 웹 인터페이스, JS 프레임워크입니다. vue.js is an interactive web interface and JS framework. vue.js는 MVVM의 디자인 패턴을 사용합니다. vue.js uses the design pattern of MVVM. View - View Model - Model vue.js를 개발하는 방법은 여러 가지가 있지만 우리는 CDN 방식을 사용합니다. There are many ways to develop vue.js, but we use the CDN method. CDN : Content ..