diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 89208a6bb..1981b78af 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -4,30 +4,30 @@ title: React Developer Tools -Use React Developer Tools to inspect React [components](/learn/your-first-component), edit [props](/learn/passing-props-to-a-component) and [state](/learn/state-a-components-memory), and identify performance problems. +React Developer Tools를 사용하여 React [컴포넌트](/learn/your-first-component)를 검사하고 [props](/learn/passing-props-to-a-component)와 [state](/learn/state-a-components-memory)를 편집할 수 있으며 성능 문제를 식별할 수 있습니다. -* How to install React Developer Tools +* React Developer Tools 설치 방법 -## Browser extension {/*browser-extension*/} +## 브라우저 확장 프로그램 {/*browser-extension*/} -The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers: +React로 빌드된 웹 사이트를 디버깅하는 가장 쉬운 방법은 React Developer Tools 브라우저 확장 프로그램을 설치하는 것입니다. 널리 사용되는 여러 브라우저에서 사용할 수 있습니다. -* [Install for **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) -* [Install for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) -* [Install for **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) +* [**Chrome**용으로 설치](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +* [**Firefox**용으로 설치](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) +* [**Edge**용으로 설치](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) -Now, if you visit a website **built with React,** you will see the _Components_ and _Profiler_ panels. +설치가 완료되면 **React로 구축된** 사이트에 방문하면 _Components_ and _Profiler_ 패널이 표시됩니다. ![React Developer Tools extension](/images/docs/react-devtools-extension.png) -### Safari and other browsers {/*safari-and-other-browsers*/} -For other browsers (for example, Safari), install the [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package: +### Safari 및 기타 브라우저 {/*safari-and-other-browsers*/} +다른 브라우저(예: Safari)의 경우, [`react-devtools`](https://www.npmjs.com/package/react-devtools)를 npm package로 설치해야 합니다. ```bash # Yarn yarn global add react-devtools @@ -36,26 +36,26 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal: +다음으로 터미널에서 개발자 도구를 엽니다. ```bash react-devtools ``` -Then connect your website by adding the following ` ``` -Reload your website in the browser now to view it in developer tools. +브라우저를 새로고침하면 개발자 도구를 확인할 수 있습니다. ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) -## Mobile (React Native) {/*mobile-react-native*/} -React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well. +## 모바일 (React Native) {/*mobile-react-native*/} +React Developer Tools는 [React Native](https://reactnative.dev/)로 만들어진 앱에서도 잘 동작합니다. -The easiest way to use React Developer Tools is to install it globally: +React Developer Tools를 사용하는 가장 쉬운 방법은 전역적으로 설치하는 것입니다. ```bash # Yarn yarn global add react-devtools @@ -64,13 +64,13 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal. +다음으로 터미널에서 개발자 도구를 여십시오. ```bash react-devtools ``` -It should connect to any local React Native app that's running. +실행 중인 로컬 React Native 앱에 연결해야 합니다. -> Try reloading the app if developer tools doesn't connect after a few seconds. +> 개발자 도구가 몇 초 후에 연결되지 않으면 앱을 다시 로드해 보십시오. -[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging) +[React Native 디버깅에 대하여 더 알아보기](https://reactnative.dev/docs/debugging)