[Vue3, TypeScript] Vue props 전달 규칙 개념 정리 (kebab-case ↔ camelCase)
ChatGpt에게 질문을 던졌다. 질문 내용은 다음과 같다. 부모창에서 팝업 띄울때 props 파라미터로 user-no , isValid넘기는데, is-valid 로 안해도 잘 되는건가? Vue에서는 props 전달 규칙 때문에...
[Vue3, TypeScript] 특수문자 (&, ", <, > 등 치환 함수(encode, decode)
자바 Spring, 스프링부트 등 인터셉터에서 특수문자(예: <, >, & 등)가 HTML 엔티티로 치환돼서 저장되었다면, Vue 화면에 표시할 때 다시 원래 문자열로 복원해서 보여줘야 한다. TypeScript...
[Vue3, TypeScript] 부모창 > 팝업 > 팝업 호출 및 저장 및 UI 컨트롤 방법 : defineExpose() 이용 필수!! 컴포넌트 내부의 특정 함수나 변수를 부모 컴포넌트에서 ref를 통해 접근할 수 있도록 노출하는 역할
ScheduleSettingPopup에서 내부에서 ScheduleTypePopup을 호출하고 싶다면, SettingPopup.vue 안에서 emit을 올리고, 부모에서 받아서 handleTypePopup()을 실행하는 구조가 가장 깔끔합니다. SettingPopup.vue 부모창 TypePopup.vue ScheduleSettingPopup 닫을 때, cardUserListStore.getUserList()를 호출하고 싶어...
[Vue3, TypeScript] api에서 ModelMap extends LinkedHashMap 타입으로 엑셀 다운로드용 데이터를 내려줄때, front에서 해당 값들을 커스텀 하는 방법
삽집 오지게했네. ChatGpt도 1시간동안 삽질을 하길래, Grok에게 물어보니, 한번에 알려준다. 아래 코드로 데이터를 콘솔로그에서 확인할 수 있다. 그래서 해결방법으로 함수를 하나 추가하였다.
[Vue3&TypeScript] api.interceptors.response.use 에서 alert 대신 Vue 컴포넌트(ex > AlertPopup.vue) 사용하는 방법
api.interceptors.response.use에서 “이중 로그인” 등 특정 에러 상황이 발생했을 때, 기존에는 alert()을 사용했지만,이제는 alertPopup 컴포넌트를 띄우고는 예제이다. 해결 방향 “경고 팝업을 띄워야 한다”는 신호를 보내고, 전역 상태가 바뀌면 팝업이 뜨도록 처리한다. 구현 예시 코드 (Pinia 사용) 1. Pinia...
[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가지를...
