feat(fe): 커리큘럼 조정 및 Data fetching 파트 업데이트

skkuding · Nov 6, 2023 · 88fdc31 · 88fdc31
1 parent e2db8b7
commit 88fdc31
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 17 deletions.
diff --git 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
diff --git a/content/docs/frontend/7. Tailwind CSS.md → content/docs/frontend/6. Tailwind CSS.md b/content/docs/frontend/7. Tailwind CSS.md → content/docs/frontend/6. Tailwind CSS.md
diff --git a/content/docs/frontend/8. Next.js.md → content/docs/frontend/7. Next.js.md b/content/docs/frontend/8. Next.js.md → content/docs/frontend/7. Next.js.md
diff --git a/content/docs/frontend/9. Git, Github.md → content/docs/frontend/8. Git, Github.md b/content/docs/frontend/9. Git, Github.md → content/docs/frontend/8. Git, Github.md
diff --git 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 주차 | 기말고사 화이팅 😄                             | 추가 예정 |