[translate] useInsertionEffect.md #622

misoguy · 2023-05-07T14:06:44Z

Progress

번역 초안 작성 (Draft translation)
공통 스타일 가이드 확인 (Check the common style guide)
모범사례 확인 (Check best practices)
용어 확인 (Check the term)
맞춤법 검사 (Spelling check)
리뷰 반영 (Resolve reviews)

eomttt · 2023-05-13T01:58:48Z

src/components/MDX/ExpandableCallout.tsx

@@ -35,7 +35,7 @@ const variantMap = {
      'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
  },
  pitfall: {
-    title: 'Pitfall',
+    title: '주의',


variantMap

어떤식으로 번역해야할지릁 논의를 해봐야할것 같네요
deprecated
pitfall
note
wip

eomttt · 2023-05-13T02:06:37Z

src/content/reference/react/useInsertionEffect.md

-* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your component is first added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function one last time.
-
-* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. If you don't specify the dependencies at all, your Effect will re-run after every re-render of the component.
+* `setup`: 이펙트의 로직이 포함된 함수입니다. setup 함수는 선택적으로 *cleanup* 함수를 반환할 수도 있습니다. 컴포넌트가 DOM에 처음 추가되기 전에 React는 setup 함수를 실행합니다. 의존성이 변경되어 다시 렌더링할 때마다 React는 먼저 이전 값으로 cleanup 함수(제공한 경우)를 실행한 다음 새 값으로 setup 함수를 실행합니다. 컴포넌트가 DOM에서 제거되기 전에 React는 마지막으로 정리 함수를 한 번 더 실행합니다.


Suggested change

* `setup`: 이펙트의 로직이 포함된 함수입니다. setup 함수는 선택적으로 *cleanup* 함수를 반환할 수도 있습니다. 컴포넌트가 DOM에 처음 추가되기 전에 React는 setup 함수를 실행합니다. 의존성이 변경되어 다시 렌더링할 때마다 React는 먼저 이전 값으로 cleanup 함수(제공한 경우)를 실행한 다음 새 값으로 setup 함수를 실행합니다. 컴포넌트가 DOM에서 제거되기 전에 React는 마지막으로 정리 함수를 한 번 더 실행합니다.

* `setup`: 이펙트의 로직이 포함된 함수입니다. setup 함수는 선택적으로 *cleanup* 함수를 반환할 수도 있습니다. 컴포넌트가 DOM에 처음 추가되기 전에 React는 setup 함수를 실행합니다. *dependencies*가 변경되어 다시 렌더링할 때마다 React는 먼저 이전 값으로 cleanup 함수(제공한 경우)를 실행한 다음 새 값으로 setup 함수를 실행합니다. 컴포넌트가 DOM에서 제거되기 전에 React는 마지막으로 cleanup 함수를 한 번 더 실행합니다.

eomttt · 2023-05-13T02:09:16Z

src/content/reference/react/useInsertionEffect.md


-#### Returns {/*returns*/}
+* **선택사항** `dependencies`: `setup` 코드 내에서 참조된 모든 반응형 값의 목록입니다. 반응형 값에는 props, state, 그리고 컴포넌트 본문에 직접 선언된 모든 변수와 함수가 포함됩니다. linter가 [React용으로 설정된](/learn/editor-setup#linting) 경우, 모든 반응형 값이 의존성으로 올바르게 지정되었는지 확인합니다. 의존성 목록에는 일정한 수의 항목이 있어야 하며 `[dep1, dep2, dep3]`와 같이 인라인으로 작성해야 합니다. React는 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교 알고리즘을 사용하여 각 의존성을 이전 값과 비교합니다. 의존성을 전혀 지정하지 않으면 컴포넌트를 다시 렌더링할 때마다 Effect가 다시 실행됩니다.


Suggested change

* **선택사항** `dependencies`: `setup` 코드 내에서 참조된 모든 반응형 값의 목록입니다. 반응형 값에는 props, state, 그리고 컴포넌트 본문에 직접 선언된 모든 변수와 함수가 포함됩니다. linter가 [React용으로 설정된](/learn/editor-setup#linting) 경우, 모든 반응형 값이 의존성으로 올바르게 지정되었는지 확인합니다. 의존성 목록에는 일정한 수의 항목이 있어야 하며 `[dep1, dep2, dep3]`와 같이 인라인으로 작성해야 합니다. React는 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교 알고리즘을 사용하여 각 의존성을 이전 값과 비교합니다. 의존성을 전혀 지정하지 않으면 컴포넌트를 다시 렌더링할 때마다 Effect가 다시 실행됩니다.

* **선택사항** `dependencies`: `setup` 코드 내에서 참조된 모든 반응형 값의 목록입니다. 반응형 값에는 props, state, 그리고 컴포넌트 본문에 직접 선언된 모든 변수와 함수가 포함됩니다. linter가 [React용으로 설정된](/learn/editor-setup#linting) 경우, 모든 반응형 값이 의존성으로 올바르게 지정되었는지 확인합니다. 의존성 목록에는 일정한 수의 항목이 있어야 하며 `[dep1, dep2, dep3]`와 같이 작성해야 합니다. React는 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교 알고리즘을 사용하여 각 의존성을 이전 값과 비교합니다. 의존성을 전혀 지정하지 않으면 컴포넌트를 다시 렌더링할 때마다 Effect가 다시 실행됩니다.

eomttt · 2023-05-13T02:10:45Z

src/content/reference/react/useInsertionEffect.md


-Traditionally, you would style React components using plain CSS.
+기존에는 일반 CSS를 사용해 React 컴포넌트의 스타일을 지정했습니다.


Suggested change

기존에는 일반 CSS를 사용해 React 컴포넌트의 스타일을 지정했습니다.

기본적으로 plain CSS를 사용해 React 컴포넌트의 스타일을 지정했습니다.

전통적으로 라고 써도 이상할것 같진 않네요

요의견은 사소한 의견입니다

eomttt · 2023-05-13T02:16:07Z

src/content/reference/react/useInsertionEffect.md


-If you insert styles during rendering and React is processing a [non-blocking update,](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) the browser will recalculate the styles every single frame while rendering a component tree, which can be **extremely slow.**
+렌더링 중에 스타일을 주입하고 React가 [비차단 업데이트](/reference/react/useTransition#marking-a-state-update-as-non-blocking-transition)를 처리하는 경우 브라우저는 컴포넌트 트리를 렌더링하는 동안 매 프레임마다 스타일을 다시 계산하므로 **매우 느릴 수 있습니다.**


Suggested change

렌더링 중에 스타일을 주입하고 React가 [비차단 업데이트](/reference/react/useTransition#marking-a-state-update-as-non-blocking-transition)를 처리하는 경우 브라우저는 컴포넌트 트리를 렌더링하는 동안 매 프레임마다 스타일을 다시 계산하므로 **매우 느릴 수 있습니다.**

렌더링 중에 스타일을 주입하고 React가 [non-blocking update](/reference/react/useTransition#marking-a-state-update-as-non-blocking-transition)를 처리하는 경우 브라우저는 컴포넌트 트리를 렌더링하는 동안 매 프레임마다 스타일을 다시 계산하므로 **매우 느릴 수 있습니다.**

그냥 원문 쓰는게 더 이해하기 편할것 같습니다.

misoguy · 2023-05-21T04:14:18Z

@eomttt 님, 좋은 리뷰 감사드립니다.
충돌해결 & 리뷰 주신 내용들 수정 반영해서 올려두었습니다.

github-actions · 2023-05-21T04:35:11Z

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Three Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
`/404`	`76.93 KB` (🟡 +17 B)	170.56 KB
`/500`	`76.93 KB` (🟡 +17 B)	170.55 KB
`/[[...markdownPath]]`	`78.35 KB` (🟡 +17 B)	171.98 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

[translate] useInsertionEffect.md

32ae907

misoguy requested review from hg-pyun, taehwanno, simsim0709, gnujoow, b9words, taggon, MaxKim-J, eomttt and goofcode as code owners May 7, 2023 14:06

vercel bot deployed to Preview – ko-react-dev May 7, 2023 14:07 View deployment

eomttt reviewed May 13, 2023

View reviewed changes

eomttt added the needs author response label May 13, 2023

Merge branch 'main' into translate/useInsertionEffect

aea7aac

vercel bot deployed to Preview – ko-react-dev May 21, 2023 04:07 View deployment

apply comment: change wordings

52cf6f0

vercel bot deployed to Preview – ko-react-dev May 21, 2023 04:13 View deployment

apply comment: change variantMap wording

45aec7d

vercel bot deployed to Preview – ko-react-dev May 21, 2023 04:17 View deployment

eomttt approved these changes May 21, 2023

View reviewed changes

eomttt merged commit 5d9b766 into reactjs:main May 21, 2023

misoguy mentioned this pull request Jul 26, 2023

New React Docs Translation Progress (Korean) #374

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[translate] useInsertionEffect.md #622

[translate] useInsertionEffect.md #622

Uh oh!

misoguy commented May 7, 2023 •

edited by eomttt

Loading

Uh oh!

eomttt May 13, 2023

Uh oh!

eomttt May 13, 2023

Uh oh!

eomttt May 13, 2023

Uh oh!

eomttt May 13, 2023

Uh oh!

eomttt May 13, 2023

Uh oh!

eomttt May 13, 2023

Uh oh!

misoguy commented May 21, 2023

Uh oh!

github-actions bot commented May 21, 2023

📦 Next.js Bundle Analysis for react-dev

Three Pages Changed Size

Uh oh!

Uh oh!


		#### Returns {/returns/}
		* 선택사항 `dependencies`: `setup` 코드 내에서 참조된 모든 반응형 값의 목록입니다. 반응형 값에는 props, state, 그리고 컴포넌트 본문에 직접 선언된 모든 변수와 함수가 포함됩니다. linter가 [React용으로 설정된](/learn/editor-setup#linting) 경우, 모든 반응형 값이 의존성으로 올바르게 지정되었는지 확인합니다. 의존성 목록에는 일정한 수의 항목이 있어야 하며 `[dep1, dep2, dep3]`와 같이 인라인으로 작성해야 합니다. React는 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교 알고리즘을 사용하여 각 의존성을 이전 값과 비교합니다. 의존성을 전혀 지정하지 않으면 컴포넌트를 다시 렌더링할 때마다 Effect가 다시 실행됩니다.


		Traditionally, you would style React components using plain CSS.
		기존에는 일반 CSS를 사용해 React 컴포넌트의 스타일을 지정했습니다.

	기존에는 일반 CSS를 사용해 React 컴포넌트의 스타일을 지정했습니다.
	기본적으로 plain CSS를 사용해 React 컴포넌트의 스타일을 지정했습니다.


		If you insert styles during rendering and React is processing a [non-blocking update,](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) the browser will recalculate the styles every single frame while rendering a component tree, which can be extremely slow.
		렌더링 중에 스타일을 주입하고 React가 [비차단 업데이트](/reference/react/useTransition#marking-a-state-update-as-non-blocking-transition)를 처리하는 경우 브라우저는 컴포넌트 트리를 렌더링하는 동안 매 프레임마다 스타일을 다시 계산하므로 매우 느릴 수 있습니다.

	렌더링 중에 스타일을 주입하고 React가 [비차단 업데이트](/reference/react/useTransition#marking-a-state-update-as-non-blocking-transition)를 처리하는 경우 브라우저는 컴포넌트 트리를 렌더링하는 동안 매 프레임마다 스타일을 다시 계산하므로 매우 느릴 수 있습니다.
	렌더링 중에 스타일을 주입하고 React가 [non-blocking update](/reference/react/useTransition#marking-a-state-update-as-non-blocking-transition)를 처리하는 경우 브라우저는 컴포넌트 트리를 렌더링하는 동안 매 프레임마다 스타일을 다시 계산하므로 매우 느릴 수 있습니다.

Uh oh!

[translate] useInsertionEffect.md #622

[translate] useInsertionEffect.md #622

Uh oh!

Conversation

misoguy commented May 7, 2023 • edited by eomttt Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Progress

Uh oh!

eomttt May 13, 2023

Choose a reason for hiding this comment

Uh oh!

eomttt May 13, 2023

Choose a reason for hiding this comment

Uh oh!

eomttt May 13, 2023

Choose a reason for hiding this comment

Uh oh!

eomttt May 13, 2023

Choose a reason for hiding this comment

Uh oh!

eomttt May 13, 2023

Choose a reason for hiding this comment

Uh oh!

eomttt May 13, 2023

Choose a reason for hiding this comment

Uh oh!

misoguy commented May 21, 2023

Uh oh!

github-actions bot commented May 21, 2023

Size changes

📦 Next.js Bundle Analysis for react-dev

Three Pages Changed Size

Uh oh!

Uh oh!

misoguy commented May 7, 2023 •

edited by eomttt

Loading