투케이2K

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : ajax [소스 코드] ​ [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : axios [소스 코드] ​ [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : axios [소스 코드] ​ [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : ajax [소스 코드] ​ [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : axios [소스 코드] ​ [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : axios [소스 코드] ​ [결과 출력]​ ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : axios [소스 코드] ​ [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : ajax [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. new Object : json 형태로 데이터를 삽입할 수 있습니다 3. object[key] = value 형식으로 쿼리파라미터 형식을 지정합니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : ajax [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. $.ajax() : 비동기식 Ajax를 이용하여 HTTP 요청을 전송합니다 3. JSON.stringify : json 객체를 출력해줍니다 4. 동기식 : 하나의 로직처리가 완료된 후 다음 로직을 순차적으로 처리합니다 5. 비동기 : 로직 처리가 비순차적(하나가 끝날 때 까지 기다리지 않음)입니다 6. async / await : 동기식으로 처리를 해야하는 쪽 함수에서 사용합니다 7. Promise : 자바스크립트 비동기 처리에 사용되는 객체이며, 서버 응답 값을 리턴할 때 사용합..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : ajax [소스 코드] ​ [AJAX 결과 출력] ​ ​ [스프링 서버 결과 출력] [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. new Object : json 형태로 데이터를 삽입할 수 있습니다 3. object[key] = value 형식으로 쿼리파라미터 형식을 지정합니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : ajax [AJAX 소스 코드] ​ ​ [스프링 서버 컨트롤러 소스 코드] // [post body json : Map 방식] // [경로 지정 : http://localhost:7000/testPostBodyJson] // [body json 데이터 : {"idx":"1", "name":"투케이"}] @PostMapping("/testPostBodyJson") public String testPostBodyJson(@RequestBody Map param) { System.out.println("\n"); System.out.println("======================================="); System.out.pr..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. post 쿼리 파람 방식으로는 [url에 바로 붙여서 전송 방법], [data 쪽에 삽입 후 전송 방법] 등이 있습니다 3. 전송 형태 : http://localhost:7000/selectMultiWhere?name=김&deptList=[고구려, 백제, 신라] */

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax [소스 코드] ​ [결과 출력] ​ ​ [요약 설명] ​ /* [JS 요약 설명] 1. $.ajax() : 비동기식 Ajax를 이용하여 HTTP 요청을 전송합니다 (가장 흔히 사용) 2. beforeSend : 통신 요청 전 필요한 헤더 값을 정의합니다 3. success : 요청 성공 시 리턴 받는 데이터를 확인할 수 있습니다 4. error : 요청 실패 에러 상태를 표시해줍니다 5. complete : 요청 완료 상태를 표시해줍니다 6. POST BODY JSON 전송 시 설정 값 : - xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8"); - da..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax [소스 코드] [결과 출력] [요약 설명] ​ /* [JS 요약 설명] 1. document.getElementById : 특정 객체 id 를 설정합니다 2. new FormData : 폼 데이터 객체를 생성합니다 3. 참고 : processData, contentType을 false 값으로 설정해야 폼 데이터 형식으로 인식합니다 */ [추가 참고 자료] ​ https://blog.naver.com/kkh0977/222432745922 13. (spring/스프링) Post Body Form Data 사용해 서버 로컬에 사진 이미지 저장 실시 - post man (포스트맨) [ 개발 환경 설정 ] 개발 툴 : inteli j 개발..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. JSONP : 외부로 들어오는 악성코드들 예방하기..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax /* =========================== */ ​ /* =========================== */ [메소드 종류] ​ /* =========================== */ ​

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax /* =========================== */ ​ /* =========================== */ [get 방식] GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식입니다 GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장됩니다 또한, GET 방식은 보통 쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있습니다 GET 방식은 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청하는 것이 좋습니다 ​ [post 방식] POST 방식은 데이터(data)를 별도로 첨..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax /* =========================== */ ​ /* =========================== */ [동작 원리] ​ ​ 1 : 사용자에 의한 요청 이벤트가 발생합니다. ​ 2 : 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출됩니다. ​ 3 : 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보냅니다. 이때 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있습니다. ​ 4 : 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리합니다. ​..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. XMLHttpRequest : 비동기식 통신 방식 객체이며, 서버와 데이터를 교환할 때 사용됩니다 2. xhr.open : 서..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : ajax /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다 2. Ajax를 이용하면 백그라운드 영역에서..