[230321] Promise 안의 object 안의 data/객체 접근하기 (feat..fetch)

---

🍀 오늘의 날짜 : 23년 03월 21일 
🍀 오늘의 주제 : Promise + fetch 

---

🔖 Fetch API

 

HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JS에서 접근하고 조작할 수 있는 인터페이스 제공하고 네트워크의 리소스를 쉽게 비동기적으로 가져올 수 있습니다. 

 

예전에는 XMLHttpRequest를 사용해서 기능을 사용했지만, Fetch 는 더 쉽게 사용할 수 있는 API 입니다. fetch( )가 반환하는 Promise 객체는 404, 500 과 같은 HTTP 오류 상태를 수신해도 거부되지 않습니다. 

※ 응답의 상태가 200 - 299를 벗어날 경우는 ok 속성이 false 로 설정 됩니다.

     → 네트워크 연결이 실패 되는 경우, 아예 요청을 완료하지 못한 경우, 

fetch( ' url .json' )
.then((response) => response.json())  // fetch로 받은 data 객체를 JS 객체로 프라미스로 변환 [파싱]
.then((data) => console.log(data));  // 위에서 받은 프라미스의 객체 값을 출력

 

 

🔹MDN_Fetch 사용하기

🔹참고 블로그 : fetch , Promise.all, body.json() 그리고 그 외

🔹참고 블로그 : fetch( ) 와 Promise

 

 

데이터들을 네트워크나 서버를 통해 받을 때, data.json 형식으로 받는 경우가 많은데 이 파일들을 fetch() 메서드로 받으면 위의 사진과 같습니다. Promise 객체안의 Object 객체안에 우리가 가져오거나 접근해야하는 진정한 값이 있기때문에 JSON 형태로 파싱을 하고 다시 Object 객체 안의 값을 data 로 받아서 출력하거나 이용할 수 있습니다. 

 

 

 

 

 

🔖 AJAX , AXIOS, Fetch, ASYNC

 

 

# ajax

비동기적으로 데이터 전송 및 처리를 하는 통신 기능 : JavaScript 를 이용한 서버와 브라우저 비동기 방식으로 서버와 통신하는 것이 주 목적입니다. XHR 객체( Promise 사용 X )를 이용해서 전체 페이지가 아닌 필요한 데이터만 불러올 수 있습니다.  그래서 웹 문서 전체를 새로 고침 할 필요 없다는 장점이 있습니다. 

   * JQuery 를 통해 쉽게 구현

   * 사실, 동기적으로도 통신할 수 있음.. 근데 필요한 경우가 거의 없다고 합니다. ( 전체 새로고침 ) 

 

 

 

# axios

Node.js 와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리입니다. 비동기로 HTTP 통신을 할 수 있고 return 을 Promise 객체로 하기 때문에 response 데이터를 다루기 쉽다고 합니다. 

 

 

# fetch

ES6 부터 들어온 JS 내장 라이브러리입니다. 

 

 

# async

일종의 문법으로 해당 메소드가 await 기능을 지니고 있음을 컴파일러에게 알려주는 역할. 비동기 프로그래밍을 (동기적 처리로 만드는 것)좀 더 쉽게 작업할 수 있게 해준다. 백에서 DB 처리 하거나, DB 완료 될 때를 기다리기 위해서 사용합니다. 

백엔드에서 async, promise 등을 이용해서 비동기 처리를 동기적 처리로 변경하지 않으면, login 데이터가 검증 처리되지 않고 login data 가 일치하는지에 대해 처리를 하지 않았는데 return 이 되어 서버 쪽에서 처리가 끝나버리면 프론트에서는 로그인이 제대로 되었는지 알 수가 없습니다. 

 

🔹참고 블로그 : Ajax, axios, fetch 

🔹참고 블로그 : 언제 동기식 /비동기식 Ajax 를 사용하는가. 

🔹MDN_AJAX

 

 

 

 

추가 공부 필요 내역 
# 웹서버와 클라이언트 
 - 클라이언트에서 Submit 을 클릭하면 어떻게 서버가 동작하고 클라이언테 어떤 식으로 뿌려지는 지에 대한 흐름.