전체 글129 [jQuery] 제이쿼리 validation 활용하여 유효성 검사(ajax 실시간 통신, 유효성 실패 메시지 변경) jQuery validation 커스텀 제이쿼리 validation 플러그인의 기본적인 사용법은 저번 포스팅을 참고하면 좋을 것 같다.2023.02.28 - [Programming/JavaScript & jQuery] - [jQuery] 제이쿼리 validation 플러그인으로 쉽게 유효성 검사하기 이번 포스팅에는 좀 더 자유도 높게 다양한 커스터마이징을 해보려고 한다. 적용 ✔️1. 필드에 입력 시, 실시간 ajax 통신하여 유효성 검사하기 📌input에 입력할 때, 서버 호출하여 유효성을 검사하는 방법이다.자주 쓰이는 예를 들자면 바로 회원가입할 때, 동일한 ID 존재 여부 검사이다. 사실 커스터마이징할 필요 없이, jquery validation은 remote라는 메소드를 제공해주긴 한다.관.. 2023. 5. 2. [JavaScript & JQuery] 동적으로 생성된 요소에 이벤트 바인딩 상황 프로젝트를 진행하다보면, 페이지가 그려지고 난 후에 ajax 등 비동기 방식을 이용하여 동적으로 요소들을 생성, 추가하는 경우가 있다. (innerHTML이나 jQuery의 append()와 같은 방법 등..) 이런 경우에는 이벤트 바인딩이 되지 않는다. 이미 페이지가 로드되면서 작성한 이벤트 코드가 바인딩 된 상태이기 때문이다. 동적으로 추가된 요소에 이벤트를 바인딩해야 한다면 어떻게 해야 작동할까? 적용 ✔️1. 자바스크립트로 동적 요소 이벤트 바인딩 📌이벤트 버블링을 이용해서 미리 그려져있는 요소에 이벤트를 건다. // 여기에 동적으로 appendChild 동적 추가 동적으로 생성! 동적 추가 위 소스를 간단히 설명하면, [동적 추가] 버튼을 클릭 시 root태그 하위에 h2태그로 감싸진 ht.. 2023. 4. 26. IntelliJ에 SpringBoot + Vue.js 설치 및 연동 - 2 상황 저번 포스팅에서는 vue.js를 IntelliJ에 설치를 했다면,이번에는 backend 서버와 frontend서버를 연결하여 데이터 주고 받기를 해볼 차례다. 설치 포스팅 👇 2023.04.19 - [Programming/Vue] - IntelliJ에 SpringBoot + Vue.js 설치 및 연동 - 1 적용 ✔️. backend 서버와 frontend 서버를 연결하여 데이터 주고 받기 Spring Boot와 Vue.js 설치를 했으니, 이제 연동을 시켜보자. 📌 Proxy서버를 활용하여 연동할 수 있다. Spring Boot(백엔드 서버)와 Vue.js(프론트엔드 서버)를 연결하기 위해 중계인인 Proxy가 필요하다. 나같은 경우에는 백엔드는 8081 (application.properties.. 2023. 4. 19. IntelliJ에 SpringBoot + Vue.js 설치 및 연동 - 1 상황 이제 Back API는 마무리 되었고, Front 개발 차례이다. 내부회의에서 Vue와 React 중 어떤 것을 고를지 결정하기 전에 프로젝트 내부에 각각 세팅을 해보고, 비교해서 결정하기로 했다. 적용 이 프로젝트 세팅은 아래 사항들을 이미 완료했다고 가정하고 시작한다. 1. JAVA(v11) 설치 2. Node.js 설치 3. Git 설치 4. Spring Boot 세팅 완료 ✔️1. terminal Shell path 변경 사진과 같이 터미널의 shell path를 Git파일에 들어가 bin에 위치한 sh.exe 파일을 선택해주고, -login -i 를 입력한다. IntelliJ 툴을 껐다 켜면 Git bash 터미널 적용이 완료된다. Shell path: C:\Program Files\Git.. 2023. 4. 19. [JAVA] Stream Collectors.groupingBy 널(null) 사용하기 상황 데이터를 grouping 해서 Map으로 리턴해야 하는 상황이다. grouping할 key 값이 nullable한 상황인데, Map의 key값은 null이 될 수 없기때문에 문제가 발생했다. 아래와 같은 exception을 뱉었다. Caused by: java.lang.NullPointerException: element cannot be mapped to a null key 🫥참고로, 만약 그룹핑할 key가 절대로 null이 아니라면 아래와 같이 간단하게 처리할 수 있다. Map map = list.stream().map(li -> new ResponseDto(li) ).collect(Collectors.groupingBy(ResponseDto::getCode)); 해결 ✔️Null값이 있는 Gr.. 2023. 4. 7. [JPA, QueryDSL] intellij QClass import static 자동완성 단축키 상황 QueryDSL을 사용하는데, QClass를 import 할 때, 단축키를 이용한 자동완성이 안되고 import static~ 을 다 입력해야 해서 번거로웠다. 왜 단축키가 안먹지? 생각했는데, 역시나! 자동완성 방법이 있었다. (인텔리제이에서 가능!) 적용 ✔️1. QClass 명과 지정된 변수명을 입력한다. ✔️2. Alt + Enter (windows 기준) 후, 사진과 같이 Add static import~ 를 선택. 📌그럼 이렇게 자동으로 import static이 된다! 2023. 3. 15. 이전 1 ··· 3 4 5 6 7 8 9 ··· 22 다음
