[v2] react modern/data fetching #25
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sujinleeme
suggested changes
Apr 12, 2020
| We are currently fetching data, but it's still pseudo data coming from a promise we set up ourselves. The lessons up to now about asynchronous React and advanced state management were preparing us to fetch data from a real third-party API. We will use the reliable and informative [Hacker News API](https://hn.algolia.com/api) to request popular tech stories. | ||
|
|
||
| Instead of using the `initialStories` array and `getAsyncStories` function (you can remove these), we will fetch the data directly from the API: | ||
| 우리는 현재 데이터를 가져오고는 있지만, 우리가 스스로 설정한 의사(pseudo) 데이터일 뿐입니다. 이번 장에서는 외부 API에서 데이터를 가져올 때 필요한 비동기 리액트 및 고급 상태 관리에 대해 알아봅니다. 믿을만하고 유익한 [Hacker News API](https://hn.algolia.com/api)를 사용하여 인기 있는 기술 관련 기사들을 가져와 봅시다. |
There was a problem hiding this comment.
현재 데이터는 실제 사용하는 데이터가 아니라 임시 데이터입니다. 로 수정해주세요.
Hacker News API를 해커 뉴스 API로 수정해주세요.
| @@ -38,31 +37,33 @@ const App = () => { | |||
| }; | |||
| ~~~~~~~ | |||
|
|
|||
| First, the `API_ENDPOINT` (A) is used to fetch popular tech stories for a certain query (a search topic). In this case, we fetch stories about React (B). Second, the native browser's [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) is used to make this request (B). For the fetch API, the response needs to be translated into JSON (C). Finally, the returned result follows a different data structure (D), which we send as payload to our component's state. | |||
| 먼저, `API_ENDPOINT` (A)는 특정 쿼리(검색 주제)에 대한 인기 있는 기술 관련 기사들을 가져오는 데에 사용됩니다. 이 경우 React (B)에 대한 기사를 가져옵니다. 둘째, 네이티브 브라우저의 [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)사용하여 요청을 보냅니다 (B). Fetch API의 경우 응답을 JSON (C)으로 변환해야합니다. 마지막으로 반환된 결괏값은 각각 다른 데이터 구조 (D)를 따르며, 이들을 컴포넌트의 상태에 payload로 전달됩니다. | |||
There was a problem hiding this comment.
Fetch API의 경우 응답을 JSON 으로 변환해야합니다 (C). 마지막으로 반환된 결괏값은 각각 다른 데이터 구조를 따르며 (D), 수정해주세요.
React를 리액트로 수정해주세요.
맞춤법 검사기로 띄워쓰기를 다시 한번 확인해주세요.
|
|
||
| In the previous code example we used [JavaScript's Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) for a string interpolation. When this feature wasn't available in JavaScript, we'd have used the + operator on strings instead: | ||
| 이전 코드에서 우리는 [자바스크립트 템플릿 리터럴](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)로 문자 보간기능을 사용했습니다. 이 기능이 자바스크립트에 등장하기 전까지는 문자열에 + 연산자를 사용했었습니다. |
There was a problem hiding this comment.
사용했었습니다 -> 했습니다로 수정해주세요.
| const anotherWelcome = `${greeting} React`; | ||
| console.log(anotherWelcome); | ||
| // Hello React | ||
| ~~~~~~~ | ||
|
|
||
| Check your browser to see stories related to the initial query fetched from the Hacker News API. Since we used the same data structure for a story for the sample stories, we didn't need to change anything, and it's still possible to filter the stories after fetching them with the search feature. We will change this behavior in one of the next sections. For the App component, there wasn't much data fetching to implement here, though it's all part of learning how to manage asynchronous data as state in React. | ||
| 브라우저를 열어 Hacker News API에서 가져온 초기 쿼리와 관련된 기사를 확인하세요. 샘플 기사와 똑같은 데이터 구조를 사용했으므로 아무것도 변경할 필요가 없습니다. 또한 검색 기능으로 기사들을 가져온 후 필터링을 할 수도 있습니다. 다음 장에서 이런 것들을 변경해 볼 것입니다. App 컴포넌트의 경우, 데이터 가져오기를 구현하는 부분은 많지 않았으나, 리액트에서 비동기 데이터를 상태로 관리하는 방법을 학습하는 데에는 필요한 부분입니다. |
There was a problem hiding this comment.
Hacker News -> 해커 뉴스로 수정해주세요.
다음 장에서 이 기능을 구현해 볼 것입니다.
리액트에서 비동기 데이터를 상태로 관리하는 방법을 학습하는 데에는 필요한 부분입니다.
-> 리액트에서 비동기 데이터를 상태로 관리하는 방법에 필요한 개념을 모두 학습했습니다 로 수정해주세요.
|
리뷰 반영하여 수정했습니다. 감사합니다. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.