initial commit

1 files changed, 136 insertions, 0 deletions

diff --git a/files/ko/web/javascript/reference/classes/static/index.html b/files/ko/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..02701e550d
--- /dev/null
+++ b/files/ko/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,136 @@
+---
+title: static
+slug: Web/JavaScript/Reference/Classes/static
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - 자바스크립트
+  - 클래스
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p><strong>static</strong> 키워드는 클래스의 정적 메서드를 정의합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">static methodName() { ... }</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>정적 메서드는 클래스의 인스턴스 없이 호출이 가능하며 클래스가 인스턴스화되면 호출할 수 없다. 정적 메서드는 종종 어플리케이션의 유틸리티 함수를 만드는데 사용된다.</p>
+
+<h2 id="정적_메서드의_호출">정적 메서드의 호출</h2>
+
+<h4 id="다른_정적_메서드에서의_호출">다른 정적 메서드에서의 호출</h4>
+
+<p>동일한 클래스 내의 다른 정적 메서드 내에서 정적 메서드를 호출하는 경우 키워드 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>를 사용할 수 있다.</p>
+
+<pre class="brush: js">class StaticMethodCall {
+  static staticMethod() {
+    return 'Static method has been called';
+  }
+  static anotherStaticMethod() {
+    return this.staticMethod() + ' from another static method';
+  }
+}
+StaticMethodCall.staticMethod();
+// 'Static method has been called'
+
+StaticMethodCall.anotherStaticMethod();
+// 'Static method has been called from another static method'
+</pre>
+
+<h3 id="클래스_생성자_및_다른_메서드에서의_호출">클래스 생성자 및 다른 메서드에서의 호출</h3>
+
+<p>정적 메서드가 비정적 메서드에서 키워드<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> 를 써서는 직접적인 접근을 할 수 없다. 바른 호출 방법은  클래스 명칭을 쓰거나, 즉 <code>CLASSNAME.STATIC_METHOD_NAME()</code> 을 이용하거나 혹은 그 메서드를 생성자의 한 속성으로 부르는 것으로, 즉 <code>constructor</code> : <code>this.constructor.STATIC_METHOD_NAME()</code>를 이용한다.</p>
+
+<pre class="brush: js">class StaticMethodCall {
+  constructor() {
+    console.log(StaticMethodCall.staticMethod());
+    // 'static method has been called.'
+
+    console.log(this.constructor.staticMethod());
+    // 'static method has been called.'
+  }
+
+  static staticMethod() {
+    return 'static method has been called.';
+  }
+}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 예제는 여러가지 내용을 설명합니다.</p>
+
+<ol>
+ <li>어떻게 정적 메서드가 클래스에서 구현되는지</li>
+ <li>클래스의 정적 맴버가 서브클래스화 되는 것을 보여줍니다.</li>
+ <li>정적 메서드가 어떤 경우에 호출 될 수 있는지와 없는지를 설명합니다.</li>
+</ol>
+
+<pre class="brush: js">class Triple {
+  static triple(n) {
+    n = n || 1; //비트연산이 아니어야 합니다.
+    return n * 3;
+  }
+}
+
+class BiggerTriple extends Triple {
+  static triple(n) {
+    return super.triple(n) * super.triple(n);
+  }
+}
+
+console.log(Triple.triple());        // 3
+console.log(Triple.triple(6));       // 18
+console.log(BiggerTriple.triple(3)); // 81
+var tp = new Triple();
+console.log(BiggerTriple.triple(3)); // 81 (부모의 인스턴스에 영향을 받지 않습니다.)
+console.log(tp.triple()); // 'tp.triple은 함수가 아닙니다.'.
+console.log(tp.constructor.triple(4)); // 12
+</pre>
+
+<p> </p>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.classes.static")}}</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>