개발을 하다보면 클라이언트(프론트)에서 서버(백) 서버간 데이터를 주고 받아야 할 때가 있다. javascript에서 HTTP통신으 할 때 많이 쓰는 게 ajax, axios, fetch인데.. 지금까지 프로젝트를 하면서 썼던 건 1. JQuery 라이브러리를 활용한 ajax 통신 2. axios 라이브러리를 활용한 axios 통신 이렇게 2개였다. 조금 더 편하기 하게 위해 외부라이브러리를 이용했었는데.. ajax와 axios의 자세한 내용은 아래 링크 확인 https://bongra.tistory.com/57 [JS] AJAX를 통한 동적으로 서버통신을 해보자. (feat. Js, JQuery, Axios) 오늘은 AJAX를 통해서 동적인 서버통신을 한번 해보겠다~~ AJAX란? Ajax란 Async..

이번에는 API를 활용하여 카카오톡의 오픈API인 카카오 지도를 가져와보자. 그리고 주소를 검색하는 기능도 한번 만들어 보자~ 그럼 바로 시작 지도를 뿌리는 건 매우 쉽다. 여기서는 따로 설명을 하지 않겠다. 아래 링크를 그대로 따라가면 된다. https://apis.map.kakao.com/web/guide/ 그럼 아래와 같이 된다. kakaoApi.jsp kakaoApi.js $(document).ready(function(){ var container = document.getElementById('kakaoMap'); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(33.450701, ..

오늘은 AJAX를 통해서 동적인 서버통신을 한번 해보겠다~~ AJAX란? Ajax란 Asynchronous JavaScript and XML의 약자입니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. 라고 구글에는 적혀 있다. AJAX를 이용하면 좋은 점은 다음과 같다. 우선 보통의 폼방식과 같이 서버통신을 하게되면 전체페이지가 새로고침된다. 하지만 AJAX는 웹페이지의 일부분만 갱신이 가능하기 때문에 쓸모 없는 것 까지 갱신을 할 필요가 없어 속도가 빠르다. 설명은 길게 써도 이해가 안되니 바로 어떻게 쓰는지 보자. 본문에서는 어떻게 통신을 하는지만 다루도록 하겠다 여기서는 크게 3가지 방법으로 AJAX를 사용해보도록 하겠다. ====================..