Vue

현재 Vuex에 loginState라고 저장해 두고 로그인 상태를 판단하도록 만들었다. 로그인을 진행하면 true로 변경되는 값. 그런데 여기서 새로고침을 하면? false로 데이터가 바뀌게 된다. Vuex에서 새로고침 하면 state가 날라가는 이유가 브라우저 메모리에 저장되기 때문이다. SPA는 페이지를 옮기거나 새로고침하는 것이 아니라 데이터가 보존되는데, 새로고침을 하는 순간 브라우저 메모리가 날아가서 state가 없어지는 것. 우리는 이걸 막기 위해 스토리지를 이용하거나 쿠키를 이용해야한다. vuex-persistedstate 해당 라이브러리를 통해 문제를 해결할 수 있다. 초기화 이슈가 많아지면서 누군가 npm을 만들어두었기에, 잘 이용만 하자 npm install vuex-persisteds..

Vue를 사용하는데 데이터 관리가 너무 어려웠다. 프로젝트가 엄청 큰 것이 아니라서 도입하진 않았었는데, 이제 슬 도입해서 데이터 관리하는 게 나중에 가서도 편할 것 같다는 생각이 들어서 기록해보려고 한다. 아래 명령어로 Vuex 설치 npm install vuex@next 이지하게 설치 완료. 이제 Vuex로 데이터를 관리하기 위해 store.js를 생성해 준다. 이제 Vuex의 개념을 다시 살펴봐야 한다. Vue의 상태를 관리하는 패턴이자 라이브러리. 모든 컴포넌트들의 중앙 저장소 역할을 담당 하나의 저장소에 데이터를 관리하고, 컴포넌트에서 사용하니 유연하고 편리하게 데이터 공유가 가능하다. 이 개념을 이해해야 한다. State data를 관리한다.(데이터 저장소) State에서 컴포넌트에 올리는 과..

Vuex를 이용하는데 로그인 유저의 정보를 loginUser에 저장하고 새로고침을 눌렀더니 local Storage에 토큰정보만 남아있고 로그인이 풀려버리는 상황이 발생했다. 처음에 찾아봤던 방법은 새로고침하면 Vuex의 store가 새로 생성돼서 beforeCreated를 써서 토큰값으로 유저의 정보를 불러오는 방법을 찾았는데 많은 사람들이 새로고침하면 사라지는 게 화가 났는지 간편하게 이용 가능하도록 만들어놨다. npm 사용 npm install --save vuex-persistedstate yarn 사용 yarn add vuex-persistedstate 설치하고 store/index.js에서 import createPersistedState from "vuex-persistedstate"; im..

async registUser() { if ( (this.user_id === "" || this.user_pass === "" || this.user_name === "" || this.user_age === "" || this.user_phone_number === "", this.user_athletic_career === "") ) { alert("모든 내용을 입력해주세요"); } else { const user = { user_id: this.user_id, user_pass: this.user_pass, user_name: this.user_name, user_age: this.user_age, user_phone_number: this.user_phone_number, user_athleti..

화면처럼 .env.local 파일을 하나 만들어서 이렇게 이름과 키를 넣어준다. 그 다음에 axios로 요청을 보내는데 getTmdbPopular({ commit }) { const TMDB_API_KEY = process.env.VUE_APP_TMDB_API_KEY; const API_URL = `https://api.themoviedb.org/3/movie/popular`; const params = { api_key: TMDB_API_KEY, language: "ko", region: "KR", }; axios({ url: API_URL, method: "GET", params, }).then((res) => { console.log(res); console.log(res.data.results);..