[Vue3&TypeScript] 사용자가 끝까지 스크롤하면 약관동의 체크박스를 자동으로 체크되도록 만드는 예제코드
회원가입 약관동의 페이지가 있을 때, 사용자가 스크롤을 아래쪽까지 다 내려서 약관을 읽었다고 가정하고, 체크박스를 자동으로 체크되도록 하는게 요즘 추세인가? 특히 보험이 그렇긴한데…. 약관 내용을 사용자가...
[Vue3&TypeScript] if문을 줄이고 코드의 가독성과 유지보수성을 높이기 위한 방법들 예제 코드 포함(includes, has) : TypeScript Set 객체 사용법
방법 1: Set 자료구조 활용 (추천) 다음은 TypeScript 에서 Set 객체를 생성하는 코드이다. Set은 중복 없는 값들의 집합(Collection) 을 표현하는 내장 객체이다. Set에 넣은 값들은...
[Vue3&TypeScript] Props, Emits 사용 방법 예제 코드
Props 사용을 위해 부모페이지에서 Monitor.vue를 호출 Monitor.vue
[Vue3&TypeScript] json타입의 데이터 객체를 Map구조로 변환시키는 공통함수 만들기 (convertColsToHeaderMap)
PrimeVue의 DataTable 콤포넌트를 사용하여 그리드를 구현하여 사용중인데, 그리드 헤더용 컬럼값을 똑같이 엑셀다운로드할때도 만들어서 했는데, 다 만들어놓고 보니 아이디어가 떠 올랐다. 1군데만 수정하면 엑셀다운로드할때는 동일하게 사용하니...
[Vue3&TypeScript] dataTable의 exportCSV() 사용시 엑셀 한글 깨짐 현상 해결 방법
PrimeVue의 DataTable의 exportCSV() 메소드를 사용해서 엑셀파일 다운로드 기능이 구현되어 있는데, .csv이고, 한글이 깨지는 문제가 발생한다. exprotCSV()로 처리시 해결방법이 없는 것 같다. ChatGPT가 알려주는 방식으로 4가지를...
[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 파일 전체 내용은 다음과...
