개발 일기

Vue router란? vue.js의 공식 라우터로서 SPA를 쉽게 만들 수 있게 도와주는 아주 중요한 기능을 갖고 있다. 기본적으로 컴포넌트 기반의 라우터(URL)를 지정할 수 있고 세밀한 네비게이션 컨트롤이 가능하다. 본인은 CLI를 통하여 Vue 프로젝트를 시작했기때문에 vue router가 자동적으로 설치되었다. CLI를 통한 설치는 아래의 링크를 참고하길 바란다. 2020.12.20 - [Vue.js] - [Vue.js 시작하기] - Vue.js 설치 [Vue.js 시작하기] - Vue.js 설치 Vue.js 공식 페이지에 다양한 설치 방법이 나와있지만 나는 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 CLI를 사용하여 설치할 것이다. 다른 설치 방법에 대해 참고할 사람은 아래의 페이 de..

2021.03.26 - [Vue.js] - [Vue.js] 로그인 기능 구현하기 [Vue.js] 로그인 기능 구현하기 Vue.js로 로그인을 하기 위해서 프론트측에서는 로그인 하기 위한 view와 상태관리를 할 수 있는 store(Vuex)가 필요하다. Vuex 관련 내용은 아래 글을 참고하길 바란다. (물론 Vuex를 사용하지 않고도 developerjournal.tistory.com 위에 글과 이어진다. 추가로 새로고침을 하고 Vuex 상태가 초기화 되는 것을 막고싶은 사람들은 모두 참고하면 된다. Vuex 문제점 새로고침을 하면 Vuex의 store state가 모두 초기화가 된다. 이는 Vuex는 Vue의 플러그인이기 때문이다. 새로고침을 하면 Vue 인스턴스가 소멸했다가 다시 생성되는 Vue의 ..

Vue.js로 로그인을 하기 위해서 프론트측에서는 로그인 하기 위한 view와 상태관리를 할 수 있는 store(Vuex)가 필요하다. Vuex 관련 내용은 아래 글을 참고하길 바란다. (물론 Vuex를 사용하지 않고도 구현은 할 수 있지만 추적용이성이 현저히 떨어질 것이라고 생각한다.) 2021.01.19 - [Vue.js] - [Vue.js 시작하기] - vuex로 중앙에서 상태 관리 하기 [Vue.js 시작하기] - vuex로 중앙에서 상태 관리 하기 Vuex란? Vue.js 애플리케이션에 사용할 수 있는 상태 관리 라이브러리다. 이를 사용하면 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 할 수 있다. 상단 인스턴스는 여러개의 많은 하위 컴포넌 developerjournal.tistory.com..

오늘 글은 아래 글과 이어진다. 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는 인스턴스가 생성되고 나서 가장 처..