-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[ko] global object displayname 신규 번역 (#25100)
* [ko] global object displayname 신규 번역 * replace file path
- Loading branch information
Showing
1 changed file
with
98 additions
and
0 deletions.
There are no files selected for viewing
98 changes: 98 additions & 0 deletions
98
files/ko/web/javascript/reference/global_objects/function/displayname/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
--- | ||
title: "Function: displayName" | ||
slug: Web/JavaScript/Reference/Global_Objects/Function/displayName | ||
l10n: | ||
sourceCommit: e03b13c7e157ec7b7bb02a6c7c4854b862195905 | ||
--- | ||
|
||
{{JSRef}} {{Non-standard_Header}} | ||
|
||
{{jsxref("Function")}} 인스턴스의 선택 속성인 **`displayName`** 함수의 표시 이름을 설정합니다. | ||
|
||
## 값 | ||
|
||
`displayName` 속성은 모든 함수에 대해 초기에 존재하는 것이 아니라 코드 작성자가 추가하는 것입니다. 표시의 일환으로, 이는 문자열 값을 가집니다. | ||
|
||
## 설명 | ||
|
||
만일 `displayName` 속성이 존재한다면 콘솔과 프로파일러는 이를 {{jsxref("Function/name", "name")}} 속성보다 우선하여 사용하는 것을 선호합니다. | ||
|
||
브라우저 사이에서는 오직 파이어폭스 콘솔에서만 이 속성을 활용합니다. 리액트 개발자 도구에서도 [`displayName`](https://legacy.reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging) 속성을 컴포넌트 트리를 표시할 때 사용합니다. | ||
|
||
파이어폭스에서는 아래 패턴들이 감지되면 [익명 JavaScript 함수 네이밍 컨벤션](https://johnjbarton.github.io/nonymous/index.html) 알고리즘을 활용하여 `displayName` 를 복호화하려는 기본적인 시도가 있습니다. | ||
|
||
- 만일 `displayName` 이 영문자와 숫자와 `_` , `$` 로 끝나는 경우, 해당 접미사 중 가장 긴 부분이 표시됩니다. | ||
- 만일 `displayName` 이 `[]` 로 감싸진 문자들로 끝나는 경우, 대괄호를 제외한 해당 문자열이 표시됩니다. | ||
- 만일 `displayName` 이 영숫자와 `_` 로 구성된 문자열 다음에 `/`, `.`, 또는 `<` 가 붙어서 끝나는 경우, 끝에 있는 `/`, `.`, 또는 `<` 문자들을 제외한 문자열이 표시됩니다. | ||
- 만일 `displayName` 이 영문자와 숫자와 `_` 로 구성된 문자열 다음에 `(^)` 로 끝나는 경우, `(^)` 없이 해당 문자열이 표시됩니다. | ||
|
||
위 패턴과 일치하지 않는 경우에는 전체 `displayName` 가 표시됩니다. | ||
|
||
## 예제 | ||
|
||
### 표시 이름 설정하기 | ||
|
||
파이어폭스 콘솔을 확인하면, `function MyFunction()` 과 같은 형태로 이름이 표시됩니다. | ||
|
||
```js | ||
const a = function () {}; | ||
a.displayName = "MyFunction"; | ||
|
||
a; // function MyFunction() | ||
``` | ||
|
||
### 표시 이름을 동적으로 변경하기 | ||
|
||
함수의 `displayName` 을 동적으로 변경할 수 있습니다. | ||
|
||
```js | ||
const object = { | ||
// 익명 | ||
someMethod: function someMethod(value) { | ||
someMethod.displayName = `someMethod (${value})`; | ||
}, | ||
}; | ||
|
||
console.log(object.someMethod.displayName); // undefined | ||
|
||
object.someMethod("123"); | ||
console.log(object.someMethod.displayName); // "someMethod (123)" | ||
``` | ||
|
||
### 표시 이름 정리하기 | ||
|
||
파이어폭스 개발자 도구에서는 `displayName` 속성을 표시하기 전에 몇 가지 일반적인 패턴을 정리하여 보여줍니다. | ||
|
||
```js | ||
function foo() {} | ||
|
||
function testName(name) { | ||
foo.displayName = name; | ||
console.log(foo); | ||
} | ||
|
||
testName("$foo$"); // function $foo$() | ||
testName("foo bar"); // function bar() | ||
testName("Foo.prototype.add"); // function add() | ||
testName("foo ."); // function foo .() | ||
testName("foo <"); // function foo <() | ||
testName("foo?"); // function foo?() | ||
testName("foo()"); // function foo()() | ||
|
||
testName("[...]"); // function ...() | ||
testName("foo<"); // function foo() | ||
testName("foo..."); // function foo() | ||
testName("foo(^)"); // function foo() | ||
``` | ||
|
||
## 명세서 | ||
|
||
Not part of any standard. | ||
|
||
## 브라우저 호환성 | ||
|
||
{{Compat}} | ||
|
||
## 같이 보기 | ||
|
||
- {{jsxref("Function.prototype.name")}} |