본문 바로가기

Vue

 (45)
Vuex4에서 state 변경을 감지하는법 (watchEffect) Vue.js 에서 컴포넌트를 나누면서 재사용이 많은 데이터를 Vuex 에 보관하기 시작했고 Vuex의 상태값 변화에 따라 데이터를 갱신해야 하는 일이 생겼습니다. Vue.js 2.0 에서 Vue.js 2 (Vuex 3) 버전에서는 computed와 watch를 사용하여 아래와 같이 state 변경을 감지합니다 ... computed: { getData () { return this.$store.getters.getPlaces } }, watch: { getData (val) { console.log('watched: ', val) } }, ... computed : "반응형 getter" 즉 함수내에 속한 프로퍼티 (state) 의 변경여부를 추적합니다. watch : computed 객체의 변경 (g..
Vuex4 모듈화, store호출 (2) Vuex 모듈화 단일 상태 트리를 사용하기 때문에 APP의 모든 상태가 객체안에 포함됩니다. 따라서 규모가 커지면 저장소도 비대해 질 수 있습니다. 이를 위해 Vuex는 저장소(store) 를 모듈로 나눌 수 있습니다. // Vue3.0 에서의 store/index import { createStore } from 'vuex'; import places from "@/store/module/places"; import station from "@/store/module/staion" export default createStore({ modules: { places, station } }); 파일 구조 module/ : 모듈로 나눈 저장소가 위치한 디렉토리 입니다. index.js : 각 모듈화한 파일들..
Vuex란? (1) Vuex란? Vuex는 Vue.js에 대한 상태관리 패턴 + 라이브러리 입니다 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 합니다 - Vuex 사용이유 공통의 state를 공유하는 여러 컴포넌트가 있으면 중첩되는 prop이 많이 생기게 됩니다. 이는 나중에 유지보수하기 힘든 난해한 코드가 될 수 있습니다 이러한 공통의 state는 동일한 상태로 관리되어야 합니다. Vue.js는 단방향으로 데이터가 흐르기 때문에 여러 컴포넌트가 state를 공유하는 경우 관리가 복잡해질 수 있습니다. - Vuex의 핵심 속성 state : 컴포넌트간 공유할 data 집합입니다 getter : Vuex의 state 변경을 각 컴포넌트에서가 아닌 Vuex에서 수행하도록 하고 Getter로 호출합니다 muta..
Vue3) Vue-Router Vue-Router란? Vue.js에서 페이지 이동을 위한 라이브러리 입니다 Vue.js 공식 라우터 입니다 페이지 이동시 url이 변경되면 완전 새로운 페이지를 불러오는게 아닌, 변경된 요소 컴포넌트만 동적으로 다시 작성하는 SPA을 구현합니다 - 주요기능 동적 라우트 매칭 주어진 패턴을 가진 라우트를 동일 컴포넌트에서 매핑해야 하는 경우가 자주 있습니다. user/100과 user/101 중첩된 라우트/뷰 매핑 중첩 된 라우트 구성을 사용하여 다음과 같은 관계를 표현하는 것이 간단해집니다 라우터 파라미터 쿼리 와일드카드 네비게이션 가드 active CSS 클래스를 자동으로추가해주는 링크 HTML5 히스토리 모드 vue-router의 기본 설정은 hash 모드입니다. URL 해시를 사용하기 때문에 UR..
Vue.js 3.0 시작하기 Vue.js 란? Vue.js 는 웹 페이지 화면을 개발하기 위한 Front-end Framework 입니다. 뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있습니다. MVVM 패턴 뷰(Vue.js)는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는화면단 라이브러리 입니다. View : 사용자에게 보이는 화면 DOM : HTML 문서에 들어가는 요소(태그,클래스,속성 등)의 정보를 담고 있는 데이터 트리 DOM Listener : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 Model : 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장 Data Binding : 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화 Vi..
BookStore 프로필 업로드 새로고침 현상 수정 내용 기존의 프로필 수정시 서버에서 프로필을 저장하고 저장한 위치를 vue의 store에서 저장하는 과정중 새로고침 현상이 일어나서 변경된 사진으로 갱신을 못하는 현상 수정 원인 받은 url을 store의 action에서 require로 가공후 저장하는 과정에서 새로고침 발생 해결 action에서 파일 위치만 저장 후 mutations: { ... isLoading : function(state, data){ state.loadingData = data; console.log("hi") }, putProfile: function (state, data){ state.userData.nickName = data.nickName state.userData.profilePicture = data.profile..
로그인 변경점과 문제점 해결 변경 사항 기존의 로그인 방식은 아래와 같았다. (vue)login > (Spring)spring에서 로그인 처리 후 token 반환 > (vue)store로 데이터 전송 > store에서 받은 정보로 (Spring)유저 정보 조회 > 받은 정보 state에 commit 그래서 위 사진과 같이 총 쿼리가 4번이나 발생한다 로그인시 유저 조회, 토큰 검증시 조회 (유저정보 조회) 다시 유저 전체데이터 조회 (유저정보 조회) 반환할 유저 정보 조회 (유저정보 조회) 거기다 action의 비동기 로직처리 때문에 setTime으로 딜레이를 준 것 까지 합해 꽤 많은(?) 시간을 기다려야했다. 그래서? 로그인시 필요한 데이터를 전부 뽑아서 반환해주기로 했다. Jwt인증컨트롤러에서 기존에 검사할때 조회한 membe..
10 . 검색과 자동완성 코로나와 기사시험 필기 준비로 인해 블로그 작성을 하지 못했다.. 4월 24일에 필기시험이 끝났는데 실기는 7월 말이라고 한다. ( 기다리기도 힘들다.. ) 이제 시험도 끝났고 다시 bookStore 만들기를 진행하겠다. 이번 글에서는 자동완성 기능의 동작 방법을 간단하게 설명한다. 자동완성 기능 vuetify에서 제공하는 v-autocomplete도 있지만 검색어가 남지 않는다던가 데이터 바인딩, 디자인 등 원하는대로 구현하기 힘들어서 직접 만들었다. ( 그리고 bookStore 페이지를 조금 꾸며줬다. 이게 제일 힘들었음... ) 텍스트 필드에 입력 값을 vue watch에서 감지하여 계속 서버와 통신한다. 자세한 내용은 아래에. Vue - template // 여기는 검색어를 입력하는 곳 // 여기..

티스토리툴바