6주차 비동기? 동기는 있는데예

알림 페이지를 만드는 과정에서 원하는 값이 1개씩밖에 나오지 않아 주말내내 고민했었다.
일단 모든 발행글에서 filter를 이용해 내가 쓴 글까지는 뽑아냈는데 아무리 해도 내가 쓴 글에 신청한 사람들 명단이 한명씩밖에 나오지 않는 것이다. for of 문을 사용해 객체를 반복해 주었는데도 1명분의 데이터밖에 나오지 않았다. 분명 신청한 사람은 여러명인데... axios가 한명밖에 뱉지 않아서 너무나 괴로웠다.

 useEffect(() => {
 
    let myGames = allGames.filter((e) => e.gameCreator.uid === user.uid)
    console.log('내가쓴글', myGames)


    for (let item of myGames) {
    let gameNo = item.gameNo

    baseApi(`/games/${gameNo}/users`, {
         headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`,
        },
    }).then((response) => {
       setApplyUsers(response.data.content)
     })
    }
   setApplyUsers(array)
   }
 }, [allGames])

비동기 그게 뭔데요 링크참조

ajax는 내가 5명의 데이터가 필요해도 일단 준비가 되는 1명의 데이터부터 먼저 보여준다. 그래서 1차적으로 내가 한꺼번에 보고싶은 데이터를 모아주는 과정이 필요했다.

      let array = []
      for (let item of myGames) {
        let gameNo = item.gameNo

        baseApi(`/games/${gameNo}/users`, {
          headers: {
            Authorization: `Bearer ${localStorage.getItem('token')}`,
          },
        }).then((response) => {
          array.push(...response.data.content)
        })
      }
      setApplyUsers(array)

빈 array를 만들어주고 결과값이 나올때마다 array에 데이터를 push 해준다. 그리고 그 배열을 setApplyUsers에 담아준다.

비동기 문제는 알림 페이지에서 뿐만이 아니라 ajax를 호출하는 다양한 과정에서 벌어졌다.
테이블을 불러와야 하는데 테이블에 포함되어있는 지도 호출이 늦어져서 빈 화면만 보인다던가, 아니면 아직 데이터가 호출되지 않았는데 클릭해서 오류가 뜨는 등의 다양한 문제에 직면한다.

async await : 드림코딩 강의 참고

오류화면을 줄이기 위해 async await를 axios에 적용하는 과정을 진행하고 있다

useEffect(()=>
allmygames()
},
[]);

const allmygames = async () => {
  await axios
    .get("/likedClubs/ids")
    .then((res) => setAllGames(res.data));
};

promise의 이해가 선행되어야 하기 때문에 다른 강의도 찾아보면서 계속 코드를 수정해갈 예정이다.