반응형
로깅 주제
- [HTTP/네트워크] 실습
1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.
- 정신없는 화요일이 지났다. 역시 공휴일을 보내고 다시 오면 좀 어리버리해지는 것 같다.. 현재 리액트가 가장 많이 사용되고 있어, 숙지를 잘 해두어야하는데 아직도 정확히 어떤 느낌인지 잘 모르겠다ㅠㅠ아직 처음이라 그런가...? 얼른 리액트에 익숙해지고 싶다.
2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.
- 과제. StatesAirline Client - Part 2
3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.
- 과제. StatesAirline Client - Part 2
Side Effect, 로딩 화면
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 상태를 변경시킵니다');
// console.log({ departure, destination });
// TODO: search 함수가 전달 받아온 '항공편 검색 조건' 인자를 condition 상태에 적절하게 담아보세요.
setCondition({departure,destination});
}
};
const filterByCondition = (flight) => {
let pass = true;
if (condition.departure) {
pass = pass && flight.departure === condition.departure;
}
if (condition.destination) {
pass = pass && flight.destination === condition.destination;
}
return pass;
};
global.search = search; // 실행에는 전혀 지장이 없지만, 테스트를 위해 필요한 코드입니다. 이 코드는 지우지 마세요!
// TODO: Effeck Hook을 이용해 AJAX 요청을 보내보세요.
// TODO: 더불어, 네트워크 요청이 진행됨을 보여주는 로딩 컴포넌트(<LoadingIndicator/>)를 제공해보세요.
useEffect(() =>{
setIsLoading(true)
getFlight(condition) // local서버가 아닌 진짜서버에서 데이터를 받아온다
.then(filtered =>{
setFlightList(filtered)
setIsLoading(false)
})
}, [condition])
// TODO: 테스트 케이스의 지시에 따라 search 함수를 Search 컴포넌트로 내려주세요.
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>
{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>
);
}
StatesAirline Server API 사용
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 호출로 대체하세요.
return fetch(`http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?departure=ICN&destination=${filterBy.destination}`)
.then(response => response.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);
// });
}
반응형
'코드스테이츠 SEB FE 41기 > Section 별 내용 정리' 카테고리의 다른 글
| section2/Unit10/[Web Server] 기초(10/14~17) (0) | 2022.10.14 |
|---|---|
| section2/Unit10/[Web Server] 기초(10/13) (0) | 2022.10.13 |
| section2/unit9/[React] 클라이언트 Ajax 요청(10/11) (0) | 2022.10.11 |
| section2/unit8/[HTTP/네트워크] 실습(10/7) (0) | 2022.10.07 |
| section2/unit8/[HTTP/네트워크] 실습(10/6) (2) | 2022.10.06 |
