My Profile Photo

DongChanS's blog

수학과 학생의 개발일지

자바스크립트 (3) - 외부에서 데이터를 받기

1) Overview

자바스크립트는 브라우저를 조작하는 언어이기 때문에

이 언어를 이용하면 브라우저에 데이터들을 자유자재로 변화시킬 수 있는데요.

이번 시간에는 외부 API를 통해서 데이터를 받아보도록 하겠습니다.

1-1. 요약

  • 페이지를 구성
  • 자바스크립트 코드 -> 어딘가로 요청을 보냄
  • 데이터를 받음 -> 자바스크립트를 통해 페이지를 재구성

결론적으로 특정 api로 요청을 보내서 데이터를 받는 것이 우선되어야 한다.

물론 자바스크립트에서도 axios라는 파이썬의 request와 비슷한 라이브러리가 있지만 직접 구성해보도록 합시다.

1-2. Http method의 종류

  • GET : 조회하기
  • POST : 생성하기
  • PUT, PATCH : 수정하기
    • put은 데이터 전부를 받아서 수정할 때 쓰이고,
    • patch는 데이터 일부분만 수정할 때 쓰이는데, 일반적으로 put을 거의 쓴다고 합니다.
  • DELETE : 삭제하기

결론적으로 GET 메서드를 제외하고는 URL을 통해서 단순하게 실행될 수 없기 때문에 request header와 body(data)를 첨부해서 보내야합니다.

예를 들면, POST : /posts/1 을 통해서 새 아티클을 생성하려고 한다면,

{
    'userId' : 1,
    'title' : 'dongchans',
    'content' : 'good!'
}

이런 식으로 request.body에 넣어야 할 것입니다.

간단하게는 POSTMAN을 이용해서 체험할 수 있는데, 자바스크립트에서도 이러한 4가지 요청을 수행하기 위한 방식이 따로 있습니다.

2) XMLHttpRequest

XMLHttpRequest(줄여서 XHR)를 이용해서 데이터를 받을 수 있습니다.

2-1. XHR이란?

  • google.com에서 chrome 개발자의 Log XMLHttpRequests를 ON 시켜보자
  • 그리고 아무 키워드나 쳐보자.

1

그러면 이런 추천키워드들이 보이게 되는데 이건 구글이 키보드 한글자 한글자 입력할때마다 계속 GET으로 정보를 보내고, 실시간으로 정보를 받아서 브라우저를 조작하기 때문입니다.

자바스크립트에서도 XHR을 이용할 수 있습니다.

Mozilla 사이트에 따르면,

서버와 상호작용하기 위해 XMLHttpRequest(XHR) 객체를 사용합니다. 전체 페이지의 새로고침없이도 URL 로부터 데이터를 받아올 수 있습니다. 이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줍니다.

새로고침을 하지 않아도 알아서 데이터를 받아주는 좋은 녀석입니다.

이름과는 달리 XML 이외의 데이터타입도 잘 받아올 수 있습니다. 요즘은 더 편리한 JSON 데이터타입을 주로 받습니다.

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

2-2. Overview

우리가 요청을 보내고 데이터를 받기 위해서는 몇가지 스텝을 거쳐야 합니다.

  1. 요청을 정의하기
    • Http method를 정의하기
    • URL을 정의하기
  2. 다른 서버로 요청을 보내기.
    • 데이터와 헤더를 첨부할 필요가 있으면 첨부를 합시다.
  3. 응답을 받고나서 처리하기
    • 받은 데이터를 Event와 결합하여 잘 버무립시다.

2-3. XHR에서는?

위에서 정의한 스텝을 XHR로 시행하면 다음과 같습니다.

  1. 요청을 정의하기 : XHR.open(Method, url)

    open(method: string, url: string): void

    Sets the request method, request URL, and synchronous flag.

    synchronous flag도 보낸다고 하는데, 아직은 뭔지 몰라도 된다고함.

    (일단 synchronous flag를 정의하지 않으면 async하게 작동하는 함수이긴합니다..)

  2. (Option) 헤더를 정의하기 : XHR.setRequestHeader(name, value)

    setRequestHeader(name: string, value: string): void

    Combines a header in author request headers.

    • name : 설정 될 값을 가진 헤더의 이름
    • value : 헤더의 본문에 설정될 값

    예시)

    XHR.setRequestHeader(
    'Content-Type',
    'application/json;charset=UTF-8'
)

  3. 다른 서버로 요청을 보내기 : XHR.send(data)

    send(**body?: string Document Blob ArrayBufferView ArrayBuffer FormData URLSearchParams ReadableStream**): void

    Initiates the request. The body argument provides the request body, if any, and is ignored if the request method is GET or HEAD. Throws an “InvalidStateError” DOMException if either state is not opened or the send() flag is set.

    • body : body로 보낼 데이터인데, 보통 data는 string(JSON)으로 보내기 때문에 json을 권장합니다.

    • json을 만들기 위해서는 자바 Object를 JSON의 라이브러리를 통해 사용하는 것이 편리합니다.

      let data = {
    userId : 1,
    title : 'dongchans',
    body : 'ㅈㄱㄴ'
}
     
const jsonStr = JSON.stringify(data) // Object -> Json

    • JSON을 다시 자바 Object로 되돌리기 위해서는 parse라는 함수를 사용하면 됩니다.

      const parsed = JSON.parse(jsonStr) // Json -> Object

  4. 응답을 받고나서 처리하기 : XHR.addEventListener(event, callback_fn)

    이제 요청을 보내고나서 조금 기다리게 되는데, 이렇게 보낸 이후에 무언가를 해주기 위해서 EventListener를 추가해주면 됩니다.

    예를 들면, 데이터가 로드되고 난 뒤에 처리를 하고 싶다면,

    • Event : ‘load’
    • function : ‘load’가 끝난 이후에 결과를 출력해주기.
    XHR.addEventListener('load', function(e){
    const result = e.target.response
    console.log(typeof result) // string
    console.log(result) // json과 유사하게 생긴 string
    const jsObject = JSON.parse(result)
	console.log(jsObject)
})

    그런데 어찌됬건 result는 string(json 파일)이기때문에 (왜냐하면 자바스크립트 object를 보내고 받을 수는 없으니..)

    이걸 자바스크립트에서 사용하기 용이한 object로 바꿔줘야합니다.

comments powered by Disqus