Javascript 자바스크립트 코딩의 기술 9장 외부 데이터에 접근하라 (2)

---

9장 외부 데이터에 접근하라

저번 포스팅과 마찬가지로,

개념적으로 부족한 부분이 많아 기본 개념과 설명이 많고,

예제 코드도 책이 아닌 직접 코딩을 해서 설명을 풀어보겠다.

tip45. fetch로 간단한 AJAX 호출을 처리하라

fetch() API

• HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공
• Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 취득 가능
• fetch() : 특정 정보가 필요한 클라이언트는 서버에 HTTP 통신으로 요청(request)을 보내고, 정보를 응답(response)받을 수 있다.
• fetch()는 대부분의 최신 브라우저에서 지원되지만 Node.js에서는 기본적으로 지원되지 않는다.
• Node.js에서 fetch()를 사용하려면 node-fetch 패키지를 사용하자.

요청(Request)

fetch("API주소",{
    method: "POST",
	headers: {"key" : "value"},
	body: JSON.stringfy({'key' : 'value'})
});

• fetch를 호출할 때, 인자를 2개 전달 가능
• 첫 번째 인자(필수) : 데이터를 요청할 API주소
• 두 번째 인자(선택) : 요청의 옵션 값들로 필요에 따라 객체의 형태로 전달
  (두 번째 인자로 전달하는 객체의 key중 자주 사용되는 것은 method, headers, body가 있는 요청, body가 없는 요청이 있다.)
• 예제 코드를 통해 알아보자

// 첫번째 인자만 받는 경우
fetch('http://localhost:8080/test');

// 두번째 인자까지 받는 경우
fetch('http://localhost:8080/test', {
	method: "POST",
});

fetch('http://localhost:8080/test', {
    method: "POST",
	headers: {
		'Content-Type':'application/json'
	},
});

// body가 없는 요청 예시
fetch('https://psip31.tistory.com', {
    method: 'GET'
});

• API 주소는 서버(백엔드)에서 받는다.(http:// IP주소(with 포트 번호) or 도메인 주소, 엔드 포인트)
• 두번째 인자 : 어떤 method로 요청할지 적어준다.(GET / POST / PUT / PATCH / DELETE 등등)
• 만약 method: "POST" 로 요청하는 경우 , headers에 Content-Type: application/json; 은 필수로 담는다
• 서버에 보낼 정보가 있는 경우, 요청 body에 담아서 보내는데, 이때 JSON.stringify로 JSON으로 형변환 하여 메서드에 담아 보내야 한다.
  • 통신 간, 서버와 클라이언트는 같은 언어일 수도 있고, 다른 언어일 수도 있다. 같은 언어라면 문제가 없지만 다른 언어라면 주고 받을 수 없다.
  • JSON 형태라면 어떤 언어에서든 원하는 데이터를 주고 받을 수 있다.
• 요청 body가 없는 경우 서버에 전달 해 줄 정보 없이 정보를 달라고 요청

응답(Response)

• 다른 방법으로 fetch() 메소드는 Promise를 반환하므로 async/await을 사용할 수도 있다.
• 저번 포스팅에서 알아본 async/await 코드를 통해 알아보자

async function fetchText() {
    let response = await fetch('/README.txt');

    console.log(response.status);
    console.log(response.statusText);

    if (response.status === 200) {
        let data = await response.text();
    }
}

fetchText();

// 200
// OK

• Response 객체는 status, statusText로 상태 코드와 상태 메시지 속성을 가지고 있습니다. 요청이 성공하면 상태 코드는 200이고 상태 메시지는 OK가 된다.
• 요청한 URL이 서버 에러라면 응답 코드는 500
• 만약 URL이 다른 새로운 리소스로 리다이렉트 되면 응답은 300-309가 되지만 Response 객체의 응답 코드는 200으로 설정되고 redirected 속성은 true로 설정
• fetch() 메소드는 웹브라우저 타임아웃이나 네트워크 연결 실패나 CORS 상황일 경우 reject Promise를 반환한다.
• 응답 코드가 200에서 299 사이인 경우 true 로 설정되는 ok라는 필드가 있다.(익스플로러는 지원 X, 엣지만 지원)
• 익스플로러를 지원해야 하는 경우에는 reponse.status를 이용해 200에서 299 사이의 값인지 확인!!

주의할 점

• 코드를 작성할 때는 AJAX 요청을 어디서 다룰지, 그 위치에 주의하자.
• fetch()는 대부분의 경우 인터넷 연결이 필요하고 API 끝점이 프로젝트 진행 중에 바뀔 수 있다는 점을 생각해야 한다.
• fetch() 작업을 한곳에 모아두는 것도 좋은 방법이다. 

tip46. localStorage로 상태를 장기간 유지하라

• 데이터가 반드시 문자열이어야 한다.
• JSON.stringify()를 이용해 데이터를 문자열로 변환해야 한다.
• 다시 가져올 때는 JSON.parse()를 이용해 자바스크립트 객체로 변환해야 한다.
• 아래 코드는 맵 객체를 localStorage에 저장하는 코드이다.

function savePreferences() {
  const filters = new Map([
      ["test1", "aaa"],
      ["test2", "bbb"],
      ["test3", 123],
  ]);
  const filterString = JSON.stringify([...filters]);
  localStorage.setItem('preferences', filterString);
}

• line 02 : 맵을 문자열로 바꾸려면 먼저 배열에 펼쳐 넣어야 한다
• line 03 : setItem('키', 값)로 setting 한다.
• 위 코드를 개발자도구에서 입력하고 savePreferences 함수를 호출하면 아래 사진과 같이,
  개발자도구(F12)-Application 탭-Local storage에 해당하는 맵 객체가 set된 모습을 볼 수 있다.

function retrievePreferences() {
  const preferences = JSON.parse(localStorage.getItem('preferences'));
  return new Map(preferences);
}

•  getItem('preferences')을 통해 가져와서 JSON.parse로 파싱 하여 Map 객체로 리턴하고 있다.
• 결과는 아래와 같다!

• sessionStorage : 이 도구는 서버 측 렌더링과 클라이언트 측 기능이 혼합되어 있는 경우에 유용하다.
• 페이지를 새로 고침하면 저장한 데이터가 유지되고, 사용자가 페이지를 떠났다가 다시 돌아오면 저장한 데이터가 없는 기본 상태를 보여준다.(추후 따로 포스팅 예정)

Reference

자바스크립트 코딩의 기술 요약 / 정리

MDN Web Docs-Fetch