[Vue3, TypeScript] Vue props 전달 규칙 개념 정리 (kebab-case ↔ camelCase)
ChatGpt에게 질문을 던졌다. 질문 내용은 다음과 같다. 부모창에서 팝업 띄울때 props 파라미터로 user-no , isValid넘기는데, is-valid 로 안해도 잘 되는건가? Vue에서는 props 전달 규칙 때문에...
[구글정책]Google Play 16KB 페이지 크기 정책 해결방법
Google Play 16KB 페이지 크기 관련하여 메일을 받았지만 도대체 무슨 말인지, 잘 모르겠더라…..그래서 방치하고 있었다. 오늘 해결책을 알아보기위해 구글링을 좀 했더니, 어플에서 implementation 해서 사용중인...
[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()를 호출하고 싶어...
[PostgreSQL] CONCAT(), concat_ws() 사용 예제 쿼리 (주소 컬럼 이어 붙이기)
ChatGpt에게 물었다. postgre sql 사용중이야.. select CONCAT(A.address_si,’ ‘, A.address_gungu,’ ‘, A.address_dong,’ ‘, A.address_detail) as FULL_ADDRESS from tb_user 위와 같이 주소 정보를 이어주고 있는데, 중간에 없는...
[Vue3, TypeScript] api에서 ModelMap extends LinkedHashMap 타입으로 엑셀 다운로드용 데이터를 내려줄때, front에서 해당 값들을 커스텀 하는 방법
삽집 오지게했네. ChatGpt도 1시간동안 삽질을 하길래, Grok에게 물어보니, 한번에 알려준다. 아래 코드로 데이터를 콘솔로그에서 확인할 수 있다. 그래서 해결방법으로 함수를 하나 추가하였다.
[STS] Spring JwtTokenProvider(Claims) 토큰 오염 문제 해결하기 (ThreadLocal 사용)
프로젝트 오픈 전 부하(성능)테스트를 진행하는데, 아주 큰 문제가 발생하였다. 여러 계정을 동시에 api를 호출하여 결과를 확인하는데, 데이터가 이상하다고 한다. 가령, 1번에서 100번까지 툴을 이용해서 UserList를...
[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에 넣은 값들은...