개발 일기

오늘 글은 아래 글과 이어진다. 2021/01/19 - [Vue.js] - [Vue.js 시작하기] - vuex로 중앙에서 상태 관리 하기 [Vue.js 시작하기] - vuex로 중앙에서 상태 관리 하기 Vuex란? Vue.js 애플리케이션에 사용할 수 있는 상태 관리 라이브러리다. 이를 사용하면 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 할 수 있다. 상단 인스턴스는 여러개의 많은 하위 컴포넌 developerjournal.tistory.com 모듈화 모듈화를 하는 이유는 클래스도 성격별로 세분화되는 것처럼 이후에 성격이 다른 전역변수가 여러개가 되는 경우를 다루기 위해서다. 또한 부가적인 기능으로는 새로고침을 하면 store의 정보는 사라지게 되는데, 모듈화를 하게 되면 항상 저장하고 싶은 st..

다국어 처리란? 어느 프로젝트에서나 다국어처리가 필요하다. 왜냐하면 언어 string이나 Image 등 국가나 문화에 관련되는 모든 것들은 리소스 별개로 관리해야하기 때문이다. 그렇다면 다국어 처리란 무엇일까? 다국어 처리는 웹 브라우저를 사용하는 국가에 따라 다양한 언어 등을 지원하는 서비스를 의미한다. 이는 기술 변경 없이 바로 적용할 수 있어야한다. Vue.js에서는 vue-i18n 라이브러리를 사용하여 쉽게 프로젝트의 다국어 처리를 해줄 수 있다. kazupon.github.io/vue-i18n/started.html#html Getting started | Vue I18n Getting started NOTE We will be using ES2015 in the code samples in t..

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