Under the Sign of Saturn

2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #1 Date 객체를 이용해 달력 숫자 구하기/지난 날짜, 오늘 날짜 구별을 위한 CSS 스타일링 [Vue-todo-list] #1 Date 객체를 이용해 달력 숫자 구하기/지난 날짜, 오늘 날짜 구별을 위한 CSS 스타일 맨 처음 Vue를 접했을 때 공식 문서를 보며 만들었던 To do list 예제가 있었다. 잊고 지내다가 몇 주 전에 이 예제 위에 TypeScript나 CSS framework인 Tailwinds 등을 공부해보고 싶어서 이것저것 생각이 날 uiyoji-journal.tistory.com 위처럼 단순하게 to do 리스트를 추가하고, 편집하고, 완료하는 기능에서, 아래의 카테고리 편집 기능을 넣었다. 카테고..

이전 프로젝트에서 Vue.js에서 컴포넌트 간의 데이터 변경을 다룰 때 event bus 등으로만 관리했을 때 컴포넌트끼리의 관계성을 파악하기 어려웠다. 사이즈가 큰 앱을 다룰 때는 그래서 Vuex를 많이 쓰는데, 처음 Vuex를 접했을 때 많이 헷갈렸어서, 한 번 정리를 쭉 해봤다. Vuex는 핵심인 state, mutations, actions를 이해하는 게 중요한데, state는 vuex라는 공통 중앙 저장소가 가지는, 모든 컴포넌트가 공유하는 data다. 이 state라는 data는 모든 컴포넌트 간에 공유되는 속성이기 때문에 this.$store.state.sampleState 식으로 접근이 가능하다. 하지만, 컴포넌트끼리 모두 공유가 된다는 속성 때문에, 직접적으로 이렇게 접근해 상태를 바꾸는..