비동기 심화, 상태끌어올리기 StatesAirline 과제 Part 2

코플릿 7,8

2차원 배열(배열을 요소로 갖는 배열)을 입력받아 각 배열을 이용해 만든 객체를 리턴해야 합니다.
[['some', 'like'], ['first', 'second'], ['mike', 'ike'], ['first', 'Fox'], ['melee', 'brawl']]을(를) 입력받은 경우, { some: 'like', first: 'second', mike: 'ike', melee: 'brawl' }을(를) 리턴해야 합니다

문제풀이

function convertListToObject(arr) {
  let output={}
  for(let i=0; i<arr.length; i++){
    if(arr[i].length>0 && output[arr[i][0]]==undefined){
      output[arr[i][0]] = arr[i][1]
    }
  }
  return output
}

1. return 할 output객체를 만들었다.
2. 빈 array속 array를 거르고, key값이 없을때,
3. 첫 문자:두번째문자 가 되도록 지정해줬다.

convertDoubleSpaceToSingle
문자열을 입력받아 해당 문자열에 등장하는 두 칸의 공백을 모두 한 칸의 공백으로 바꾼 문자열을 리턴해야 합니다.
'this  here  string'을(를) 입력받은 경우, 'this here string'을(를) 리턴해야 합니다

문제풀이

function convertDoubleSpaceToSingle(str) {
  return str.replace(/  /g, " ")
}

1. replace (" ", " ")이렇게하면 처음 발견한 공백두개만 바뀐다.
2. replaceAll을 쓰고싶었으나 돌아가지 않아서 구글해보니 (/(공백두개)/g) 이렇게 쓰면 된다고 배웠다. 해결!

Part 2

🧩 Side Effect는 useEffect에서 다뤄야 합니다
✕ 검색 조건이 바뀔 때마다, FlightDataApi의 getFlight를 검색 조건과 함께 요청해야 합니다 (25 ms)
✕ getFlight의 결과를 받아, flightList 상태를 업데이트해야 합니다 (44 ms)
✕ 더이상, 컴포넌트 내 필터 함수 filterByCondition를 사용하지 않습니다
✕ 더이상, 하드코딩된 flightList JSON을 사용하지 않습니다 (초기값은 빈 배열로 둡니다)
✕ getFlight 요청이 다소 느리므로, 로딩 상태에 따라 LoadingIndicator 컴포넌트를 표시해야 합니다 (39 ms)
🧩 FlightDataApi에서 기존 구현 대신, REST API를 호출하도록 바꿉니다
✕ 검색 조건과 함께 StatesAirline 서버에서 항공편 정보를 요청(fetch)합니다 (2 ms)

AJAX 요청

const [isLoading, setIsLoading] = useState(true)

1. 로딩 유무에 대한 state를 만들어서, 불러오기 전을 로딩중, 후를 false로 지정했다.

{isLoading? <LoadingIndicator/>:<FlightList list={flightList} />}

2. 후에 로딩 화면을 불러올때 삼항연산자로, "로딩중이면 로딩화면을 불러오고, 아니면 필터된 목록을 불러와라" 를 구현했다.

useEffect(() =>{
    setIsLoading(true)
    getFlight(condition)
     .then((filtered) =>{
       setFlightList(filtered)
       setIsLoading(false)
      })
   }, [condition])

3. useEffect를 사용해 side effect를 다룬다.

FlightDataApi.js

export function getFlight(filterBy = {}) {
  let string=''
  if(filterBy.departure){
    string += `departure=${filterBy.departure}&`
  }
  if(filterBy.destination){
    string += `destination=${filterBy.destination}`
  }
  let url=`http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/${string}`
  
  return fetch(url)
  .then((res)=>res.json)
}

1. fetch를 통해 api를 불러왔다.
2. url의 끝에 필터할 변수를 불러와야하는데, departure와 destination을 따로 부르니 destination이 없을때인 기본 상태가 불러와지지 않아서 합치는 방법을 생각해냈다.