개발 일기

Vuex란? Vue.js 애플리케이션에 사용할 수 있는 상태 관리 라이브러리다. 이를 사용하면 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 할 수 있다. 상단 인스턴스는 여러개의 많은 하위 컴포넌트로 설계되어 구성된다. 여태까지 컴포넌트들끼리의 데이터 전달은 이벤트버스 등을 사용하였지만 공동의 상태를 공유하는 여러 컴포넌트가 있다는 등 프로젝트의 규모가 커진다면 이벤트 추적 관리에 힘들어질 수 있다. 이는 싱글톤으로 관리되지 않아 컴포넌트가 공유된 상태를 추출하지 않을 수 있다는 말과 같다. 이를 효율적으로 관리하기 위해서는 vuex 라이브러리를 사용하면 된다. 설치 npm install vuex --save store란? vuex로 상태관리를 하기 위해서는 store에 대해 먼저 이해해야 한다. 쉽..

Axios란? javascript 어플리케이션에서 서버 통신을 하기 위한 HTTP 통신 라이브러리다. 착각하면 안되는 것은 오직 Vue.js에 종속되는 것이 아니라 다른 js 어플리케이션에서도 일반적으로 많이 사용된다는 사실이다. github.com/axios/axios axios/axios Promise based HTTP client for the browser and node.js - axios/axios github.com 설치 기존 프로젝트에서 axios로 서버와 통신 하기 위해서는 이를 node_modules에 설치해야한다. 이때 다음과 같은 명령어를 사용하면 된다. npm install axios 이후 /node_modules에 axios가 추가된 것을 확인할 수 있다. main.js // ..

Vue에는 변화를 감지하는 프로퍼티인 computed와 watch가 있다. 비슷한 성격탓에 공식 문서에도 함께 다루는 것을 볼 수 있다. 충분히 헷갈릴 수 있지만 목적을 보면서 사용한다면 상황에 맞게 잘 쓸 수 있다. kr.vuejs.org/v2/guide/computed.html computed와 watch — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Computed 특정 data가 변화되었을 때, 복잡한 계산식을 계산하여 값을 return 해주는 속성이다. {{ doubleCount }} 클릭하면 두배 위의 예제에서는 버튼을 클릭하면 count가 +1이 되는데 이의 변화를 감지하는 computed에서 count의 두배를 계산해주고 있다. 상태 변화 값에 ..

Vuetify란? Vuetify는 Vue.js를 위한 컴포넌트 라이브러리이며, Material Design Framework다. 쉽게 말해 vue 에서 사용할 수 있는 용이한 UI 라이브러리라고 할 수 있다. vuetifyjs.com/en/ Vuetify — A Material Design Framework for Vue.js Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create be... vuetifyjs.com Vuetify 설치 Vuetify를 기존 프로젝트에 적용하려면 Vuetify를 node_modules에 반드시 설치해야한다. 이때 npm을 사용..

라이프사이클이란? 인스턴트나 컴포넌트가 생성되고 사라지기 까지에 몇 단계를 거치게 된다. 이는 미리 정의 되어있으며 우리 눈에 보여지고 사라지기 까지의 단계를 일컫는 말이라고 생각하면 쉽다. 위는 라이프사이클 다이어그램을 뜻한다. 라이프사이클은 크게 4단계로 나누면 1. 인스턴스의 생성 (create) 2. 생성된 인스턴스를 화면에 부착 (mount) 3. 화면에 부착된 인스턴스의 내용 갱신 (update) 4. 인스턴스가 소멸 (destory) 로 분류할 수 있다. 라이프사이클은 위의 4단계의 전후를 합쳐서 총 8개로 되어있다. 8단계의 라이프사이클 설명과 주요 라이프사이클은 예제를 통해서 사용 예시를 보도록하겠다. beforeCreate 먼저 beforeCreate는 인스턴스가 생성되고 나서 가장 처..

컴포넌트로 화면을 구성하게 되면 같은 웹페이지라도 데이터를 공유할 수 없다. 이는 컴포넌트마다 고유한 유효 범위를 갖지 때문이다. 그렇다면 데이터 전달을 하려면 어떻게 해야할까? 상위-하위 컴포넌트 간의 데이터 전달 방법 우선 상위 - 하위 컴포넌트 간의 데이터 전달 방법이다. 상위 -> 하위 로는 props라는 특별한 속성을 전달하고, 하위 -> 상위 로는 기본적으로 이벤트만 전달 가능하다. 상위-하위 컴포넌트 간의 데이터 전달 방법에 대해 설명하기 위해 ParentComponent에 ChildComponent를 등록한 모습이다. Root Instance (main.js) └─ 최상위 컴포넌트 (App.vue) └─ ParentComponent └─ ChildComponent => 현재 컴포넌트 트리 ..

저번글 (2020/12/20 - [Vue] - Vue.js 시작하기 - Vue.js 설치)에서 Vue.js 프로젝트를 하기위해 설치를 하였지만 Vue.js 코딩을 시작하기 위해서 알아야 할 기본적인 것들에 대해 설명을 해보려한다. Instance 모든 Vue 애플리케이션의 필수, Vue 생성자로 인스턴스를 만드는 것부터 시작한다. 인스턴스를 생성할 때는 옵션 객체들을 전달해야하고 이는 사용자가 원하는 동작에 따라 다르다. new Vue({ //옵션들 }) Vue 앱은 new Vue를 통해 만들어진 Root Instance로 구성되고, 중첩이 가능하고 재사용이 가능한 컴포넌트 트리로 구성된다. 우리 프로젝트에 빗대어 표현하자면 이런 모양이 나오겠다. Root Instance (main.js) └─ 최상위 ..

Vue.js 공식 페이지에 다양한 설치 방법이 나와있지만 나는 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 CLI를 사용하여 설치할 것이다. 다른 설치 방법에 대해 참고할 사람은 아래의 페이지를 참고하면 될것같다. kr.vuejs.org/v2/guide/installation.html 설치방법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org CLI 이용하여 프로젝트 만들기 vue init webpack project 다음과 같은 명령어를 사용하면 Vue 프로젝트가 생성되게 된다. 이때, npm start 또는 npm run build 명령어를 사용한 이후, https://localhost:8080에 접속한다면 Vue 애플리케이션 실행화면을 볼 수 있다. V..

vue.js로 프로젝트를 진행하면서 공부했던 내용을 앞으로 정리하려고 한다. Vue.js 란? 프로그레시브 자바스크립트 FE 프레임워크 => 점진적으로 다른 라이브러리를 채용해 화면에 나타나는 View에 관한 처리 외에도 다른 일을 해낼 수 있음을 나타냄. => 또한 화면에 보여지는 부분에만 초점을 맞춰 문서 객체 모델을 관리해준다. Vue.js를 포함한 대표적 FE 프레임워크 Angular 2010 출시 React 2013 출시 Vue 2014 출시 ( 비교적 최신의 프레임워크) Angular 문법으로부터 영감을 받아 일부 문법(데이터 바인딩 등)들이 유사함. 라이프사이클이 Vue가 React보다 더 심플하고 직관적이어서 학습에 있어 더 용이하다는 장점. 더 많은 프레임워크와의 비교. https://k..