소소한 코딩일지

현상 Vuex의 store에서 state가 update 되었지만, 새로운 state에 대해서 UI는 업데이트되지 않는 현상이 발생했다. 해결 과정 두 가지 부분에서 잘못된 부분을 발견했다. 우선, 평가지 파일을 업로드하는 부분에서 업로드한 파일을 곧바로 사용하지 않고, 배열에 push 해서 사용하고 있었다. 파일 객체를 사용하는 부분에서는 모두 배열의 0번째를 가리키고 있어, 파일이 추가되어도 절대 바뀌지 않았다. 무슨 생각으로 코드를 짠 건지... 첫 번째 문제를 해결했지만 위 파일명이 새로운 파일의 이름으로 바뀔 뿐 아래 테이블에 새로운 데이터 반영되지 않았다. 테이블 컴포넌트의 created()를 통해 확인해보니, 처음 파일을 업로드했을 때는 아래 컴포넌트가 파일 데이터로 랜더링 되지만 다음 새로운..

🔥 [Vuex 공식문서](https://vuex.vuejs.org/)를 참고하여 학습한 자료입니다. 더 자세한 내용은 공식문서를 참고해 주세요. State Vuex에 저장하는 데이터는 일반적으로 단일 컴포넌트 내에서 선언하는 data의 형식과 동일한 규칙을 따른다. Vuex의 상태 가져오기 const Counter = { template: `{{ count }}`, computed: { count () { return this.$store.state.count } } } mapState의 사용 모든 state를 호출할때마다 써주면 반복적인 코드가 활용될 수 있다. 이러한 코드라인을 절약하기 위해 getter함수를 생성하는 mapState를 활용할 수 있다. computed: { localComputed ..

🔥 [Vuex 공식문서](https://vuex.vuejs.org/)를 참고하여 학습한 자료입니다. 더 자세한 내용은 공식문서를 참고해 주세요. What is Vuex? Vuex는 Vue.js 애플리케이션의 상태관리 패턴 + 라이브러리. 컴포넌트에서 사용할수 있게 중앙집중적인 Store를 제공한다. Store는 state를 변경할 수 있는 유일한 수단과, 예측 가능한 변화 패턴을 보장한다. What is “State Mangaement Pattern”? State → 애플리케이션에서 사용되는 Source View → State의 선언적 매핑...?, state가 보여지는 걸 말하는 것 같음 Actions → View에서 발생한 input에 대해서 state를 바꾸는 행위. → 위 세가지의 순환을 ‘one..