6. REST API & GraphQL

지금까지는 포켓몬 데이터를 코드 또는 로컬 파일에서 가져왔어요. 이번 시간에는 외부에서 데이터를 가져오는 방법에 대해 알아보아요!

여러분의 공부를 돕기 위해 준비한 자료들이에요. 따라서 꼭 준비된 자료만 공부할 필요는 없어요! 자신만의 방식으로 공부하고 과제만 잘 수행하면 돼요! 😄

📚 공부할 내용 link

• Background
  • HTTP 메소드 총정리
    • 주요 메소드 위주로 공부해 주세요!
  • 자바스크립트 Promise, async/await
• REST API
  • REST API가 뭔가요? - 얄팍한 코딩사전
  • Axios
    • HTTP 요청을 보내는 라이브러리에요.
    • Axios 총정리
    • React에서 axios 사용하기
    • Axios 공식 문서
• GraphQL
  • GraphQL이 뭔가요? - 얄팍한 코딩사전
  • Apollo client 공식 문서
    • Introduction, Get started, Queries 부분을 읽어보세요!
    • 즉 ApolloClient 초기 설정을 하고 useQuery를 사용해서 데이터를 가져오는 방법을 익히면 됩니다!

axios는 XMLHttpRequest를 기반으로 만들어진 라이브러리에요. 더 최신 기술인 fetch API를 사용해보고 싶다면 여기를 참고해주세요! 보통 호환성 문제와 사용하기 편하다는 이유로 아직 axios를 많이 사용하지만 stream과 같은 기능(chatgpt처럼 계속 데이터를 받아오는 기능)은 XMLHttpRequest로는 구현할 수 없기 때문에 fetch API 또한 나중에 공부해 보는 것을 추천해요!

나중에 nextjs를 배우면서 더 확장된 기능을 가진 fetch API를 사용할 거니 미리 공부해 두면 좋아요!

프로젝트 실습 🎈 link

1. 메인페이지에 있는 포켓몬 리스트를 REST API를 통해 가져와 보아요.
   1. PokeAPI v2를 통해 필요한 API를 찾아보아요.
   2. 이를 통해 REST API 문서를 읽는 법을 배워보고 Axios 또는 Fetch API를 사용해서 HTTP 요청을 보내 보아요.
2. 포켓몬 디테일 페이지에서 필요한 포켓몬 정보는 GraphQL을 통해 가져와 보아요.
   1. PokeAPI GraphQL Playground를 통해 쿼리를 유추해 보아요.
   2. 만약에 REST API로 구현 했으면 어떠한 상황이 발생했을 지 생각해보고 GraphQL의 장점을 느껴보아요.

프로젝트 실습 Tip 📌 link

1. 무료 API라서 너무 많은 요청을 보내면 IP 영구 밴을 당할 수 있기 때문에 렌더링 될 때마다 요청이 되지 않게 cache 기능을 사용하거나 useEffect를 잘 활용해보아요!
2. Compoenent와 Effect는 pure하게 만드는 것이 권장돼요! React 18에서는 이를 더 잘 지킬 수 있도록 Strict mode(개발 환경에서는 기본적으로 strict mode가 활성화 되어 있음)에서는 두 번 렌더링해서 이 성질을 잘 지키고 있는지 확인해요! 따라서 useEffect 안에 있는 코드가 두 번 실행되는 것은 정상이니 걱정하지 마세요!
3. GraphQL: Language Feature Support, GraphQL: Syntax Highlighting vscode extension을 설치하면 syntax highlighting과 auto complete등의 편리한 기능을 사용할 수 있어요!