서버 요청시 비동기 처리를 하지 않는다면?

 

✔️ 에러 코드

Uncaught TypeError: Cannot read properties of undefined (reading 'img')

 

 

✔️ 에러가 나온 이유

await 키워드를 사용하는 것을 깜빡했더니 위와 같은 에러가 나왔습니다. 

 

WHY??

👉 HTTP 요청은 비동기 처리 방식으로 동작하니까!

(참고)

2022.12.19 - [JavaScript] - [Deep Dive] 동기와 비동기, 비동기가 처리될 수 있는 이유

 

 

get 함수는 서버의 응답 결과를 반환하는 비동기 함수입니다. 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료됩니다. 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료됩니다. 

 

이때 await 키워드를 사용하는 것을 깜빡해서 비동기가 아닌 동기적으로 처리를 한다면 웹 브라우저에서 서버에 요청을 보내고 응답을 받을 때까지 다른 작업을 할 수 없게 됩니다. (서버로부터 모든 정보를 받기 전까지 화면이 하얗게 되면서 응답이 끝날 때까지 다른 작업을 할 수 없게 됩니다. )

 

await 키워드를 사용하는 것을 깜빡한 것을 알아채고 비동기적으로 서버 호출을 하면 화면이 하얗게 되는 것도 없고, 서버로 부터 응답이 끝나지 않더라도 다른 작업을 할 수 있게 됩니다.

 

 

👇에러코드 👇

const location = useLocation();
  const id = location.pathname.split("/")[2];
  const [product, setProduct] = useState({});

  useEffect(() => {
    const getProduct = async () => {
      try {
        const res = publicRequest.get("/products/find/" + id);
        setProduct(res.data);
      } catch (err) {
        console.log(err);
      }
    };
    getProduct();
  }, [id]);

---

👇에러  수정 코드 👇

  const location = useLocation();
  const id = location.pathname.split("/")[2];
  const [product, setProduct] = useState({});

  useEffect(() => {
    const getProduct = async () => {
      try {
        const res = await publicRequest.get("/products/find/" + id);
        setProduct(res.data);
      } catch (err) {
        console.log(err);
      }
    };
    getProduct();
  }, [id]);

 

---

 

참고)

딥다이브 책

https://shinystarforever.tistory.com/299

[Deep Dive] 동기와 비동기, 비동기가 처리될 수 있는 이유

https://inpa.tistory.com/entry/WEB-%F0%9F%8C%90-%EB%B9%84%EB%8F%99%EA%B8%B0Async%ED%86%B5%EC%8B%A0-%EB%8F%99%EA%B8%B0Sync%ED%86%B5%EC%8B%A0#%EC%9B%B9%EC%97%90%EC%84%9C_%EB%B9%84%EB%8F%99%EA%B8%B0_%EC%B2%98%EB%A6%AC_-_Ajax

[WEB] 🌐 비동기(Async)통신 / 동기(Sync)통신 정리

 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