[Vue3, TypeScript] 특수문자 (&, ", <, > 등 치환 함수(encode, decode)
자바 Spring, 스프링부트 등 인터셉터에서 특수문자(예: <, >, & 등)가 HTML 엔티티로 치환돼서 저장되었다면, Vue 화면에 표시할 때 다시 원래...
[Vue3, TypeScript] 부모창 > 팝업 > 팝업 호출 및 저장 및 UI 컨트롤 방법 : defineExpose() 이용 필수!! 컴포넌트 내부의 특정 함수나 변수를 부모 컴포넌트에서 ref를 통해 접근할 수 있도록 노출하는 역할
ScheduleSettingPopup에서 내부에서 ScheduleTypePopup을 호출하고 싶다면, SettingPopup.vue 안에서 emit을 올리고, 부모에서 받아서 handleTypePopup()을 실행하는 구조가 가장 깔끔합니다. SettingPopup.vue 부모창 TypePopup.vue ScheduleSettingPopup...
[Vue3, TypeScript] api에서 ModelMap extends LinkedHashMap 타입으로 엑셀 다운로드용 데이터를 내려줄때, front에서 해당 값들을 커스텀 하는 방법
삽집 오지게했네. ChatGpt도 1시간동안 삽질을 하길래, Grok에게 물어보니, 한번에 알려준다. 아래 코드로 데이터를 콘솔로그에서 확인할 수 있다. 그래서 해결방법으로 함수를...
[STS] Spring JwtTokenProvider(Claims) 토큰 오염 문제 해결하기 (ThreadLocal 사용)
프로젝트 오픈 전 부하(성능)테스트를 진행하는데, 아주 큰 문제가 발생하였다. 여러 계정을 동시에 api를 호출하여 결과를 확인하는데, 데이터가 이상하다고 한다. 가령,...
[Vue3&TypeScript] api.interceptors.response.use 에서 alert 대신 Vue 컴포넌트(ex > AlertPopup.vue) 사용하는 방법
api.interceptors.response.use에서 “이중 로그인” 등 특정 에러 상황이 발생했을 때, 기존에는 alert()을 사용했지만,이제는 alertPopup 컴포넌트를 띄우고는 예제이다. 해결 방향 “경고 팝업을 띄워야 한다”는 신호를 보내고, 전역 상태가 바뀌면 팝업이 뜨도록 처리한다. 구현...
[Vue3&TypeScript] 사용자가 끝까지 스크롤하면 약관동의 체크박스를 자동으로 체크되도록 만드는 예제코드
회원가입 약관동의 페이지가 있을 때, 사용자가 스크롤을 아래쪽까지 다 내려서 약관을 읽었다고 가정하고, 체크박스를 자동으로 체크되도록 하는게 요즘 추세인가? 특히...
[Vue3&TypeScript] if문을 줄이고 코드의 가독성과 유지보수성을 높이기 위한 방법들 예제 코드 포함(includes, has) : TypeScript Set 객체 사용법
방법 1: Set 자료구조 활용 (추천) 다음은 TypeScript 에서 Set 객체를 생성하는 코드이다. Set은 중복 없는 값들의 집합(Collection) 을 표현하는...
[Vue3&TypeScript] Props, Emits 사용 방법 예제 코드
Props 사용을 위해 부모페이지에서 Monitor.vue를 호출 Monitor.vue
[Vue3&TypeScript] json타입의 데이터 객체를 Map구조로 변환시키는 공통함수 만들기 (convertColsToHeaderMap)
PrimeVue의 DataTable 콤포넌트를 사용하여 그리드를 구현하여 사용중인데, 그리드 헤더용 컬럼값을 똑같이 엑셀다운로드할때도 만들어서 했는데, 다 만들어놓고 보니 아이디어가 떠 올랐다....
[Vue3&TypeScript] dataTable의 exportCSV() 사용시 엑셀 한글 깨짐 현상 해결 방법
PrimeVue의 DataTable의 exportCSV() 메소드를 사용해서 엑셀파일 다운로드 기능이 구현되어 있는데, .csv이고, 한글이 깨지는 문제가 발생한다. exprotCSV()로 처리시 해결방법이 없는 것...
