Front30 [jQuery] jquery validation 사용 시 submit 막기 상황 jquery validation 라이브러리 사용하여 유효성 검사를 했다. 보통 유효성 검사에 통과하면 서버에 데이터를 보내고 DB에 저장,수정을 하는 로직을 태운다. 기본적인 jquery validation 라이브러리 사용법은 아래 포스팅 참고!👇 2023.02.28 - [Front/JavaScript & jQuery] - [jQuery] 제이쿼리 validation 플러그인으로 쉽게 유효성 검사하기 하지만 이번 요구사항에는 유효성 검사에 통과하면 미리보기처럼 하단에 리스트를 하나씩 차곡차곡 쌓고, 맨 마지막에 [저장] 버튼을 클릭했을 때 쌓아놓은 리스트들을 한꺼번에 DB에 저장하도록 구현해야 했다. 적용 ✔️1. html 파일의 form 태그에 onsubmit="return false;" 추가 ✔.. 2024. 2. 16. [jQuery] Sortable 드래그앤드랍 drag&drop 순서 변경 후 처리하기 상황 목록을 drag&drop을 이용하여 정렬 순서를 변경하는 기능을 구현할 때, 좀 더 쉽게 jQuery-ui 라이브러리 내에 sortable 을 사용할 수 있다. 참고로 drag&drop 기능을 바닐라JS를 사용해서도 구현할 수 있다. 이전 포스팅 참고!👇 2021.12.21 - [Front/JavaScript & jQuery] - [JavaScript] 드래그 앤 드롭, 위 아래로 이동시키기 정렬 기능 구현은 어렵지 않게 했는데, drag&drop으로 정렬을 마친 후에 다른 기능을 수행하려면 어떻게 해야할까? 적용 ✔️정렬을 마치고 DOM의 위치가 변경되었을 때를 감지하는 이벤트를 아래와 같이 추가하면 된다. $( ".dragTable" ).off("sortupdate").on("sortupdate.. 2024. 2. 16. input이 하나인 경우, enter키를 누르면 form submit 되는 현상 막기 상황 form태그 안에 input 태그가 오직 하나인 경우 엔터를 치게 되면 기본적으로 submit이 된다. 의도하지 않은 submit을 막기 위한 방법은 여러가지가 있다. 그 중에 내가 사용한 방법을 정리해보려고 한다. 적용 📌form 태그에 onsubmit="return false;" 를 주어 submit을 막는다. 📌onkeyup에 엔터(keyCode == '13') 인 경우에 실행할 함수를 호출한다. 검색 📌fnSearch() 함수 부분 : 이제 submit 속성을 true로 바꾸어준다. function fnSearch(){ $('#frm').attr("onsubmit", "return true"); $('#frm').submit(); } 2023. 7. 18. [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. 이전 1 2 3 4 5 다음
