[blog] Component-level CSS-in-JS 번역

[idealHyun]

🚀 Todo

1. CN 파일 삭제
2. EN 접미사 삭제
3. Component-level CSS-in-JS 번역

📝 Summary

[Ant Design 5.0과 "component level" CSS-in-JS 솔루션]

• 해시: Ant Design은 현재 버전과 테마 변수에 대해서만 해시 값 계산을 진행하여 적용시킵니다.

• 컴포넌트 캐싱: Ant Design 컴포넌트의 props는 스타일의 구조에 영향을 미치지 않고, 최초 마운트 시 스타일을 한 번만 생성하고 이후에는 캐시된 스타일을 재사용합니다.

• 성능 비교: Ant Design은 성능 테스트에서 다른 라이브러리와 비교했을 때, 첫 번째와 두 번째 렌더링에서 성능 우위를 보였습니다. 하지만 props가 스타일 계산에 영향을 미칠 때는 여전히 일부 성능 부담이 존재합니다.

• 한계: Ant Design의 "component level" CSS-in-JS 솔루션은 성능에 이점을 제공하지만, 일반적인 애플리케이션 구축에는 적합하지 않으며, 주로 컴포넌트 라이브러리에 적합합니다.

🔍 고민했던 부분

• "component level"은 강조하고 싶은 하나의 기술적인 용어인 것 같아 영어를 유지하였습니다.
• 본문에서 나오는 component들은 컴포넌트로 번역하여 적었는데 영어로 통일하는 것이 좋을지, 이대로 유지하는게 좋을지 의견 주시면 감사하겠습니다.
• 본문에 나오는 컴포넌트 스타일이 컴포넌트의 기본적인 스타일의 구조를 의미하는 것 같은데 다른 분들은 컴포넌트 스타일이라는 용어에 있어서 안 헷갈리시는지 궁금하고, 잘못 번역한 부분이 있다면 말씀부탁드립니다!

[github-actions]

[github-actions]

👁 Visual-Regression Diff Building... ⏳

This PR is under visual-regression-diff building, please wait for the result.

[lolWK]

"component level"은 강조하고 싶은 하나의 기술적인 용어인 것 같아 영어를 유지하였습니다.

저는 유지하는 게 좋은 것 같아요

본문에서 나오는 component들은 컴포넌트로 번역하여 적었는데 영어로 통일하는 것이 좋을지, 이대로 유지하는게 좋을지 의견 주시면 감사하겠습니다.

component는 컴포넌트 한글로 적은게 더 좋은 것 같아요!

본문에 나오는 컴포넌트 스타일이 컴포넌트의 기본적인 스타일의 구조를 의미하는 것 같은데 다른 분들은 컴포넌트 스타일이라는 용어에 있어서 안 헷갈리시는지 궁금하고, 잘못 번역한 부분이 있다면 말씀부탁드립니다!

저는 사실 글 내용이 막 엄청나게 잘 이해가 되진 않지만,, 컴포넌트 스타일은 저는 해당 컴포넌트 내에 작성된 style로 이해했습니다.

잘 읽었습니다. 이 파트 부분 멘토님이 완전 어려운 글이라고 얘기해주셨었었는데.. 수고하셨어요!

[zelkovaria]

• component를 컴포넌트로 지금처럼 유지하는게 좋은 것 같습니다!

In CSS-in-JS, hash is used to confirm whether a style has been inserted.
(CSS-in-JS에서는 해시를 사용하여 스타일이 삽입되었는지 확인합니다)

• 해당 문장에서 '스타일이 삽입되었는지' 보다는 '스타일이 반영되었는지' 느낌은 어떠신가요?! "반영된다"는 의미는 어떤 조건이나 상태에 따라 스타일이 실시간으로 변화하고 적용된다는 것 이라고 나오는데 리액트에서 사용자와 상호작용을 할 때 디자인도 동적으로 변한다라는 느낌을 살려도 좋을 것 같아서요 ㅎㅎ

멘토님이 어렵다고 하신 글인데,, 덕분에 잘 읽고가요! 수고하셨습니다 💪🏻