주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

설치 npm i vuex store 폴더에 관리하기 위해 store폴더, 파일 생성 store/store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { //... }, getter: { //... }, mutations: { //... }, action: { //... } }) 이런 형태로 작업하면 된다. - state: 여러 컴포넌트에 공유되는 데이터 - getter: 연산된 state값을 접근하는 속성 - mutations: state값을 변경하는 이벤트 로직이나 메서드 - actions: 비동기 처리 로직을 선언하는 메서드 그리고 store 파일을 등록해줘야..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn state나 props가 늘어나면 관리가 힘들어진다. 그리고 props를 넘기게될때 자식에 자식에 자식의 컴포넌트가 있다면 복잡해진다. 이떄 useReducer를 써서 관리할 수 있다. useReducer를 배우면 redux랑 비슷한 효과를 낼 수 있다. contextAPI + useReducer를 쓸 경우 redux를 사용안해도 되지않나?라고 하는경우들이 있는데 대체하기는 어렵다고 한다. 거창한 redux가 필요없을 경우 (작은 프로젝트)에는 대체하는 형식으로 쓸수는 있다고 한다. 왜냐면 contextAPI와 useReducer를 쓰..

EventBus도 힘들다 하면 VueX를 사용합니다. props의 늪에서 벗어나기 위해 사용한다고 합니다만, 저는 큰 프로젝트는 한 적이 없어서 와닿지는 않았습니다. 하지만 실무에서 쓰려면 알아야겠죠.? vueX는 데이터를 저장하는 공간이고 vuex는 데이터를 state라고 부릅니다. 이 방식은 data를 .vue파일에 저장하지 않고 .js파일에서 관리하는 부분입니다. vueX는 4개의 기능을 알아야 합니다. state 데이터 저장공간 getters 저장한 데이터 가져오기 mutations 데이터 업데이트 actions mutations 실행하기 (ajax요청, mutations동작) vuex를 install해줍니다. npm install vuex 서버가 켜져있을때 npm install하면 오류날 때도 ..