HTTP 요청으로 작업하기

개인과제 중에 fetch() API 따와서 하는게 있었는데 

해결하는데 제법 큰 도움이 되었다.

따오는 것말고도 보내기, 오류 잡기, XMLHTTP 방식으로 하기도 있었는데

XMLHTTPP로 시도했다가 서버측에서 코드 승인이 안나서 오류가 계속 나는 바람에

fectch로 급선회 해서 만들었다.

나중에 다시 봐야지

 

 

 

 

PART18. HTTP 요청으로 작업하기

367. HTTP의 배경의 자세한 내용 - pdf 참고

 

각 HTTP 요청에는 HTTP 메서드가 할당되어 있습니다

사용 가능한 몇 가지 HTTP 메서드를 보여드리면

GET, POST, PATCH, PUT 그리고 DELETE가 있습니다

각 메서드의 이름은 메서드의 역할을 묘사해 주고 있습니다만

서버가 특정 작업을 수행하기 위해 어떤 메서드와

URL 조합을 사용할지는 전적으로 서버에 달려 있습니다

따라서 서버에 필요한 작업을 지시하지 않는 메서드를 사용하면

서버는 서로 다른 엔드포인트를 노출합니다

 

GET 요청은 일반적으로 데이터를 얻기 위해 사용하고

POST 요청은 서버에서 데이터를 생성, 즉 데이터베이스에

저장되어 있는 서버에 데이터를 생성할 때 사용하겠죠

PATCH와 PUT은 데이터를 업데이트하는 데에

사용이 될 겁니다 PATCH는 기존 데이터를

업데이트하고 PUT은 덮어쓰기를 하겠죠

그리고 물론 DELETE은 데이터를 삭제합니다

 

HTTP 요청의 또 다른 부분으로는 잠재적 헤더가 있습니다

HTTP 요청에 연결할 수 있는 추가 메타데이터인데요

일부 요청 중에서 예를 들어

POST 요청 등은 요청 본문을 포함하거나

요청에 첨부된 추가 데이터 등을 포함하고 있습니다

 

게시물 생성에 필요한 데이터를 연결해야겠죠

제목이나 내용 등을 요청에 연결해서 전송해야 할 겁니다

바로 그런 방식으로 이루어지는 거죠

그리고 그런 데이터들은 다른 형식으로 전송이 될 수 있는데

어떤 형식을 기대하고, 지원할지는 서버가 결정합니다

가장 일반적인 형식은 JSON 데이터입니다

또 JavaScript에서 지원하는 Form 데이터도 널리 쓰임

 

368. HTTP 시작하기

https://jsonplaceholder.typicode.com/ 이용

369. GET 요청 보내기

 

그럼 어떻게 HTTP 요청을 보낼 수 있을까요?

새로운 XMLHttpRequest 객체를 생성하는 것으로 시작하면 됩니다

이름은 xhr로 할게요 상수의 이름입니다

그리고 new XMLHttpRequest()로 객체를 생성하겠습니다

const xhr = new XMLHttpRequest();

이렇게 시작하면 됩니다, 이 객체를 통해 HTTP 요청을 보낼 수 있게 되는데

이는 브라우저에 내장되어 있습니다 모든 브라우저가 이 객체를 지원하죠

 

요청을 보내 시작을 하려면

요청을 구성해야 합니다 이때 첫 번째 할 일은

객체를 사용하는 건데요 객체를 보유하고 있는 상수 xhr를

사용해, 이 상수에서 open() 메서드를 호출합니다

open이라고 하면 연결을 '여는' 역할을 할 것 같지만

실제로는 그렇지 않고 open()을 호출하는 것만으로는

네트워크 활동이 시작되지 않습니다

그저 요청을 구성하는 첫 번째 단계일 뿐이죠

xhr.open('GET','https://jsonplaceholder.typicode.com/posts');

open()에는 최소 두 개의 인자를 받는데요

첫 번째 인자는 사용할 HTTP 메서드를

설명하게 됩니다 여기서는 GET이죠

이제 여기에는 추가적인 인자가 필요한데

바로 해당 요청을 보낼 URL입니다

 

