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] #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를 붙여 간단하게 손볼 수 있다..

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 프로젝트에서 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와 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..

짧은 인턴 기간을 마치고 마무리 하는 차원에서 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