IT기록 isaac

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

[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 프로젝트, 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..