From 88fdc31a685c2bf1310b5000f1dc341bc2e8d095 Mon Sep 17 00:00:00 2001 From: dayongkr Date: Mon, 6 Nov 2023 12:32:02 +0900 Subject: [PATCH] =?UTF-8?q?feat(fe):=20=EC=BB=A4=EB=A6=AC=ED=81=98?= =?UTF-8?q?=EB=9F=BC=20=EC=A1=B0=EC=A0=95=20=EB=B0=8F=20Data=20fetching=20?= =?UTF-8?q?=ED=8C=8C=ED=8A=B8=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/frontend/5. Data Fetching.md | 13 ++++++++----- content/docs/frontend/6. React Ecosystem.md | 8 -------- .../{7. Tailwind CSS.md => 6. Tailwind CSS.md} | 0 .../docs/frontend/{8. Next.js.md => 7. Next.js.md} | 0 .../{9. Git, Github.md => 8. Git, Github.md} | 0 content/docs/frontend/Getting Started.md | 8 ++++---- 6 files changed, 12 insertions(+), 17 deletions(-) delete mode 100644 content/docs/frontend/6. React Ecosystem.md rename content/docs/frontend/{7. Tailwind CSS.md => 6. Tailwind CSS.md} (100%) rename content/docs/frontend/{8. Next.js.md => 7. Next.js.md} (100%) rename content/docs/frontend/{9. Git, Github.md => 8. Git, Github.md} (100%) diff --git a/content/docs/frontend/5. Data Fetching.md b/content/docs/frontend/5. Data Fetching.md index 80c428b..7342a90 100644 --- a/content/docs/frontend/5. Data Fetching.md +++ b/content/docs/frontend/5. Data Fetching.md @@ -7,9 +7,9 @@ lastmod = "2023-10-05" weight = 250 +++ -{{< figure src="../images/web.png" alt="메인 페이지" >}}} +{{< figure src="../images/web.png" alt="메인 페이지" >}} -지금까지 사용한 포켓몬 데이터를 코드 또는 로컬 파일에서 가져왔어요. 이번 시간에는 외부에서 데이터를 가져오는 방법에 대해 알아보아요! +지금까지는 포켓몬 데이터를 코드 또는 로컬 파일에서 가져왔어요. 이번 시간에는 외부에서 데이터를 가져오는 방법에 대해 알아보아요! ## 📚 공부할 내용 @@ -23,9 +23,12 @@ weight = 250 - HTTP 요청을 보내는 라이브러리에요. - [Axios 총정리](https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9) - [React에서 axios 사용하기](https://www.youtube.com/watch?v=9-OrcyggmKQ&ab_channel=%EC%BD%94%EC%A7%80%EC%BD%94%EB%8D%94KossieCoder) + - [Axios 공식 문서](https://axios-http.com/kr/docs/intro) - 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/) + - [Apollo client 공식 문서](https://www.apollographql.com/docs/react/) + - Introduction, Get started, Queries 부분을 읽어보세요! + - 즉 ApolloClient 초기 설정을 하고 useQuery를 사용해서 데이터를 가져오는 방법을 익히면 됩니다! axios는 [XMLHttpRequest](https://ko.javascript.info/xmlhttprequest)를 기반으로 만들어진 라이브러리에요. 더 최신 기술인 fetch API를 사용해보고 싶다면 [여기](https://ko.javascript.info/fetch)를 참고해주세요! 보통 호환성 문제와 사용하기 편하다는 이유로 아직 axios를 많이 사용하지만 stream과 같은 기능(chatgpt처럼 계속 데이터를 받아오는 기능)은 XMLHttpRequest로는 구현할 수 없기 때문에 fetch API 또한 나중에 공부해 보는 것을 추천해요! @@ -44,5 +47,5 @@ axios는 [XMLHttpRequest](https://ko.javascript.info/xmlhttprequest)를 기반 ### 프로젝트 실습 Tip 📌 1. 첫 번째 과정에서는 2 개의 REST API가 필요해요! -2. 무료 API이다보니깐 너무 많은 요청이 발생하면 IP 영구 밴을 당할 수 있기 때문에 useEffect의 dependency를 잘 설정해 주세요! -3. React 18에서부터는 component혹은 effect의 순수성을 개발 과정에서 잘 확인하기 위해 strict mode에서는 Effect를 두 번 render하기 때문에 빈 배열의 useEffect를 사용하더라도 두 번 실행될 수 있어요! 자연스러운 동작이니 걱정하지 않아도 돼요! +2. 무료 API라서 너무 많은 요청을 보내면 IP 영구 밴을 당할 수 있기 때문에 렌더링 될 때마다 요청이 되지 않게 cache 기능을 사용하거나 useEffect를 잘 활용해보아요! +3. Compoenent와 Effect는 pure하게 만드는 것이 권장돼요! React 18에서는 이를 더 잘 지킬 수 있도록 Strict mode(개발 환경에서는 기본적으로 strict mode가 활성화 되어 있음)에서는 두 번 렌더링해서 이 성질을 잘 지키고 있는지 확인해요! 따라서 useEffect 안에 있는 코드가 두 번 실행되는 것은 정상이니 걱정하지 마세요! diff --git a/content/docs/frontend/6. React Ecosystem.md b/content/docs/frontend/6. React Ecosystem.md deleted file mode 100644 index a82f65d..0000000 --- a/content/docs/frontend/6. React Ecosystem.md +++ /dev/null @@ -1,8 +0,0 @@ -+++ -title = "6. React Ecosystem" -description = "React와 관련된 third-party 라이브러리들을 알아봅니다." -icon = "article" -date = "2023-09-11" -lastmod = "2023-10-05" -weight = 260 -+++ diff --git a/content/docs/frontend/7. Tailwind CSS.md b/content/docs/frontend/6. Tailwind CSS.md similarity index 100% rename from content/docs/frontend/7. Tailwind CSS.md rename to content/docs/frontend/6. Tailwind CSS.md diff --git a/content/docs/frontend/8. Next.js.md b/content/docs/frontend/7. Next.js.md similarity index 100% rename from content/docs/frontend/8. Next.js.md rename to content/docs/frontend/7. Next.js.md diff --git a/content/docs/frontend/9. Git, Github.md b/content/docs/frontend/8. Git, Github.md similarity index 100% rename from content/docs/frontend/9. Git, Github.md rename to content/docs/frontend/8. Git, Github.md diff --git a/content/docs/frontend/Getting Started.md b/content/docs/frontend/Getting Started.md index d362482..9394a79 100644 --- a/content/docs/frontend/Getting Started.md +++ b/content/docs/frontend/Getting Started.md @@ -28,10 +28,10 @@ weight = 200 | 7 주차 | 중간고사 화이팅 😄 | 추가 예정 | | 8 주차 | 중간고사 화이팅 😄 | 추가 예정 | | 9 주차 | [React](./4.%20React.md) | 추가 예정 | -| 10 주차 | [Data Fetching](./5.%20Data%20Fetching.md) | 추가 예정 | -| 11 주차 | [React Ecosystem](./6.%20React%20Ecosystem.md) | 추가 예정 | -| 12 주차 | [Tailwind CSS](./7.%20Tailwind%20CSS.md) | 추가 예정 | -| 13 주차 | [Next.js](./8.%20Next.js.md) | 추가 예정 | +| 10 주차 | [React](./4.%20React.md) | 추가 예정 | +| 11 주차 | [Data Fetching](./5.%20Data%20Fetching.md) | 추가 예정 | +| 12 주차 | [Tailwind CSS](./6.%20Tailwind%20CSS.md) | 추가 예정 | +| 13 주차 | [Next.js](./7.%20Next.js.md) | 추가 예정 | | 14 주차 | 기말고사 화이팅 😄 | 추가 예정 | | 15 주차 | 기말고사 화이팅 😄 | 추가 예정 | | 16 주차 | 기말고사 화이팅 😄 | 추가 예정 |