api부분은 라이브세션 이후 에 과제 제출하였다..
난 너무 어려웠으니까 혼자 첨부터 다시 해봐야겠다.
나의 코드..
main.js
import Head from 'next/head';
import { useEffect, useState } from 'react';
import { getFlight } from '../api/FlightDataApi';
import FlightList from './component/FlightList';
import LoadingIndicator from './component/LoadingIndicator';
import Search from './component/Search';
import Debug from './component/Debug';
// 후반 테스트를 진행할 때 아래 import를 삭제합니다.
export default function Main() {
// 항공편 검색 조건을 담고 있는 상태
const [condition, setCondition] = useState({
departure: 'ICN',
});
const [flightList, setFlightList] = useState([]);
const [isLoading, setIsLoading] = useState(true);
// 주어진 검색 키워드에 따라 condition 상태를 변경시켜주는 함수
const search = ({ departure, destination }) => {
if (
condition.departure !== departure ||
condition.destination !== destination
) {
console.log('condition 상태를 변경시킵니다');
setCondition({ departure, destination })
// TODO: search 함수가 전달 받아온 '항공편 검색 조건' 인자를 condition 상태에 적절하게 담아보세요.ok
}
};
global.search = search; // 실행에는 전혀 지장이 없지만, 테스트를 위해 필요한 코드입니다. 이 코드는 지우지 마세요!
// TODO: Effeck Hook을 이용해 AJAX 요청을 보내보세요.
// TODO: 더불어, 네트워크 요청이 진행됨을 보여주는 로딩 컴포넌트(<LoadingIndicator/>)를 제공해보세요.
useEffect(async() => {
setIsLoading(true)
setFlightList(await getFlight(condition))
setIsLoading(false)
}, [condition])
return (
<div>
<Head>
<title>States Airline</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1>여행가고 싶을 땐, States Airline</h1>
<Search onSearch={search}/>
<div className="table">
<div className="row-header">
<div className="col">출발</div>
<div className="col">도착</div>
<div className="col">출발 시각</div>
<div className="col">도착 시각</div>
<div className="col"></div>
</div>
{/* <FlightList list={flightList} /> */}
{isLoading ? <LoadingIndicator /> : <FlightList list={flightList} />}
</div>
<div className="debug-area">
<Debug condition={condition} />
</div>
<img id="logo" alt="logo" src="codestates-logo.png" />
</main>
</div>
);
}
api를 하드코딩으로 받아온 파트1과 이번엔 api호출로 받아오는 파트2 부분.
FlightDataApi.js
import flightList from '../resource/flightList';
import fetch from 'node-fetch';
if (typeof window !== 'undefined') {
localStorage.setItem('flight', JSON.stringify(flightList));
}
export function getFlight(filterBy = {}) {
// HINT: 가장 마지막 테스트를 통과하기 위해, fetch를 이용합니다. 아래 구현은 완전히 삭제되어도 상관없습니다.
// TODO: 아래 구현을 REST API 호출로 대체하세요.
let query = '';
if (filterBy.departure){
query = query + `departure=${filterBy.departure}&`;
}
if (filterBy.destination){
query = query + `destination=${filterBy.destination}`
}
let url =`http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?${query}`
return fetch(url).then((resp)=>resp.json())
// let json = [];
// if (typeof window !== 'undefined') {
// json = localStorage.getItem('flight');
// }
// const flight = JSON.parse(json) || [];
// return new Promise((resolve) => {
// const filtered = flight.filter((flight) => {
// let condition = true;
// if (filterBy.departure) {
// condition = condition && flight.departure === filterBy.departure;
// }
// if (filterBy.destination) {
// condition = condition && flight.destination === filterBy.destination;
// }
// return condition;
// });
// setTimeout(() => {
// resolve(filtered);
// }, 500);
// });
}
개발자의 길에 당차게 들어서다!!