Bangta's quantum

이번에 leetcode에서 javascript를 사용하여 문제를 풀어보려고 했습니다. 그런데 생각해보니 제가 local에서 javascript 실행을 해본적이 없더군요. 그래서 이번에 local에서 test를 위한 환경을 설정해 볼까 합니다. intellij에서 nodejs를 사용하기 위한 기본적인 설치법과 간단한 사용 방법에 대해서 작성해 보겠습니다. 설치 1. nodejs 설치 https://nodejs.org/ko/download LTS(Long Term Support) 버전을 설치해 줍니다. 어떤 버전이든 상관없지만 이왕 안정적이면서 오래동안 지원해 주는 LTS 버전을 설치했습니다. 설치 확인 node를 실행해 봅니다. 저는 예전에 설치해서 버전이 한단계 낮네요. npm(node package m..

의 데이터를 보내기 위해 serialize를 하는 과정에서 특정한 값들이 자꾸 빠져서 넘어가길래 오랜시간 삽질을 했습니다. 다음부터는 삽질을 하지 않기 위해 간략하게 오늘 한 삽질에 대해 정리하려고 합니다. Serialize 시 disabled는 적용이 되지 않음. 제목 그대로 .serializeObject()혹은serializeArray() 처럼 데이터를 직렬화 시킬 경우 해당 태그에 disabled 속성이 존재하면 serialize에 포함되지 않습니다. 만약 client쪽에서 값 출력이 잘 되는데 server쪽에서 값이 넘어오지 않는다면 serialize 시 값이 누락된 것을 의심해 보시는것을 추천합니다. 막상 작성하니 글이 상당히 짧네요. 저처럼 이렇게 쉬운 경우에 반나절을 허비하시지 않으시면 좋겠..

Before we go 예전에 prop()와 attr()을 사용함에 있어 존재하는 차이점에 대해서 찾아본 적이 있습니다. 그런데 이번에 다시 사용하려고 하니 기억이 안나더군요. 그래서 후에 또다시 기억이 나지 않을 때 다시 볼 수 있도록 간략하게 정리하려 합니다. 버전에 따른 사용법 차이 jquery 1.6 이전 ​ 1.6버전 이전에는 attr()을 사용합니다. 이 때에는 property와 attribute가 구분되지 않는 형태로 결과값이 제공되었다고 합니다. jquery 1.6 이후 ​ 1.6버전 이후부터는 attr()은 속성 그 자체의 값을 반환하고 있으며, prop()는 속성값을 명시적으로 찾아낼 수 있는 방법을 제공합니다. https://api.jquery.com/attr/ As of jQuery..

버전 Bootstrap 5.13 Error modal에 값을 전달하기 위해 script로 .modal("show")를 사용하여 변환하는 과정에서 오류가 생겼습니다. modal.js:313 Uncaught TypeError: Cannot read properties of undefined (reading 'classList') at he._isAnimated (modal.js:313) at he._initializeBackDrop (modal.js:195) at new he (modal.js:83) at Function.getOrCreateInstance (base-component.js:55) at HTMLButtonElement. (modal.js:421) at HTMLDocument.s..

innerHTML innerHTML의 경우 기본적으로 태그를 일반 text 문자로 인식하게끔 되어 있습니다. 이는 https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0 해당 링크에서 나와 있듯이 script elements inserted using innerHTML do not execute when they are inserted. code injection과 같은 경우를 방지하기 위해서라는군요. 따라서 ajax로 페이지를 붙일 때 innerHTML을 제외하고 를 적용 시키는 방법은 총 2가지가 있습니다. elemental.innerHTML=string 대신 jQuery의 $(elemental).html(string)을 사용하면 됩니다. ..

Before 항상 jQuery의 ajax를 사용하여 비동기 요청을 주고 받았는데 요즘에는 대부분의 브라우저에서 fetch()를 지원한다는 글을 보았습니다. 그래서 저도 기본에 사용하던 $.ajax()를 fetch를 사용하여 바꿔 보기로 하였습니다. $.ajax | GET 기존 코드 $.ajax({ url: getContextPath() +"/restapi/member/memberList" , type: 'get', success: function(res) { console.log("성공"); console.log(res); }, error: function(xhr, error, msg) { console.log(xhr); console.log(error); console.log(msg); ..

Preview ElasticSearch로 데이터 받아오기 public List totalSearch( Map query , Map sort , Integer size ){ /* * search API 참고 주소 * https://www.elastic.co/guide/en/elasticsearch/client/java-rest/master/java-rest-high-search.html */ // search에 index 조건 걸기 SearchRequest searchRequest = new SearchRequest(); SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder(); // query에 있는 셋 쿼리 조건으로 걸기 searchSou..

Alert 창 중에 무료로 쓸만한 alter api를 찾다가 sweetalert를 접하게 되었습니다. sweetalert에는 1, 2가 존재하는데, 1은 약 3년 전부터 upload가 되어있질 않더군요. 그래서 2를 사용하게 되었습니다. Sweetalert2 사이트 주소 https://sweetalert2.github.io/ Sweetalert2 git 주소 https://github.com/sweetalert2/sweetalert2 Sweetalert2 cdn 주소 https://www.jsdelivr.com/package/npm/sweetalert2 cdn으로 전체 불러오기 기본 사용법 Swal.fire('Hello world!'); Swal.fire('Oops...', 'Something went ..

https://getbootstrap.com/docs/5.0/components/popovers/ html 태그 예시 Dismissible popover javaScript 예시 var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), { trigger: 'focus' }) 페이지 아래쪽 content 예시 실제 작성 코드 html 부분 $ javaScript $(function () { $("#listBody a").hover(function(){ // 초기화 후 토글 let url = this.href; let retValue = null; $.ajax({ url : url, dataType: "json", succ..