Under the Sign of Saturn

2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #2 카테고리가 있는 Todo List 만들기 2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #1 Date 객체를 이용해 달력 숫자 구하기/지난 날짜, 오늘 날짜 구별을 위한 CSS 스타일링 todolist 예제의 마지막 단계는 chart.js 연습을 위해서 Pie chart와 line chart 두 개를 보여주는 Daily Report로 꾸몄다. Line chart의 경우 localStorage에 저장되는 todo 객체의 createdAt Date 객체와 완료가 될 때 생성되는 completedAt Date 객체를 기반으로 알맞은 날짜에 해당하는 todo 객체의 length에 따라 두 개의 L..

firebase.firestore() .collection("firstCollection").doc("firstDoc") .collection("secondCollection").add(dataToAdd); // firebase.js // .. export const dbService = firebase.firestore(); export const bookRecordRef = dbService.collection("bookRecord"); 이전 포스트에서 Vue.js 프로젝트에서 firebase를 연결해 간단한 데이터를 저장하는 방법을 다뤘는데, 오늘은 거기에 이어 계층적 구조화를 조금 더 다뤄보려고 한다. 간단한 book tracker web app을 만드는 중인데, 아래 이미지처럼 bookRecor..

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

간단한 책 정보와 리뷰를 등록하는 웹앱을 Vue와 Element UI 프레임워크, 그리고 Firebase를 이용해 만들고 있다. 이곳을 참고할 수 있다. 생성하고자 하는 폴더 경로에서 node prompt를 열고 아래 명령어를 입력한다. vue create [vue-project-name] Vue CLI v4.x 부터는 almost-full 옵션이 생긴 모양이다. 이번에 하면서 처음 봤다. 손쉽게 필요한 기능들이 다 있어서, 해당 옵션으로 진행했다. 그리고 element UI 프레임워크를 쓰기 위해 아래 명령어를 써줬다. 문서는 이곳 npm i element-ui -S 그러다가 일 하면서 기본 템플릿으로 썼던 vue-admin-template을 이용하려고 해당 프로젝트는 지우고, 이곳에서 git clon..