프린세스 다이어리

문제상황 탭을 클릭하면 탭별로 다른 컴포넌트를 불러오려고 하는데 다음과 같은 warning이 뜬다. 자매품: Invalid VNode type: undefined (undefined)도 이 문제 해결 중 떴다. 해결방법 컴포넌트가 제 때 잘 불러와지는지 확인해야 한다. 기존 코드 setup() { const componentName = ref(''); const selectedId = ref(0); const changeTab = (value: number) => { switch (value) { case 0: componentName.value = 'chart-one'; break; case 1: componentName.value = 'chart-two'; break; case 2: component..

문제상황 fetch 받아온 배열을 reduce 돌고 싶은데, reduce에 밑줄이 생기며 에러가 뜬다. reduce 뿐만 아니라 this.charData[0]와 같이 인덱스에 접근하는 곳에도 모두 타입에러가 떴다. 아마 map을 돌았어도 에러가 떴을 것이다. computed: { isChartDataEmpty(): boolean { return ( this.chartData.reduce((acc: number, cur: any) => acc + cur.y, 0) === 0 ); }, }, Property 'reduce' does not exist on type '(state: DashboardStateI) => ChartDataI[] | undefined'. 해결방안 chartData가 undefined..

1. Vue로 개발 시 프록시를 설정해주는 이유 일반적으로 프록시 또는 프록시 서버는 클라이언트와 서버 간의 중간다리 역할을 한다. 프록시에 대한 글에 프록시의 개념과 종류에 대해 정리해 두었다. Vue 개발 시에는 개발 환경에서 프록시를 설정하여 사용한다. Vue CLI 서비스(웹팩 개발 서버)를 사용하여 개발 모드에서 앱을 실행하는데 개발 환경에서 /api/reservations/:id로 요청을 하면 자동으로 http://localhost:8080/api/reservations/:id로 호출이 된다. 이렇게 되면 localhost:8080는 백엔드 서버에서 허락한 도메인이 아니기 때문에 브라우저에서 CORS 오류가 난다. 배포를 하고 나면 미리 설정한 도메인으로 바뀌니 상관이 없지만 로컬에서 개발 도..

하루 종일 고민했는데, 기본적인 Vue 라이프사이클을 이해하면 해결할 수 있는 문제였다. 부모는 bookingListPage, 자식은 bookingList 컴포넌트 구조인 상태에서, bookingListPage에서 데이터 요청을 하고 bookingList로 props를 넘겨주는 방식이다. 파일 구조는 대충 이런 식이다. store ㄴ BookingListStore.ts ㄴ index.ts component ㄴ BookingList.vue ㄴ BookingEmptyState.vue views ㄴ BookingListPage.vue 먼저 BookingListStore.ts 에 bookingList 등의 state가 있고, 백엔드에 리스트를 요청하여 state를 변경해주는 actions가 있다. const B..

debounce()는 특정 기간 동안 반복된 함수 호출을 마지막 1회만 호출하도록 제어해주는 메서드다. 1. debounce 메서드 Vue 3에서 사용법 1-1. lodash를 install 해주었다고 가정하고, import를 한다. import {debounce} from 'lodash'; 1-2. 기본적인 사용 방법 debounce 는 두 개의 인자를 받는다. 첫 번째는 콜백 함수, 두 번째는 시간(밀리세컨드)이다. const fetchList = () => { // 데이터 불러오는 로직 } debounce(fetchList(), 300) 1-3. Vue3 라이프사이클에 적용하기 자 그럼 이걸 언제 쓰는지 직접 작성했던 vue3 기반 프로젝트를 참고하여 기록해보려 한다. computed: { isSc..