이제 요청을 전송하려면 xhr.send()를 호출하면 됩니다

이렇게 요청을 전송할 수 있죠

 

 

370. JSON 데이터 & 데이터 구문 분석

JSON은 JavaScript Object Notation(객체 표기법)을 의미합니다

배열의 JavaScript 객체와 매우 비슷한 형태이며 JSON은 JavaScript의

데이터 유형, 정확히 말하자면 JavaScript 배열과 객체에서 유래했습니다

거의 유사하지만 몇 가지 차이점이 있는데요,

JSON에는 데이터만 저장 가능하고 메서드가 없습니다

서버에 함수를 보낼 수 없죠

또한 프로퍼티 이름은 큰따옴표 내에 들어가야 합니다

반드시 끈따옴표여야 하며 큰따옴표로 묶여 있어야 하는 거죠

따라서 따옴표가 없는 사용자 ID는 사용할 수가 없습니다

작은따옴표도 허용되지 않기 때문에 큰따옴표가 필요합니다 그리고 값의 경우에는

숫자, 불리언, 문자열, 그리고 다른 객체나 배열 등이 지원되며

null도 가능합니다 JSON 파일의 특징이죠

 

이제 응답에서 이를 구문 분석하고

나중에 페이지에서 실제로

출력해 볼 수 있다면 좋겠네요 그렇게 하려면

요청을 보낼 때 어떻게 응답을 받을 수 있을까요?

load event를 기다려야 합니다 데이터가 로딩되면, 즉 요청이

완료되면 자동으로 발생하는 이벤트로 이벤트 리스너를 설정하면

가능한 작업입니다만 xhr이 항상

이벤트 리스너를 지원하지는 않습니다

예전 브라우저는 지원하지 않아요

Internet Explorer는 전혀 지원하지 않을 겁니다

따라서 이벤트를 리스닝하기 위한 더욱 흔한 방법으로는

이벤트 핸들러에 함수를 할당하는

방법이 있습니다 바로 xhr.onLoad 프로퍼티에

함수를 할당하는 거죠

이벤트 모듈에서 이 구문을 보신 적이 있으실 텐데 이벤트 리스너를 추가하는

또 다른 방법으로 알려 드렸던 적이 있는데요

addEventListener가 널리 지원되지 않은 경우에 사용됩니다

여기에 연결하게 될 함수는 어떤 구문으로도 작성 가능하며

저는 여기에서 들어오는 응답을 처리하는 함수 표현 구문 function()을 사용하겠습니다

하지만 이때 응답은 인자로 받는 것이 아니라

xhr.response 키에서 추출하게 됩니다

그럼 xhr.response를 console.log해서

작동하는지 확인합시다 코드를 이렇게 수정하고

 

xhr.onload = function ( ) {

const listOfPosts = xhr.response;

listOfPosts.push({});

};

만약 const listOfPosts = xhr.response를 입력해서

이를 저장하려 시도해 보면 여기에는 새로운 요소를

푸시할 수가 없습니다 이렇게 작성한 후에 새로 고침을 해보면

보시다시피 오류가 발생하는데요

xhr.response는 이렇게 사용이 가능한 배열이 아닌

JSON 데이터를 제공하기 때문이죠 이를 사용하기 위해서는

JSON 데이터를 JavaScript 유형으로 변환해야 합니다

JavaScript 배열 및 객체 등으로 변환해야 하는 거죠

JavaScript에는 이 작업을 위한 내장 헬퍼인

내장 JSON 생성자 함수 또는 클래스를 포함하고 있습니다

정적 헬퍼 메서드인 parse()와 stringify()입니다

stringify()는 JavaScript 코드나 객체, 배열을 JSON 데이터로 변환해 주며

parse()는 JSON 데이터를 JavaScript로 다시 변환해 주죠

 

XMLHttpRequest 객체에도 편리한 기능이 내장되어 있습니다

 

xhr.responseType = 'json'으로 xhr의 응답 유형을 설정하시면

정확히 이렇게 입력하셔야 합니다

그러면 자동으로 구문 분석이 되고

