개발냥발

아이콘을 쓰려는데 png는 싫고 svg를 쓰자니 어려울 때 fontawesome을 적용해보는 것도 방법이라 생각했다. 1. 설치 npm install --save @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons 필요한 것들을 설치해야한다. @fortawesome/fontawesome-svg-core, @fortawesome/vue-fontawesome, @fortawesome/free-solid-svg-icons 이렇게 세 개를 설치했다. 하나라도 없으면 안 되는건가 싶어서 한 개씩, 두 개씩 설치하고 지우고 해봤는데 적용이 안 된다. 그냥 이유가 있겠거니 하고 쓸걸... 2. m..

최상단 컴포넌트 - 상단 컴포넌트 - 하위 컴포넌트 - 최하위 컴포넌트 이렇게 만들어진 상태에서 하위 컴포넌트와 최하위 컴포넌트간 데이터 공유가 필요했다. 이제부터 편의상 하위 컴포넌트와 최하위 컴포넌트를 상위 컴포넌트와 하위 컴포넌트라 칭함. 컴포넌트간에 데이터 공유 방법은 store나 props, emit을 써도 되지만 오로지 이 둘 사이에서만 데이터를 공유 하면 됐기에 고민하던 찰나 provide, inject가 생각났다. props, emit은 단방향이란 특성 때문에 상위 컴포넌트에서 하위 컴포넌트로 혹은 이와 반대로 보내주고 끝이다. 즉, 하위 컴포넌트에서 값을 변경하면 상위 컴포넌트에선 감지할 수 없다. 이 특성을 고려하지 않은채 만들다가 상위 컴포넌트에서 변경값을 감지 못하는 바람에 머리 싸..

여기 문서 참고했음. 1. 설치 npm install --save @vuepic/vue-datepicker 2. main.js에 추가 및 내용 수정 import { createApp } from 'vue' import App from './App.vue' import Datepicker from '@vuepic/vue-datepicker'; import '@vuepic/vue-datepicker/dist/main.css'; const app = createApp(App); app.component('Datepicker', Datepicker); app.mount('#app') 3. .vue에서 사용 나는 text입력 보다는 달력이 항상 보여지길 바랐음. inline을 넣어주면 됨. 그리고 달력에 특정 값..