[Vue3&TypeScript] Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘forEach’)at UserTestPopup.vue:367:34 오류 수정방법
오류 메시지 분석 즉, 아래 코드에서 mainStore.userList가 undefined거나 null 상태일 때 .forEach()를 호출하고 있다는 뜻이에요. 해결 방법 userList가 배열인지 확인하는 방어 코드 추가
[Vue3&TypeScript] watch() 안에서 발생하는 오류 해결방법 : Uncaught (in promise) Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
뷰에서 watch를 꼭 써야 하는 건 아니지만, 팝업 열릴 때만 로직 실행하려면 watch는 적절한 수단이다. 하지만 문제가 발생할 수 있다. forEach 안에서 반응형 객체의 개별...
[Vue3, PrimeVue] DataTable 그리드 리스트 컬럼 정렬 변경 방법
프라임뷰 그리드 리스트에서 특정 컬럼에 대한 왼쪽 정렬을 해야할 때가 있다. 기본값으로 가운데 정렬이 이루어지는데, 왼쪽 정렬하는 방법에 대한 삽질 기록을 추가해본다. 아래와 같이 API를...
[Vue3, Vite] npm run build 시 warning Expected identifier but found “-” , Some chunks are larger than 500 kB after minification 제거 방법
npm run build 하는데 거슬리는 워닝이 발생한다. 하나는 css문제, 다른 하나는 chunk 사이즈 문제이다. 해결방법 vite.config.ts 파일에 아래 내용을 추가해준다. vite.config.ts 파일 전체 내용은 다음과...
[Vue.js] @contextmenu.prevent 사용 방법 예제 총정리
@contextmenu.prevent는 Vue.js에서 사용하는 디렉티브입니다. 의미 분석 예시 이렇게 하면, 사용자가 해당 <div> 위에서 마우스 오른쪽 버튼을 눌러도 브라우저의 기본 컨텍스트 메뉴가 나타나지 않습니다. 참고: .prevent...
[Vue3, TypeScript] vee-validate + pinia 연동 방법 예제 총정리
vee-validate와 pinia를 연동하면 폼 상태를 전역 상태 관리(store)와 연결해서 아래와 같은 유용한 패턴을 만들 수 있습니다 주요 목적 예제 시나리오 1. pinia store 정의 2....
[Vue3, TypeScript] vee-validate에서 입력 필드 마스킹/포맷팅방법
vee-validate에서 입력 필드 마스킹(Masking) 및 포맷팅(Formatting) 을 구현하는 일반적인 방식은 다음과 같습니다 구현 방식 요약 방법 설명 예시 v-model + watch() 입력값 직접 감시 및...
[Vue3, TypeScript] vee-validate와 yup에 대한 예제 총정리
vee-validate와 yup은 둘 다 웹 폼의 유효성 검사(validation) 를 도와주는 라이브러리지만, 역할과 사용 방식이 다릅니다.둘의 차이점과 각각의 목적을 아래에 정리해드릴게요. ee-validate란? Vue.js 전용 폼 유효성...
JavaScript/TypeScript 기본 문법: Spread, Rest, Map 사용법 예제 총정리
초보자를 위한 JS/TS 문법: Spread, Rest, Map 완전 정복 spread, rest, map 모두 JavaScript/TypeScript의 기본 문법입니다. Vue 코드에서 자주 쓰여요. 1. Spread 문법 (...obj) 객체나...