const listOfPosts = JSON.parse(xhr.response);

-> const listOfPosts = xhr.response;

이 줄을 복제하면

구문 분석을 수동으로 하지 않아도 저장이 가능한데,

이 코드가 내부에서 자동으로 구문 분석을 해주기 때문이죠

xhr.responseType = 'json';

이 추가 구성이 있을 때 그렇습니다

 

이제 listOfPosts가 있으니 콘솔에 출력하는 것도 좋았으나

index.html 파일에 출력하려면 어떻게 해야 할까요?

여기에는 posts 클래스가 있는

순서 없는 목록인 ul이 있죠 여기에 출력을 하려 하는데

이 부분을 보시면 출력에 사용할 수 있는 목록 항목인 li가 있습니다

그럼 여기에 상수를 추가할 텐데요

const listElement를 추가하고 document.querySelector로

액세스를 한 뒤 post 클래스를 선택합니다

해당 페이지의 posts 클래스에는 하나의 요소만 있으니까요

다음은 index.html에 있는 template에 액세스할 수 있는데

여기에 id를 추가할 수 있겠죠

템플릿 태그로만 선택하셔도 됩니다만

template id='"single-post"로 id를 부여하고요 이름은 임의로 정하시면 됩니다

이제 이 템플릿을 선택해서 const postsTemplate

= document.getElementById('single-post')를 입력해 줍니다

이제 게시물을 추가하거나 또는 이 listOfPosts를

ul에 추가하기 위해서 혹은

여기 있는 모든 게시물들을 전부 listElement에 넣기 위해

listOfPosts 전체를 반복문으로 반복을 시킬 텐데요

 

 

 

371. JSON 데이터 파헤치기

 

일반적으로 데이터는 클라이언트 측 코드와 백엔드("서버") 사이에서 "JSON" 데이터로 전송됩니다.

 

JSON은 JavaScript Object Notation의 약자로, 아래와 같습니다.

 

{

"name": "Max",

"age": 30,

"hobbies": [

{ "id": "h1", "title": "Sports" },

{ "id": "h2", "title": "Cooking" }

],

"isInstructor": true

}

JSON 데이터는 객체({}), 배열([]), 문자열(반드시 큰 따옴표 사용!), 숫자(따옴표 없이)와 불리언(따옴표 없이)을 지원합니다.

 

모든 객체 키(예: "name")는 큰 따옴표로 묶어야 합니다. 따옴표가 없는 경우나 작은 따옴표의 경우는 허용되지 않습니다!!

 

모든 JSON “객체”는 따옴표로 묶입니다. 결국에는 JSON 데이터가 위에 표시된 형식의 데이터를 포함하는 문자열이기 때문입니다.

 

여러분이 직접 테스트해볼 수 있습니다 - 다음 JSON JavaScript가 아닌 객체를 가져와서 JSON.stringify()를 적용해 보세요. 그러면 JSON 데이터로 변환됩니다. 개발 도구 콘솔에서 그렇게 하면 결국 위에서 살펴본 대로 형식이 지정된 데이터가 포함된 문자열을 얻게 됩니다.

 

const person = { // 이것은 JSON이 아닙니다 - 일반("날 것의") JavaScript 객체입니다!

 

name: 'Max',

age: 30,

hobbies: [

{ id: 'h1', title: 'Sports' },

{ id: 'h2', title: 'Cooking' }

],

isInstructor: true

};

 

const jsonData = JSON.stringify(person); // JS 데이터를 JSON 데이터 문자열로 변환

console.log(jsonData); // 컴퓨터가 읽을 수 있는 JSON 데이터가 포함된 문자열

console.log(typeof jsonData); // string

기계에 대한 구문 분석이 쉽고 사람이 읽기에도 나쁘지 않기 때문에 JSON 데이터를 사용합니다.

 

JSON 데이터를 수신하고 이를 다시 일반 JS 데이터로 변환하려는 경우 JSON.parse()를 사용할 수 있습니다:

 

const parsedData = JSON.parse(jsonData); // yields a "raw" JS object/ array etc.

