[23.02.15] TIL

오늘 배운 것

 

비동기 함수는 가면 언제올지 모른다.......

 

나는 오늘 글쓰기 페이지에서 글 등록을 하면 데이터가 저장된 후 navigate를 통해 상세페이지로 넘어가는 로직을 짰다.

const { mutate, isError, isLoading } = useMutation((newPost: postType) =>
    axios.post('http://localhost:4000/posts', newPost)
  );

const [post, setPost] = useState<postType>({
    id: uuidv4(),
    title: '',
    nickName,
    sellerUid,
    content: '',
    price: '',
    imgURL: [],
    category: '',
    like: [],
    views: 0,
  });

const onSubmitHandler = async () => {
    mutate(post); 
    navigate(`/categorypage/${post.category}/${post.id}`);
};

 

상세페이지의 로직은 이렇다.

const { id } = useParams();

  const { data, isLoading } = useQuery(
    ['post', id],
    async () => {
      const response = await axios.get(`http://localhost:4000/posts?id=${id}`);
      return response.data;
    }
  );
  if (isLoading) {
    console.log('로딩중');
    return <div>Lodding...</div>;
  }
  if (!data || data.length === 0) {
    console.log('데이터없음');
    return <div>Mo data found</div>;
  }
  
  
  return (
    <>
      <p>제목:{data[0].title}</p>
      <p>내용:{data[0].content}</p>
      <p>가격:{data[0].price}</p>
      <p>카테고리:{data[0].category}</p>
      <p>닉네임:{data[0].nickName}</p>
      <p>조회수:{data[0].views}</p>
    </>
  );

 

 

문제가 되는게, 글을 등록하고 디테일페이지로 넘어가면 10번중 1~2번꼴로 데이터가 없다고 나온다.

도대체 왜이럴까..어떤 경로에서 데이터가 없다고 나오는걸까?

고민해본 결과, 경로를 찾았다.

 

카테고리 ALL에서 새로고침을 하고, 글쓰기를 눌러 글을 작성하면 데이터가 없다고 나오는 것,

정말 별의 별 코드를 다 추가했다 삭제했다..내가 이 문제를 해결하기 위해 어떤 것들을 시도했는지 기억도 안날 정도로 여러가지를 시도해 본 것 같다.

그러다 결국 튜터님을 찾아갔....의지하면 안되는데 ㅠㅠ

 

확인해보니 정말 어이없고 기초적인 실수를 해버린 걸 알았다.

비동기 함수에 await을 안붙혀준 것,

다시한번 공부해보고자 async와 await에 대해 찾아보았다.

https://ko.javascript.info/async-await

async와 await

async는 항상 프러미스를 반환, 프러미스가 아닌것은 프러미스로 감싸서 반환한다.

await는 프러미스를 만나면 프러미스가 끝날 때 까지 함수 실행을 기다리게 만들어준다.

프러미스가 처리되면, 그 결과와 함께 재 실행이 된다.

즉, 프러미스가 처리되길 기다리는 동안 엔진이 다른 일(다른 스크립트를 처리하거나 이벤트 실행 등)을 할 수 있게 해줘 리소스 낭비를 막는다. 

 

 

나는 await를 붙혀주지 않아 통신을 하러 갔다가 지 맘대로 일찍돌아오고 늦게돌아오고 했던 것 같다.

await를 붙혀주니 동일한 환경에서 데이터 없다는 일은 일어나지 않았다.