[Springboot] swagger(스웨거) 설정 및 사용 방법 예제 코드, DTO가 아닌 맵을 사용중이라면?
이전 모 통신사 프로젝트할때 스웨거라는 api 툴을 처음 접했다. postman으로 api를 테스트 했는데, 스웨거라는 사이트에 접근해서 단위 테스트를 해서 거증을 뜨라는게 아닌가? 그래서 별도의 시스템을...
[Vue3, TypeScript] api.interceptors.request.use 요청 인터셉터 및 api.interceptors.response.use 응답 인터셉터에서 Promise.resolve()로 처리하는 방법
모든 페이지에서 다 처리하려고 보니, 코드 중복도 발생하고 추후 유지보수에 최악이라… 요청 인터셉터와 응답인터셉터에서 처리하는 방식으로 구현하였다. Promise.resolve()를 이용하여 정상적인 응답으로 리턴 보내면 api 호출하는...
[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