Vuex는 Vue.js 애플리케이션에서 사용할 수 있는 상태관리 라이브러리입니다. 애플리케이션에 존재하는 모든 컴포넌트들에서 접근 가능한 중앙 집중식 데이터 저장소이고, 이를 통해 모든 데이터의 흐름을 중앙에서 관리할 수 있습니다. 설치방법 vuex를 사용하고자하는 프로젝트 경로에 가서 아래 명령어를 통해 Vuex 라이브러리를 설치할 수 있다. npm install vuex Vue Router와 마찬가지로 Vue.js 애플리케이션에 Store를 주입해 모든 컴포넌트에서 this.$store와 같이 접근할 수 있게 할 수 있다. import Vuex from 'vuex'; const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(..
Vue.js 로 개발을 하기 위해서 거의 필수적으로 사용되는 Vue Router 라이브러리에 대해서 공부해보자. 기타 블로그보다 공식 홈페이지가 더 잘 되어 있어서 공식 홈페이지를 기반으로 설명할 예정이고, 프로젝트를 하며 고민했던 부분이나 참고할만한 부분을 추가로 작성하려고 한다. router.vuejs.org/kr/ Vue Router router.vuejs.org 내가 이해한 Vue Router는 어떤 URL이 입력되었을 때 어떤 컴포넌트를 보여줄지를 매칭시켜주는 역할이다. 설치방법 Vue Router를 사용하고자 하는 프로젝트 경로에가서 다음 명령어로 해당 라이브러리를 설치한다. npm install vue-router Vue Router를 위한 경로를 별도로 생성하지 않고 main.ts 파일에서..
개인적으로 Vue.js 를 사용해 프론트를 구성할 일이 생겼다. 기본적으로 Vue.js 를 사용하기 위한 환경 구성 방법에 대해서 소개하고, 프로젝트 구조에 대해서도 살펴보려 한다. Vue.js 환경 구성 우선 Vue.js 를 설치하기전에 앞서 npm 명령어를 사용해야 하기 때문에 Node.js 를 설치해야 한다. 1. Node.js 설치 nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 링크에서 해당 운영체제에 맞는 Node.js를 설치한다. 설치 파일을 실행한 후 "다음"을 계속 눌러도 상관없다. (설치 경로를 수정하고 싶다면 중..