Skip to content

Commit 6d16e7c

Browse files
wonjin-devhg-pyun
andauthored
Translate: <React Developer Tools> (#608)
* Translate: <React Developer Tools> * fix: 워딩 수정 * fix: 리뷰 반영_서식 수정 * fix: 리뷰반영_조사와 앞단어 공백 제거 --------- Co-authored-by: Haegul Pyun <phg2491@gmail.com>
1 parent 5459579 commit 6d16e7c

File tree

1 file changed

+20
-20
lines changed

1 file changed

+20
-20
lines changed

src/content/learn/react-developer-tools.md

+20-20
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,30 @@ title: React Developer Tools
44

55
<Intro>
66

7-
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.
7+
React Developer Tools를 사용하여 React [컴포넌트](/learn/your-first-component)를 검사하고 [props](/learn/passing-props-to-a-component)[state](/learn/state-a-components-memory)를 편집할 수 있으며 성능 문제를 식별할 수 있습니다.
88

99
</Intro>
1010

1111
<YouWillLearn>
1212

13-
* How to install React Developer Tools
13+
* React Developer Tools 설치 방법
1414

1515
</YouWillLearn>
1616

17-
## Browser extension {/*browser-extension*/}
17+
## 브라우저 확장 프로그램 {/*browser-extension*/}
1818

19-
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:
19+
React로 빌드된 웹 사이트를 디버깅하는 가장 쉬운 방법은 React Developer Tools 브라우저 확장 프로그램을 설치하는 것입니다. 널리 사용되는 여러 브라우저에서 사용할 수 있습니다.
2020

21-
* [Install for **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
22-
* [Install for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
23-
* [Install for **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
21+
* [**Chrome**용으로 설치](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
22+
* [**Firefox**용으로 설치](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
23+
* [**Edge**용으로 설치](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
2424

25-
Now, if you visit a website **built with React,** you will see the _Components_ and _Profiler_ panels.
25+
설치가 완료되면 **React로 구축된** 사이트에 방문하면 _Components_ and _Profiler_ 패널이 표시됩니다.
2626

2727
![React Developer Tools extension](/images/docs/react-devtools-extension.png)
2828

29-
### Safari and other browsers {/*safari-and-other-browsers*/}
30-
For other browsers (for example, Safari), install the [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package:
29+
### Safari 및 기타 브라우저 {/*safari-and-other-browsers*/}
30+
다른 브라우저(예: Safari)의 경우, [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package로 설치해야 합니다.
3131
```bash
3232
# Yarn
3333
yarn global add react-devtools
@@ -36,26 +36,26 @@ yarn global add react-devtools
3636
npm install -g react-devtools
3737
```
3838

39-
Next open the developer tools from the terminal:
39+
다음으로 터미널에서 개발자 도구를 엽니다.
4040
```bash
4141
react-devtools
4242
```
4343

44-
Then connect your website by adding the following `<script>` tag to the beginning of your website's `<head>`:
44+
다음으로 당신의 웹 사이트의 `<head>``<script>` 태그를 통해 웹 사이트를 연결합니다.
4545
```html {3}
4646
<html>
4747
<head>
4848
<script src="http://localhost:8097"></script>
4949
```
5050

51-
Reload your website in the browser now to view it in developer tools.
51+
브라우저를 새로고침하면 개발자 도구를 확인할 수 있습니다.
5252

5353
![React Developer Tools standalone](/images/docs/react-devtools-standalone.png)
5454

55-
## Mobile (React Native) {/*mobile-react-native*/}
56-
React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well.
55+
## 모바일 (React Native) {/*mobile-react-native*/}
56+
React Developer Tools는 [React Native](https://reactnative.dev/)로 만들어진 앱에서도 잘 동작합니다.
5757

58-
The easiest way to use React Developer Tools is to install it globally:
58+
React Developer Tools를 사용하는 가장 쉬운 방법은 전역적으로 설치하는 것입니다.
5959
```bash
6060
# Yarn
6161
yarn global add react-devtools
@@ -64,13 +64,13 @@ yarn global add react-devtools
6464
npm install -g react-devtools
6565
```
6666

67-
Next open the developer tools from the terminal.
67+
다음으로 터미널에서 개발자 도구를 여십시오.
6868
```bash
6969
react-devtools
7070
```
7171

72-
It should connect to any local React Native app that's running.
72+
실행 중인 로컬 React Native 앱에 연결해야 합니다.
7373

74-
> Try reloading the app if developer tools doesn't connect after a few seconds.
74+
> 개발자 도구가 몇 초 후에 연결되지 않으면 앱을 다시 로드해 보십시오.
7575
76-
[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging)
76+
[React Native 디버깅에 대하여 더 알아보기](https://reactnative.dev/docs/debugging)

0 commit comments

Comments
 (0)