23/01/27_AJAX

강해경·2023년 1월 27일
0

Today I Learned

목록 보기
32/36
post-thumbnail

최근에 코딩애플 유튜브를 보는데 제가 처음 자바스크립트 코드를 짜고 비동기 방식으로 데이터를 가져오면서 헷갈렸던 ajax, json 등의 개념을 쉽게 잘 설명해 주셔서 영상으로 봤던 내용들을 정리해 보려고 합니다.

AJAX란?

ajax는 Asynchronous Javascript And XML 의 약자로 자바스크립트와 XML을 이용해 서버와 비동기적으로 테이터를 주고받는(서버와 통신하는) 방법을 말합니다. 최근에는 XML보다 JSON을 더 많이 사용합니다. 그렇다면 여기에서 말하는 xml과 json이란.. 데이터 포맷으로 서버에 데이터를 요청하면 xml 혹은 json등의 형식으로 데이터를 담아 보내줍니다.

데이터 포맷

데이터 포맷에는 언급된 xml과 json 말고 매우 다양한 형식이 존재합니다. 그중에서 세 가지 입니다.

  • XML
<데이터이름></데이터이름>
<name>kim</name>
<age>20</age>

html과 유사한 위 형식으로 데이터를 담는 방식입니다. 자바스크립트를 사용하면 object자료로 쉽게 변환이 가능합니다. 하지만 괄호등의 기호 등을 사용하여 보기에 좋지 않고 용량을 많이 차지한다는 단점이 있습니다.

  • CSV
name, age, color
kim, 20, black
kang, 44, orange

표 모양으로 만든 데이터 포맷으로 데이터베이스에 있던 데이터를 변환하기 쉽다는 장점이 있습니다. 하지만 고차원데이터는 담아내기가 힘듭니다.

  • JSON (JavaScript Object Notation)
{ "name": "kim",
  "age": "20" }

위 포맷의 단점들을 보완하여 현재 많이 쓰이고 있는 방식으로, key-value형태로 데이터를 저장합니다. 자바스크립트 object와는 달리 문자로 취급하여 서버에서 가져온 json데이터는 JSON.parse(json) 을 통해 js객체로 변환(파싱)하여 사용하고 js객체를 서버로 전송할 때는 json.stringify(obj) 로 문자열로 변환 후 전송해야 합니다.

서버에 데이터 요청하는 방법

1. 주소창에 url 입력

주소창에 원하는 url을 입력하면 가져온 데이터를 확인할 수 있습니다.

2. 버튼으로 get 요청

<form action='원하는 url' method='get'>
  <button type='submit' />
</form>

form태그를 이용해 원하는 데이터를 가져올 수 있습니다. 하지만 버튼이 실행되면 페이지 전체가 새로고침 된다는 단점이 있습니다.

3. ✨ ajax로 get요청 ✨

js코드로 데이터를 요청하기 때문에 페이지의 새로고침없이 일부 데이터만 가져와 수정할 수 있다는 장점을 활용해 SPA 웹어플리케이션 만들기에 적합합니다. ajax로 get요청하는 방법은 크게 아래 세가지 방법이 있습니다.

  • 옛날js방식
var ajax = new XMLHttpRequest();
	ajax.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
    	console.log(ajax.reponseText)
    	}
    };
	ajax.open('GET', '원하는 url', true);
	ajax.send();
  • 요즘 문법(fetch 함수 사용)
fetch('원하는 url')
	.then(res => {
  		return res.json()
	})
	.then(res => {
  		console.log(res)
	})
  • 외부 라이브러리 활용(axios 사용)
axios.get('원하는 url')
	.then(res => 
  		console.log(result.data)
	).catch(error => 
        console.log(error)
    )

0개의 댓글