Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

리액트 컴파일러 #9

Merged
merged 7 commits into from
Jun 30, 2024
Merged

리액트 컴파일러 #9

merged 7 commits into from
Jun 30, 2024

Conversation

brgndyy
Copy link
Member

@brgndyy brgndyy commented Jun 3, 2024

공식문서에 있는 내용을 토대로 번역해보았습니다!

편하게 보기

Copy link
Member

@Jaymyong66 Jaymyong66 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저번에 코멘트를 Pending으로 두고 review submit을 안했네요 건디... 죄송함다
추가로 한번 더 읽으면서 '다시 렌더링'이라는 번역을 그냥 '리렌더링'이나 're-rendering'이면 어떨지 코멘트해봤는데 고려해봐주세요~!

고생하셨습니닷

https://velog.io/@eunbinn/react-compiler
FE 아티클 그룹에 올라온 건디랑 같은 글 번역하신 분 ㅋㅋㅋ


이미 코드베이스가 잘 메모이제이션되어 있다면 컴파일러를 사용해도 큰 성능 향상을 기대하지 않을 수 있습니다.

하지만 실질적으로는 성능 문제를 일으키는 정확한 종속성을 메모이제이션하는 것이 손으로 하기에는 까다롭습니다.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요 문장이 조금 어색해서 조금만 바꿔보면 어떨지용

Suggested change
하지만 실질적으로는 성능 문제를 일으키는 정확한 종속성을 메모이제이션하는 것이 손으로 하기에는 까다롭습니다.
하지만 실질적으로 성능 문제를 일으키는 정확한 종속성을 메모이제이션하는 것은 손으로 하기에는 까다롭습니다.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

짚어주셔서 감사해용~ 수정 하였습니다!

Comment on lines 65 to 71
React 컴파일러의 초기 버전은 업데이트 성능(기존 컴포넌트의 다시 렌더링)을 개선하는 데 중점을 두고 있습니다.

그래서 다음 두 가지 사용 사례에 집중하고 있습니다:

1. **계단식으로 발생하는 다시 렌더링 건너뛰기**

`<Parent />` 컴포넌트를 다시 렌더링할 때, 실제로는 `<Parent />`만 변경되었지만 해당 컴포넌트 트리의 많은 컴포넌트가 다시 렌더링되는 상황을 방지합니다.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이곳에서 다시렌더링 보다 차라리 리렌더링이라고 쓰는건 어떨까욥
혹은 re-rendering 영문 그대로 써도 괜찮을거 같네요

Suggested change
React 컴파일러의 초기 버전은 업데이트 성능(기존 컴포넌트의 다시 렌더링)을 개선하는 데 중점을 두고 있습니다.
그래서 다음 두 가지 사용 사례에 집중하고 있습니다:
1. **계단식으로 발생하는 다시 렌더링 건너뛰기**
`<Parent />` 컴포넌트를 다시 렌더링할 때, 실제로는 `<Parent />`만 변경되었지만 해당 컴포넌트 트리의 많은 컴포넌트가 다시 렌더링되는 상황을 방지합니다.
React 컴파일러의 초기 버전은 업데이트 성능(기존 컴포넌트의 리렌더링)을 개선하는 데 중점을 두고 있습니다.
그래서 다음 두 가지 사용 사례에 집중하고 있습니다:
1. **계단식으로 발생하는 리렌더링 건너뛰기**
`<Parent />` 컴포넌트를 리렌더링할 때, 실제로는 `<Parent />`만 변경되었지만 해당 컴포넌트 트리의 많은 컴포넌트가 리렌더링되는 상황을 방지합니다.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 그렇네요..!

리렌더링으로 다 바꾸어보았습니다! 짚어주셔서 감사합니다~!

};
```

드문 경우이지만, `compilationMode: "annotation"` 옵션을 사용하여 컴파일러를 "옵트인" 모드로 실행하도록 설정할 수도 있습니다.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

사소한데 옵트인이 뭔지 몰랐어서 원문 단어대로 써도 괜찮을거 같은 생각입니닷

Suggested change
드문 경우이지만, `compilationMode: "annotation"` 옵션을 사용하여 컴파일러를 "옵트인" 모드로 실행하도록 설정할 수도 있습니다.
드문 경우이지만, `compilationMode: "annotation"` 옵션을 사용하여 컴파일러를 "opt-in" 모드로 실행하도록 설정할 수도 있습니다.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수정해보았습니다~!

Copy link
Member

@Jaymyong66 Jaymyong66 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

css 글까지 리뷰 완료했습니다~! 피드백 확인하시면 고려해보고 머지해도 될 것 같습니다!
고생하셨습니다 건디


주로 CSS-in-JS가 성능 문제로 지적받기 때문입니다.

그러나 이러한 문제를 곧 해결할 수 있는 새로운 CSS 기능들도 개발 중에 있습니다.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(사소) 번역투라 빼도 될 것 같아서 제안드립니당

Suggested change
그러나 이러한 문제를 해결할 수 있는 새로운 CSS 기능들도 개발 중에 있습니다.
그러나 이러한 문제를 해결할 수 있는 새로운 CSS 기능들도 개발 중에 있습니다.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수정 완료했습니다~! 짚어주셔서 감사해요


이제 브라우저는 CSS 계층 규칙에 따라 렌더된 HTML에 스타일을 적용할 준비가 됩니다.

이 과정은 CSS가 [페이지 렌더링을 차단](https://blog.logrocket.com/11-best-practices-eliminate-render-blocking-resources/)하고 요청된 페이지의 첫 페인트(first paint)를 지연시키게 합니다.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(사소) 이것도 번역투라 제안드립니돠

Suggested change
이 과정은 CSS가 [페이지 렌더링을 차단](https://blog.logrocket.com/11-best-practices-eliminate-render-blocking-resources/)하고 요청된 페이지의 첫 페인트(first paint)를 지연시키게 합니다.
이 과정은 CSS가 [페이지 렌더링을 차단](https://blog.logrocket.com/11-best-practices-eliminate-render-blocking-resources/)하고 요청된 페이지의 첫 페인트(first paint)를 지연시킵니다.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 또한 수정 완료!

@brgndyy brgndyy merged commit 5ef483e into main Jun 30, 2024
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants