From caf3eff9cf4b31dfcd522b69cf2a902d79c288ac Mon Sep 17 00:00:00 2001 From: dayongkr Date: Tue, 31 Oct 2023 22:25:39 +0900 Subject: [PATCH] =?UTF-8?q?fix(fe):=20data=20fetching=20=EC=8B=A4=EC=8A=B5?= =?UTF-8?q?=20=EB=82=B4=EC=9A=A9=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/frontend/5. Data Fetching.md | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/content/docs/frontend/5. Data Fetching.md b/content/docs/frontend/5. Data Fetching.md index 3b7cdd2..80c428b 100644 --- a/content/docs/frontend/5. Data Fetching.md +++ b/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를 사용하더라도 두 번 실행될 수 있어요! 자연스러운 동작이니 걱정하지 않아도 돼요!