fix(fe): data fetching 실습 내용 추가

content/docs/frontend/5. Data Fetching.md

@@ -7,7 +7,7 @@ lastmod = "2023-10-05"
 weight = 250
 +++
 
-![사이트 동작 흐름](images/web.png)
+{{< figure src="../images/web.png" alt="메인 페이지" >}}}
 
 지금까지 사용한 포켓몬 데이터를 코드 또는 로컬 파일에서 가져왔어요. 이번 시간에는 외부에서 데이터를 가져오는 방법에 대해 알아보아요!
 
@@ -26,7 +26,23 @@ weight = 250
 - GraphQL
   - [GraphQL이 뭔가요? - 얄팍한 코딩사전](https://www.youtube.com/watch?v=EkWI6Ru8lFQ&ab_channel=%EC%96%84%ED%8C%8D%ED%95%9C%EC%BD%94%EB%94%A9%EC%82%AC%EC%A0%84)
   - [React에서 Apollo Client로 GraphQL 사용하기](https://www.daleseo.com/graphql-react-apollo-client/)
+
+axios는 [XMLHttpRequest](https://ko.javascript.info/xmlhttprequest)를 기반으로 만들어진 라이브러리에요. 더 최신 기술인 fetch API를 사용해보고 싶다면 [여기](https://ko.javascript.info/fetch)를 참고해주세요! 보통 호환성 문제와 사용하기 편하다는 이유로 아직 axios를 많이 사용하지만 stream과 같은 기능(chatgpt처럼 계속 데이터를 받아오는 기능)은 XMLHttpRequest로는 구현할 수 없기 때문에 fetch API 또한 나중에 공부해 보는 것을 추천해요!
+
+> 나중에 nextjs를 배우면서 더 확장된 기능을 가진 fetch API를 사용할 거니 미리 공부해 두면 좋아요!
   
 ## 프로젝트 실습 🎈
 
-곧 업데이트 예정입니다!
+1. 메인페이지에 있는 포켓몬 리스트를 REST API를 통해 가져와 보아요.
+   1. [PokeAPI v2](https://pokeapi.co/docs/v2)를 통해 필요한 API를 찾아보아요.
+   2. 이를 통해 REST API 문서를 읽는 법을 배워보고 Axios 또는 Fetch API를 사용해서 HTTP 요청을 보내 보아요.
+   3. 또한 이를 통해 REST API의 단점을 알 수 있을 거예요.
+2. 포켓몬 디테일 페이지에서 필요한 포켓몬 정보는 GraphQL을 통해 가져와 보아요.
+   1. [PokeAPI GraphQL Playground](https://beta.pokeapi.co/graphql/console)를 통해 쿼리를 유추해 보아요.
+   2. REST API와 비교했을 때 어떠한 장점이 있는지 알아보아요.
+
+### 프로젝트 실습 Tip 📌
+
+1. 첫 번째 과정에서는 2 개의 REST API가 필요해요!
+2. 무료 API이다보니깐 너무 많은 요청이 발생하면 IP 영구 밴을 당할 수 있기 때문에 useEffect의 dependency를 잘 설정해 주세요!
+3. React 18에서부터는 component혹은 effect의 순수성을 개발 과정에서 잘 확인하기 위해 strict mode에서는 Effect를 두 번 render하기 때문에 빈 배열의 useEffect를 사용하더라도 두 번 실행될 수 있어요! 자연스러운 동작이니 걱정하지 않아도 돼요!