docs: update Korean terminology for API reference and installation sections

Author: lumirlumir

CONTRIBUTING.md

@@ -18,7 +18,7 @@ React 문서 기여에 관심을 가져주셔서 감사합니다!
 
 **[React 학습하기](https://ko.react.dev/learn)** 섹션은 기초 개념을 단계별로 소개하기 위해 만들어졌습니다. 여기서 제공되는 글들은 이전에 설명된 지식을 바탕으로 하므로, 글 간 앞뒤 개념이 중복되거나 꼬이지 않도록 주의하세요. 독자는 첫 번째 글부터 마지막 글까지 순서대로 읽으며 개념을 익힐 수 있어야 하며, 추가 설명을 위해 미리 앞선 개념들을 살펴보지 않도록 해야 합니다. 이런 이유로 상태<sup>State</sup>는 이벤트<sup>Event</sup>보다 먼저 설명되고, 'React로 사고하기' 파트에서 `ref`를 사용하지 않는 등 특정 순서가 정해져 있습니다. 동시에 'React 학습하기'는 React 개념에 대한 참고 자료 역할을 하므로, 개념들에 대한 정의와 상호 관계를 엄격하게 다루어야 합니다.
 
-**[API 레퍼런스](https://ko.react.dev/reference/react)** 섹션은 개념이 아닌 API별로 정리되어 있으며, 가능한 한 모든 경우를 포함하는 것을 목표로 합니다. 'React 학습하기'에서 간단히 다뤘거나 생략한 예외 사항<sup>Edge Cases</sup> 혹은 권장 사항<sup>Recommendations</sup>은 해당 API의 레퍼런스 문서에 추가로 언급해야 합니다.
+**[API 참고서](https://ko.react.dev/reference/react)** 섹션은 개념이 아닌 API별로 정리되어 있으며, 가능한 한 모든 경우를 포함하는 것을 목표로 합니다. 'React 학습하기'에서 간단히 다뤘거나 생략한 예외 사항<sup>Edge Cases</sup> 혹은 권장 사항<sup>Recommendations</sup>은 해당 API의 레퍼런스 문서에 추가로 언급해야 합니다.
 
 **스스로 작성한 지침<sup>Instructions</sup>을 실천해 보세요.**
 

src/components/Layout/Footer.tsx

@@ -336,7 +336,7 @@ export function Footer() {
             커뮤니티
           </FooterLink>
           <FooterLink href="https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md">
-            Code of Conduct
+            행동 강령
           </FooterLink>
           <FooterLink href="/community/team">팀 소개</FooterLink>
           <FooterLink href="/community/docs-contributors">
@@ -347,7 +347,9 @@ export function Footer() {
         <div className="flex flex-col">
           <FooterLink isHeader={true}>더 보기</FooterLink>
           <FooterLink href="/blog">블로그</FooterLink>
-          <FooterLink href="https://reactnative.dev/">React Native</FooterLink>
+          <FooterLink href="https://reactnative.dev/">
+            React 네이티브
+          </FooterLink>
           <FooterLink href="https://opensource.facebook.com/legal/privacy">
             개인 정보 보호
           </FooterLink>

src/components/Layout/HomeContent.js

@@ -162,7 +162,7 @@ export function HomeContent() {
               size="lg"
               className="w-full sm:w-auto justify-center"
               label="API Reference">
-              API 레퍼런스
+              API 참고서
             </ButtonLink>
           </div>
         </div>
@@ -177,8 +177,8 @@ export function HomeContent() {
               React를 사용하면 컴포넌트라 불리는 조각들을 사용하여 사용자
               인터페이스를 만들 수 있습니다. <Code>Thumbnail</Code>,{' '}
               <Code>LikeButton</Code>, 그리고 <Code>Video</Code> 같은 컴포넌트를
-              만들 수 있습니다. 그런 다음 전체 화면, 페이지 및 앱에서 이들을
-              결합할 수 있습니다.
+              만들어 보세요. 그런 다음 전체 화면, 페이지 및 앱에서 이들을 결합할
+              수 있습니다.
             </Para>
           </Center>
           <FullBleed>
@@ -200,20 +200,20 @@ export function HomeContent() {
               <Br /> 컴포넌트 작성하기
             </Header>
             <Para>
-              React 컴포넌트는 JavaScript 함수입니다. 조건부로 내용을 표시하려면{' '}
-              <Code>if</Code> 문을 사용할 수 있습니다. 목록을 표시하려면 배열에{' '}
-              <Code>map()</Code>을 사용할 수 있습니다. React를 배우는 것은
-              프로그래밍을 배우는 것입니다.
+              React 컴포넌트는 자바스크립트 함수입니다. 조건부로 내용을
+              표시하려면 <Code>if</Code> 문을 사용할 수 있습니다. 목록을
+              표시하려면 배열에 <Code>map()</Code>을 사용할 수 있습니다. React를
+              배우는 것은 프로그래밍을 배우는 것입니다.
             </Para>
           </Center>
           <FullBleed>
             <Example2 />
           </FullBleed>
           <Center>
             <Para>
-              이 마크업 구문을 JSX 라고 부릅니다. 이것은 React에 의해서 대중화된
-              JavaScript 구문의 확장입니다. JSX 마크업을 관련된 렌더링 로직과
-              가까이 두면, React 컴포넌트를 쉽게 만들고 유지하고 삭제할 수
+              이 마크업 구문을 JSX라 부릅니다. 이것은 React에 의해서 대중화된
+              자바스크립트 구문의 확장입니다. JSX 마크업을 관련된 렌더링 로직과
+              가까이 두면, React 컴포넌트를 쉽게 만들고 관리하고 삭제할 수
               있습니다.
             </Para>
           </Center>
@@ -238,7 +238,7 @@ export function HomeContent() {
           <Center>
             <Para>
               전체 페이지를 React로 빌드할 필요는 없습니다. React를 기존 HTML
-              페이지에 추가하고, 어디에서나 상호작용하는 React 컴포넌트를
+              페이지에 추가하고, 페이지 어디에서나 상호작용하는 React 컴포넌트를
               렌더링할 수 있습니다.
             </Para>
             <div className="flex justify-start w-full lg:justify-center">
@@ -255,13 +255,14 @@ export function HomeContent() {
         <Section background="right-card">
           <Center>
             <Header>
-              프레임워크를 통해서
+              프레임워크를 통해
               <Br /> 풀스택으로 만들기
             </Header>
             <Para>
-              React는 라이브러리입니다. 컴포넌트를 함께 묶을 수 있지만, 라우팅과
-              데이터를 가져오는 방법을 규정하지는 않습니다. React로 앱을
-              만들려면, <Link href="https://nextjs.org">Next.js</Link> 또는{' '}
+              React는 라이브러리입니다. 컴포넌트를 조합할 수 있도록 도와주지만,
+              라우팅이나 데이터를 가져오는 방법을 규정하지는 않습니다. React로
+              완전한 앱을 만들려면,{' '}
+              <Link href="https://nextjs.org">Next.js</Link> 또는{' '}
               <Link href="https://remix.run">Remix</Link> 같은 풀스택 React
               프레임워크를 추천합니다.
             </Para>
@@ -271,10 +272,11 @@ export function HomeContent() {
           </FullBleed>
           <Center>
             <Para>
-              React는 아키텍처이기도 합니다. 이를 구현하는 프레임워크를 사용하면
-              서버에서 실행되는 비동기 컴포넌트에서 또는 빌드 도중에 데이터를
-              가져올 수 있습니다. 파일이나 데이터베이스에서 데이터를 읽고, 이를
-              상호작용하는 컴포넌트로 전달할 수 있습니다.
+              React는 아키텍처이기도 합니다. 이를 구현하는 프레임워크는 서버에서
+              실행되는 비동기 컴포넌트 혹은 빌드 중에 실행되는 비동기
+              컴포넌트에서 데이터를 가져올 수 있도록 합니다. 파일이나
+              데이터베이스에서 데이터를 읽고, 이를 상호작용하는 컴포넌트에
+              전달할 수 있습니다.
             </Para>
             <div className="flex justify-start w-full lg:justify-center">
               <CTA
@@ -293,7 +295,7 @@ export function HomeContent() {
               <Para>
                 사람들은 다양한 이유로 웹과 네이티브 앱을 좋아합니다. React는
                 동일한 기술을 사용하여 웹 앱과 네이티브 앱을 모두 만들 수
-                있습니다. 각 플랫폼에 강점을 활용하여 모든 플랫폼에서 적합한
+                있습니다. 각 플랫폼의 장점을 활용하여 모든 플랫폼에서 적합한
                 인터페이스를 구현할 수 있습니다.
               </Para>
             </div>
@@ -311,12 +313,12 @@ export function HomeContent() {
                         웹에 충실하기
                       </h4>
                       <p className="lg:text-xl leading-normal text-secondary">
-                        사람들은 웹이 빠르게 로드되길 기대합니다. 서버에서
+                        사람들은 웹 앱이 빠르게 로드되길 기대합니다. 서버에서
                         React를 사용하면 데이터를 가져오는 동안 HTML을
-                        스트리밍하여 JavaScript 코드가 로드되기 전에 남은 내용을
-                        점진적으로 채울 수 있습니다. 클라이언트에서 React는 표준
-                        web API를 사용하여 렌더링 중에도 UI를 반응적으로 유지할
-                        수 있습니다.
+                        스트리밍하여 자바스크립트 코드가 로드되기 전에 남은
+                        내용을 점진적으로 채울 수 있습니다. 클라이언트에서
+                        React는 표준 웹 API를 사용하여 렌더링 중에도 UI를
+                        반응하도록 유지할 수 있습니다.
                       </p>
                     </div>
                   </div>
@@ -394,21 +396,22 @@ export function HomeContent() {
                       </div>
                       <div className="flex flex-col items-start justify-center pt-0 gap-3 px-2.5 lg:pt-8 lg:px-8">
                         <h4 className="leading-tight text-primary dark:text-primary-dark font-semibold text-3xl lg:text-4xl">
-                          네이티브에서 사용하기
+                          진정한 네이티브에서 사용하기
                         </h4>
                         <p className="h-full lg:text-xl text-secondary dark:text-secondary-dark leading-normal">
-                          사람들은 네이티브 앱이 플랫폼과 같은 모양처럼
-                          느껴지기를 원합니다.{' '}
+                          사람들은 네이티브<sup>Native</sup> 앱이 해당 플랫폼의
+                          모습과 느낌을 갖기를 기대합니다.{' '}
                           <Link href="https://reactnative.dev">
                             React Native
                           </Link>
                           와{' '}
                           <Link href="https://github.com/expo/expo">Expo</Link>
-                          를 사용하면 React를 통하여 Android, iOS 등을 위한 앱을
-                          빌드할 수 있습니다. UI들이 native이기 때문에 진짜
-                          native처럼 보입니다. 이것은 web view가 아닙니다. React
-                          컴포넌트들은 실제 Android, iOS 플랫폼에서 제공하는
-                          view를 렌더링합니다.
+                          를 사용하면 React를 통해 Android, iOS 등을 위한 앱을
+                          빌드할 수 있습니다. UI가 진정한 네이티브이기 때문에
+                          네이티브처럼 보이고 느껴집니다. 이것은 웹 뷰
+                          <sup>Web View</sup>가 아닙니다. React 컴포넌트들은
+                          실제 Android, iOS 플랫폼에서 제공하는 뷰
+                          <sup>View</sup>를 렌더링합니다.
                         </p>
                       </div>
                     </div>
@@ -441,9 +444,9 @@ export function HomeContent() {
                   <Br breakPointPrefix="xl" /> 업그레이드 하기
                 </Header>
                 <Para>
-                  React는 변화에 신중하게 접근합니다. 모든 React 커밋은 10억 명
-                  이상의 사용자가 있는 비즈니스에 크리티컬한 영역에서 테스트
-                  됩니다. Meta에서는 10만 개 이상의 React 컴포넌트가 모든
+                  React는 변화에 신중하게 접근합니다. 모든 React 커밋은 10억명
+                  이상의 사용자가 있는 비즈니스의 크리티컬한 영역에서 테스트를
+                  진행합니다. Meta에서는 10만 개 이상의 React 컴포넌트가 모든
                   마이그레이션 전략을 검증합니다.
                 </Para>
                 <div className="order-last pt-5">
@@ -495,22 +498,22 @@ export function HomeContent() {
               <Center>
                 <Header>수백만 명이 있는 커뮤니티</Header>
                 <Para>
-                  여러분은 혼자가 아닙니다. 200만 명이 넘는 개발자들이 React
-                  문서를 매달 방문합니다. React는 사람들과 팀이 동의할 수 있는
-                  것입니다.
+                  여러분은 혼자가 아닙니다. 전세계의 200만 명이 넘는 개발자들이
+                  React 문서를 매달 방문합니다. React는 사람들과 팀이 동의할 수
+                  있는 것입니다.
                 </Para>
               </Center>
             </div>
             <CommunityGallery />
             <div className="mx-auto flex flex-col max-w-4xl">
               <Center>
                 <Para>
-                  이것이 바로 React가 라이브러리를 넘어 아키텍처, 심지어
-                  에코시스템 그 이상인 이유입니다. React는 커뮤니티입니다.
-                  도움을 요청하고, 기회를 찾고, 새로운 친구를 만날 수 있는
-                  곳입니다. 개발자와 디자이너, 초보자와 전문가, 연구원과 예술가,
-                  교사와 학생을 만날 수 있습니다. 모두의 배경은 다를 수 있지만,
-                  React를 통해 함께 사용자 인터페이스를 만들 수 있습니다.
+                  이것이 바로 React가 단순한 라이브러리, 아키텍처, 혹은 생태계
+                  그 이상인 이유입니다. React는 바로 커뮤니티입니다. 도움을
+                  요청하고, 기회를 찾고, 새로운 친구를 만날 수 있는 곳입니다.
+                  개발자와 디자이너, 초보자와 전문가, 연구원과 예술가, 교사와
+                  학생을 만날 수 있습니다. 배경은 모두 다를 수 있지만, React를
+                  통해 함께 사용자 인터페이스를 만들 수 있습니다.
                 </Para>
               </Center>
             </div>
@@ -528,7 +531,7 @@ export function HomeContent() {
             <Logo className="uwu-hidden text-brand dark:text-brand-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
             <Header>
               React 커뮤니티에
-              <Br /> 오신 것을 환영합니다.
+              <Br /> 오신 것을 환영합니다
             </Header>
             <ButtonLink
               href={'/learn'}

src/components/Layout/TopNav/TopNav.tsx

@@ -326,7 +326,7 @@ export default function TopNav({
                 <NavItem
                   isActive={section === 'reference'}
                   url="/reference/react">
-                  레퍼런스
+                  API 참고서
                 </NavItem>
                 <NavItem isActive={section === 'community'} url="/community">
                   커뮤니티

src/content/blog/2023/03/16/introducing-react-dev.md

@@ -43,7 +43,7 @@ description: 오늘 React와 React 문서의 새로운 보금자리인 react.dev
 **새로운 문서는 Hooks를 사용한 React를 처음부터 가르칩니다.** 문서는 두 가지 주요 섹션으로 나뉘어져 있습니다.
 
 * **[React 배우기](/learn)** 는 React를 기초부터 스스로 학습할 수 있는 과정입니다.
-* **[API 레퍼런스](/reference)** 는 모든 React API에 대한 세부 내용과 사용 예시를 제공합니다.
+* **[API 참고서](/reference)** 는 모든 React API에 대한 세부 내용과 사용 예시를 제공합니다.
 
 각 섹션에서 무슨 내용을 알 수 있는지 자세히 살펴보겠습니다.
 
@@ -456,9 +456,9 @@ export default function PackingList() {
 
 브라우저 공급업체에게 이 표현이 100% 과학적으로 정확하다는 확인을 받았습니다.
 
-## 새로운, 상세한 API 레퍼런스 {/*a-new-detailed-api-reference*/}
+## 새로운, 상세한 API 참고서 {/*a-new-detailed-api-reference*/}
 
-[API 레퍼런스](/reference/react)에서, 이제 모든 React API는 전용 페이지를 가집니다. 모든 종류의 API들이 포함됩니다.
+[API 참고서](/reference/react)에서, 이제 모든 React API는 전용 페이지를 가집니다. 모든 종류의 API들이 포함됩니다.
 
 - [`useState`](/reference/react/useState) 같은 내장 Hooks
 - [`<Suspense>`](/reference/react/Suspense) 같은 내장 컴포넌트
@@ -610,7 +610,7 @@ button { display: block; margin-top: 10px; }
 
 또한 몇몇 API 페이지는 (일반적인 문제에 대한) [트러블슈팅](/reference/react/useEffect#troubleshooting)과 (더 이상 사용하지 않는 API와 관련된) [대안](/reference/react-dom/findDOMNode#alternatives)을 포함하고 있습니다.
 
-이러한 접근 방식이 API 레퍼런스를 단순히 인자를 찾는 용도뿐만 아니라, 각 API가 어떤 다양한 작업을 수행할 수 있는지, 어떻게 다른 API와 연결되어 있는지를 확인하는 데 유용하게 될 것을 기대합니다.
+이러한 접근 방식이 API 참고서를 단순히 인자를 찾는 용도뿐만 아니라, 각 API가 어떤 다양한 작업을 수행할 수 있는지, 어떻게 다른 API와 연결되어 있는지를 확인하는 데 유용하게 될 것을 기대합니다.
 
 ## 다음은 무엇인가요? {/*whats-next*/}
 

src/content/learn/index.md

@@ -382,7 +382,7 @@ button {
 
 ## Hook 사용하기 {/*using-hooks*/}
 
-`use`로 시작하는 함수를 *Hook*이라고 합니다. `useState`는 React에서 제공하는 내장 Hook입니다. 다른 내장 Hook은 [API 레퍼런스](/reference/react)에서 찾아볼 수 있습니다. 또한 기존의 것들을 조합하여 자신만의 Hook을 작성할 수도 있습니다.
+`use`로 시작하는 함수를 *Hook*이라고 합니다. `useState`는 React에서 제공하는 내장 Hook입니다. 다른 내장 Hook은 [API 참고서](/reference/react)에서 찾아볼 수 있습니다. 또한 기존의 것들을 조합하여 자신만의 Hook을 작성할 수도 있습니다.
 
 Hook은 다른 함수보다 더 제한적입니다. 컴포넌트(또는 다른 Hook)의 *상단*에서만 Hook을 호출할 수 있습니다. 조건이나 반복에서 `useState`를 사용하고 싶다면 새 컴포넌트를 추출하여 그곳에 넣으세요.