React _ REST API 호출

statesAirline Client _ Part 2

StatesAirline Server API를 사용한다. (클라이언트에서 항공편을 조회할 때 사용되는 API)

• 검색 조건과 함께 StatesAirline 서버에서 항공편 정보를 요청하도록 한다. (fetch를 이용하여 getFlight 함수를 REST API 호출로 대신한다.)
• Request의 경우 query parameter 를 사용할 수 있다.
• Responce는 JSON 형식이다.
• 더 이상 하드코딩된 flightList JSON을 사용하지 않는다.

1. 기존에 구현된 getFlight 함수를 살펴보자.

앞선 useEffect 부분에서 getFlight 함수는 검색 결과에 맞게 필터링을 해주는 함수라고 하였다. FlightDataApi.js의 getFlight 함수를 참고하여 만들어보자.

2. fetch 이용하여 getFlight 함수를 REST API 호출로 대신하기.

export function getFlight(filterBy = {}) {
  
  let queryString = "";
  if (filterBy.departure) {
    queryString = queryString + `departure=${filterBy.departure}&`;
  }
  if (filterBy.destination) {
    queryString = queryString + `destination=${filterBy.destination}`;
  }

  let endpoint =
    "http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?" +
    queryString;

  return fetch(endpoint).then((res) => res.json());

}

request는 query parameter를 사용해도 된다고 하였으므로 query parameter를 사용해 departure, destination 의 값을 filterBy로 받아온 값으로 바꾸어보자. query parameter는 /flight?departure=ICN&destination=CJU 와 같이 사용할 수 있다.

1. 우선, endpoint 뒤에 붙여질 query parameter를 담을 문자열, queryString을 만든다.

2. 받아온 객체, filterBy의 departure 값이 존재할 경우, 위의 예시와 같이 queryString = queryString + `departure=${filterBy.departure}& `으로 값을 넣어준다.

3. 받아온 객체, filterBy의 departure 값이 존재할 경우, 위의 예시와 같이 queryString = queryString + `departure=${filterBy.departure}& `으로 값을 넣어준다. (departure과 destination이 쌓여야 하므로)

4. endpoint 라는 변수를 하나 만들고 여기에 주어진 endpoint인 http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/ 과 만든 query parameter, queryString을 더해준다.

5. fetch의 첫 번째 인자, url에 만든 변수 endpoint를 담아주고, json 형식으로 만들어준다.