Under the Sign of Saturn

이슈 작업한 프로젝트를 github pages로 deploy하려고 npm install --save gh-pages을 실행시키고 나서 npm audit을 해보니, 몇 가지 패키지들이 사라져서 다시 npm install을 하고 나자 위 에러가 발생했다. 해결 github.com/FortAwesome/angular-fontawesome/issues/125 Argument of type 'IconPack' is not assignable to parameter of type 'IconDefinitionOrPack' · Issue #125 · FortAwesome/angular-f Describe the problem Trying to import fab icons to angular project, but c..

2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #3 chart.js로 todo data 시각화하기 (1) - Line Chart 2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #2 카테고리가 있는 Todo List 만들기 2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #1 Date 객체를 이용해 달력 숫자 구하기/지난 날짜, 오늘 날짜 구별을 위한 CSS 스타일링 Pie chart는 이전 포스팅에서 다뤘던 Line chart에 비해 엄청 엄청 쉬운 편에 속해 크게 고민하지 않고 import 해준 뒤 바로 썼다. import { Vue } from "vue-property-decorator"; import { ..

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..

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를 접했을 때 공식 문서를 보며 만들었던 To do list 예제가 있었다. 잊고 지내다가 몇 주 전에 이 예제 위에 TypeScript나 CSS framework인 Tailwinds 등을 공부해보고 싶어서 이것저것 생각이 날 때마다 실험하며 몇 개의 기능을 붙여나갔다. 그러다 Home 화면이 비어서 뭘 할지 고민하다가 JavaScript로 Date 객체를 많이 안 다뤄봐서 이 기회에 라이브러리 대신 직접 컴포넌트를 구현하면 좋을 것 같았다. 일단 달력처럼 이전 날짜로 돌아가기, 작년이나 내년 등으로 이동할 수 있도록 했다. 오늘 날짜로 되돌아오는 버튼과 올해의 특정 월로 이동할 수 있는 기능도 넣었다. 달력에 오늘 날짜를 표시해주는 마크가 붙고, to do list와 연계된 달력이니 해당..

문제 상황 SVG 애니메이션 연습을 위해서 TypeScript를 적용 중인 Vue.js에 anime.js를 다운로드 받았다. 아래처럼 달 모양 SVG 그래픽을 이용해 클릭 시 가벼운 애니메이션을 추가하는 과정에서 자꾸 아래 같은 에러가 났다. Property '$anime' does not exist on type 'CombinedVueInstance

{{ todo.title }} todo-list 컨테이너 역할을 하는 태그가 있고, 아래에 todo-list item들이 v-for 를 도는 형태이다. 하나의 todo 아이템은 todo 타이틀 역할을 하는 태그와 버튼부 역할을 하는 태그 둘로 또 나뉘는데, 이때 상위 컴포넌트인 for 문의 에 checkDone()이라는 함수가 걸려 있다. 해당 함수는 클릭 시 상태값을 토글해주어 하위 태그의 클래스를 붙이고 떼어주는 역할을 도와주게 된다. 하지만 버튼 부는 다른 이벤트를 독립적으로 수행해야 하므로, 상위 컴포넌트의 event를 prevent 해주어야 한다. 이때에는 상위 컴포넌트의 이벤트를 fire하지 말아야 할, 독립적으로 실행되어야 하는 함수에 .stop modifier를 붙여 간단하게 손볼 수 있다..

vue 프로젝트에서 font-awesome을 쓰기. $ yarn add -D @fortawesome/fontawesome-svg-core $ yarn add -D @fortawesome/free-solid-svg-icons (optional) $ yarn add -D @fortawesome/free-brands-svg-icons (optional) $ yarn add -D @fortawesome/vue-fontawesome optional이 아닌 첫 번째, 네 번째는 필수로 다운받아준다. 나는 소셜 로그인을 위한 버튼을 만들 때 들어갈 github, google icon을 쓰기 위해 세 번째 free-brands-svg-icons를 먼저 받아주었다. 받고자 하는 아이콘이 어떤 카테고리에 있는지는, sol..

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

짧은 인턴 기간을 마치고 마무리 하는 차원에서 12월 말까지는 배운 걸 바탕으로 복습하려고 Vue + Element UI를 기본 뼈대로 하는 작은 프로젝트를 생성했다. vue create [project-name] 을 실행해 빠르게 기본 뷰 프로젝트를 생성한 후, 이곳에서 Element UI를 설치한다. npm i element-ui -S 문제는 이렇게 설치하고 나면 core-js 오류가 발생해 컴파일이 완료되지 않는데, 이것저것 설치해보다가 결국에는 이곳을 참고해서 가장 빠르게 문제를 해결할 수 있었다. yarn add core-js // or npm install core-js