공부 하는 겸 작성하는 블로그

# fetch - POST, application/json 주로 사용하는 ajax 대신 fetch 로 POST방식 application/json 타입으로 통신하기! # 환경 /** * tool: sts 4.13.0 * version: 2.7.3-SNAPSHOT * java: 1.8 * type: maven * view: Thymeleaf */ # test page # test page html 바닐라JS 테스트 페이지 입니다.(not use jQuery) fetch # fetch (json) javascript example code function json() { // const value = document.getElementById('reqValue').value; const params = { t..

# fetch - POST, application/x-www-form-urlencoded 주로 사용하는 ajax 대신 fetch 로 POST방식 application/x-www-form-urlencoded 타입으로 통신하기! # 환경 /** * tool: sts 4.13.0 * version: 2.7.3-SNAPSHOT * java: 1.8 * type: maven * view: Thymeleaf */ # test page # test page html 바닐라JS 테스트 페이지 입니다.(not use jQuery) fetch # fetch (post) javascript example code function post() { const params = { text: reqValue.value, numbe..

# fetch - GET, application/x-www-form-urlencoded 주로 사용하는 ajax 대신 fetch 로 GET방식 application/x-www-form-urlencoded 타입으로 통신하기! # 환경 /** * tool: sts 4.13.0 * version: 2.7.3-SNAPSHOT * java: 1.8 * type: maven * view: Thymeleaf */ # test page # test page html 바닐라JS 테스트 페이지 입니다.(not use jQuery) fetch # fetch (get) javascript example code function get() { const params = { text: reqValue.value, number: 1..

# Hoisting, var, let, const 정리 얼추 알고 있는 Hoisting, var, let, const 한번 더 정리하기! # Hoisting HTML 삽입 미리보기할 수 없는 소스 자바스크립트 및 액션스크립트 코드를 인터프리터가 로드할 때, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 컨텍스트 내의 최상위로 끌어올리는 것을 의미한다. 즉 호이스팅은 자바스크립트 인터프리터가 코드를 읽는 방식이다. let을 사용한다고 호이스팅이 일어나지 않는 것이 아나라, 호이스팅이 일어나 스코프 내 최상위로 끌어올려지지만, 'undefined'를 할당하지 않기 때문에 'undefined'가 출력되는 것이 아니고 참조에러가 발생하게 된다. ES6 이후로 실제 현업에서는 var ..

# ready, load, onload, beforeunload example code jQuery 를 사용하지 않고, document ready, window load, body onload, window beforeunload 예제 코드 만들어보기! # javascript excample code const body = document.querySelector('body'); // jQuery: $(window).on('load', function() {}); window.addEventListener('load', (event) => console.log("[4-1] WINDOW LOAD")); body.onload = () => console.log("[4-2] BODY ON LOAD!"); wi..

# ajax - settings example code Spring Boot Thymeleaf(html) 에서 jQuery Ajax settings option코드 예시 # 환경 /** * tool: STS 4.13.0 * version: 2.7.3-SNAPSHOT * java: 1.8 * type: MAVEN * view: THYMELEAF * jQuery: 3.6.0 */ # jQuery Load # ajax example code // Ajax Send function send(url, method, input, isAsync, type, cbSuccess, cbError, cbComplate) { const ajaxObj = $.ajax(url, // #1. settings { method : m..

# ajax - POST방식으로 PUT, PATCH, DELETE 사용하기 (HiddenHttpMethodFilter) 프로젝트를 진행하면, 보안상의 이유로 http method 중 GET, POST 만 사용 가능 할 때가 있다. 그렇지만 굳이 굳이 @PutMapping, @PatchMapping, @DeleteMapping 를 사용하고 싶을 때, HiddenHttpMethodFilter를 적용하여 POST방식으로 요청하고 PUT, PATCH, DELETE 메소드를 @RequestParam으로 파라미터로 맵핑!GET, POST만 허용하기: https://hjho95.tistory.com/13# HTTP METHOD 종류HTTP에서 지원하는 요청 메시지는 다음과 같다. - GET: 클라이언트가 서버에게 U..

# ajax - PUT, PATCH, DELETE jQuery ajax 의 HTTP METHOD가 PUT, PATCH, DELETE 일 때, @ResponseBody로 파라미터 매핑하기# 환경/** * tool: STS 4.13.0 * version: 2.7.3-SNAPSHOT * java: 1.8 * type: MAVEN * view: THYMELEAF * jQuery: 3.6.0 */# page# html (일부분 발췌)PUT, PATCH, DELETE (application/json) # function (일부분 발췌)const test = { requsetsNew: function(method) { const input = { param1: $('#requsetsNew').val(), param2..

# ajax - multipart/form-data jQuery ajax 의 contentType이 multipart/form-data 일 때, FormData 와 MultipartFile 를 이용하여 file 데이터 맵핑하기! # 환경 /** * tool: STS 4.13.0 * version: 2.7.3-SNAPSHOT * java: 1.8 * type: MAVEN * view: THYMELEAF * jQuery: 3.6.0 */ # page # html (일부분 발췌) 파일 테스트 페이지 입니다. file one file list # function (일부분 발췌) $(document).ready(function() { $('#formFileOne').on('submit', function(even..

# jQuery Ajax(form tag) Spring Boot html form tag 를 이용하여 ajax 통신하기! # 환경 /** * tool: STS 4.13.0 * version: 2.7.3-SNAPSHOT * java: 1.8 * type: MAVEN * view: THYMELEAF * jQuery: 3.6.0 */ # page # html (일부분 발췌) form element submit # function (일부분 발췌) const test = { form: function(type) { sendForm(`/test/send/${type}`, $('#formSend'), function(result) { console.log(result.text); console.log(result.h..