Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/content/learn/creating-a-react-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,15 +80,15 @@ async function Talks({ confId }) {
// 1. 서버에서라면 데이터 레이어와 대화할 수 있습니다. API 엔드포인트는 필요하지 않습니다.
const talks = await db.Talks.findAll({ confId });

// 2. 렌더링 로직이 추가되더라고도 자바스크립트 번들 크기를 크게 만들지 않습니다.
// 2. 렌더링 로직이 추가되더라도 자바스크립트 번들 크기를 크게 만들지 않습니다.
const videos = talks.map(talk => talk.video);

// 3. 브라우저에서 실행될 컴포넌트에 데이터를 전달합니다.
return <SearchableVideoList videos={videos} />;
}
```

Next.js의 App Router는 [Suspense와 데이터 조회](/blog/2022/03/29/react-v18#suspense-in-data-frameworks)를 통합합니다. React tree에서 서로다른 사용자 인터페이스를 직접적으로 로딩 상태(예: 스켈레톤 플레이스홀더)로 지정할 수 있게 해줍니다.
Next.js의 App Router는 [Suspense와 데이터 조회](/blog/2022/03/29/react-v18#suspense-in-data-frameworks)를 통합합니다. React tree에서 서로 다른 사용자 인터페이스를 직접적으로 로딩 상태(예: 스켈레톤 플레이스홀더)로 지정할 수 있게 해줍니다.

```js
<Suspense fallback={<TalksLoading />}>
Expand Down
4 changes: 0 additions & 4 deletions src/content/learn/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,16 +39,12 @@ export default function App() {

React 문서의 대부분 페이지에는 이와 같은 샌드박스가 있습니다. React 문서 외에도 [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), [CodePen](https://codepen.io/pen?template=QWYVwWN) 등의 온라인 샌드박스에서 React를 지원합니다.

### 로컬 환경에서 React 시도하기 {/*try-react-locally*/}

컴퓨터의 로컬 환경에서 React를 사용해 보고 싶다면, 이 [HTML 페이지를 다운로드](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html)하고 에디터와 브라우저에서 열어보세요!

## 새로운 React 프로젝트 시작하기 {/*start-a-new-react-project*/}

React로 완전히 앱이나 웹사이트를 구축하고 싶다면, [새로운 React 프로젝트를 시작](/learn/creating-a-react-app)하세요.

컴퓨터의 로컬 환경에서 React를 사용해 보고 싶다면, 이 [HTML 페이지를 다운로드](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html)하고 에디터와 브라우저에서 열어보세요!

## 새로운 React 앱 만들기 {/*creating-a-react-app*/}

새로운 React 앱을 만들고 싶다면, [새로운 React 앱 만들기](/learn/creating-a-react-app)에서 권장하는 프레임워크를 사용하여 만들 수 있습니다.
Expand Down