알아두면 좋은 정보. 데이터를 JSON으로 변환할 수 있는 것은 객체로 제한되지 않습니다. 숫자, 배열, 불리언 또는 문자열도 변환할 수도 있습니다 - JSON이 지원하는 모든 데이터 유형이 변환 가능합니다.

 

const jsonNumber = JSON.stringify(2); // "2"

const jsonText = JSON.stringify('Hi there! I use single quotes in raw JS'); // ""Hi there! ...""

const jsonArray = JSON.stringify([1, 2, 3]); // "[1,2,3]"

const jsonBoolean = JSON.stringify(true); // "true“

 

372. HTTP 요청 프로미스화하기 <- 강의 다시 시청

373. POST 요청으로 데이터 보내기 <- 강의 다시 시청

 

여기까지가 서버로 보낼 post 데이터인데

이걸 어떻게 전송할 수 있을까요?

sendHttpRequest() 함수를 재사용하면 됩니다

위에서 생성했던 함수죠 그리고 이때 URL은

이전과 동일합니다, 우리가 통신 중인 서버가 이 URL을 지원하죠

 

374. UI를 통해 요청 트리거하기

375. “페치” 버튼은 항상 추가

376. DELETE 요청 보내기

377. 오류 처리하기

------------------------------------------>xmlhttp 나중에 다시

378. fetch() API 사용하기

또한 fetch API는 이름은 이 API가 단 하나의 키 함수

즉, fetch 함수를 통해 작동하여 붙었는데, 이 함수는 브라우저에

내장되어 있고 JavaScript에서도 동일한 방식으로 사용 가능합니다

fetch를 어떻게 쓰면 되는 걸까요? 가장 쉬운 방법은 fetch 함수에

URL을 입력하는 겁니다 이 URL이 fetch의 문자열이 되고

GET 요청을 전송하는 식이죠

따라서 fetch에 입력한 URL에 GET 요청이 전송되는 겁니다

fetch는 기본적으로 프로미스 기반 함수입니다

본 강의에서 나오는 첫 번째 네이티브 프로미스 API라고 할 수 있죠

우리가 따로 프로미스를 지정할 필요 없이

자체적으로 프로미스를 사용하는 API입니다

XMLHttpRequest를 이용한 접근 방법과는 다르게

 

fetch 함수는 xhr.response처럼

파싱된 응답이 아닌 스트리밍된 응답을 반환합니다

즉, 응답 객체에 바로 사용할 수 있는

응답 본문이 포함되는 대신에

이 작업을 해야 합니다

return fetch(url).then(response => {

response.text();

return response.json();

});

response 객체가 생기고 나면

response.json 메서드를

사용할 수 있게 되는데, 이 메서드에 대한 결괏값을 반환하도록 하는 겁니다

이렇게 하면 새로운 프로미스가 도출되기 때문이죠

response 객체에 대해 JSON을 호출하면

fetch API가 해당 response 본문을 파싱하고

이를 JSON에서 JavaScript 객체와

배열로 변환하는 작업을 합니다 실질적으로 파싱

즉, json.parse의 대체가 되는 함수가 아니라

이를 스트리밍된 응답 본문으로 바꾸어서 해당 response 객체를

작업 가능한 스냅샷으로 만들어 주는 겁니다

요약해 보면 response.JSON를 호출해서 response 본문을

파싱 안 된 스트리밍 본문에서 파싱된 스냅샷 본문으로 바꾼다는 거죠

이와 더불어　response.text는 일반 텍스트로 값을 반환하는데

이를 통해 스트리밍된 응답을 스냅샷이나 응답 블록으로

전환할 수 있습니다

 

379. fetch() API를 이용해 데이터 POST하기

380. 요청 헤더 추가하기

 

일부 API에 대해서는 가령 전송하는 데이터의 유형을

설명해야 한다거나 추가적인 인증 데이터를 필요로 하는

경우가 있습니다, 이때 헤더가 전송되는 요청에 첨부할 수 있는

메타데이터 역할을 하는 셈이죠

 

381. fetch() & 오류 처리하기

382. XMLHttpRequest vs fetch()

383. FormData로 작업하기

384. 마무리