Skip to content

Commit

Permalink
[ko] global object displayname 신규 번역 (#25100)
Browse files Browse the repository at this point in the history
* [ko] global object displayname 신규 번역

* replace file path
  • Loading branch information
givvemee authored Dec 21, 2024
1 parent b30012b commit 4fdb3a8
Showing 1 changed file with 98 additions and 0 deletions.
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")}}

0 comments on commit 4fdb3a8

Please sign in to comment.