Wecode 2차 프로젝트 시작전,
지금까지 사용하고 활용했던 부분들에 대해
정리하는 시간을 갖도록 해보겠습니다!

항상 탐구하고 기억할 수 있도록 노력하자👊

이번 1차 프로젝트를 통해 회원가입,로그인 그리고 Detail Page에
필요한 데이터까지 필요로 하는 데이터를 불러오는 방법들에 대해
배워볼 수 있던 좋은 시간이였습니다.
프론트 엔드 개발자로서 아직은 생소한 데이터 호출에 대해 알아 보겠습니다.

fetch() 함수의 사용법

백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답받습니다.
이 때 자바스크립트 Web API fetch() 함수를 쓰거나 axios 라이브러리를
사용할 수 있습니다. 아직 필자는 axios 라이브러리는 사용해보지 못했습니다.

이번 기회를 통해 http 통신의 요청와 응답에 대한 이해에 대해 좀 더 다가갈 수 있었고, 앞으로 Promise에 대해서도 관심을 갖고 공부를 해보도록 하겠습니다.

Get

• fetch() 함수에서 default method는 get입니다.
  이번 프로젝트에서 Detail Page부분의 데이터를 받아올 수 있었습니다.

Post

• 이제는 method가 post인 경우를 보겠습니다. fetch() 기본은 get이기 때문에 아무것도 작성하지 않아도 get으로 호출했는데, post인 경우에는 fetch() 함수에 method 정보를 인자로 넘겨주어야 합니다.
• 호출해야할 api가 get인지 post인지 모를떄는 api를 개발한 백엔드 개발자에게 물어봐야 합니다!

우리가 post method를 사용할 경우 모든 코드에 then이 두 번 있고, 첫 번째 then에서 res => res.json() 이 도대체 뭘까 궁금하지 않으셨나요?

자세히 알아보자면 promise 개념을 알아야 하는데, 이 포스팅에서는 promise 얘기는 하지 않으려고 합니다. 어떤 뜻인지 내용만 집고 넘어가겠습니다.

첫 번째 then의 res가 어떤 값이 들어오길래 res.json()을 리턴하는가?? 궁금하면 어떻게 하라고요? 네! console.log를 찍어봐야죠.

위의 화살표 함수에서 console.log를 찍어보려면 어떻게 해야 하나요?? 네 바로 return 하는 화살표 함수에 바디를 다시 만들어줘야 합니다. 그래서 코드 가장 처음에 ES5의 함수 선언식으로 바꿔보라고 한 것입니다. 함수 선언식으로 바꾸지는 않지만 바디가 추가된 화살표 함수로 수정해보겠습니다.

첫 번째 then 함수에 전달된 인자 res는 http 통신 요청과 응답에서 응답의 정보를 담고 있는 객체입니다. Response Object 라고 합니다.

그런데 console을 확인해보시면 백앤드에서 넘겨주는 응답 body, 즉 실제 데이터는 보이지 않을 것입니다. 즉 { success: true } 라는 JSON 데이터는 위의 코드로는 console에 찍히지 않을 것이라는 말입니다.

응답으로 받는 JSON 데이터를 사용하기 위해서는 Response Object 의 json 함수를 호출하고, return 해야합니다. 그러면 두 번째 then 함수에서 응답 body의 데이터를 받을 수 있습니다.

이상입니다~😎