🔀: Udemy/Ts/section5/62: private (#38)

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱: issue templates 생성

Github에서 작성한 커밋입니다.

* 🌱: pr-template 생성

Github에서 작성한 커밋입니다.

* 🌱: pr-template 수정

Github에서 수정한 커밋입니다.

* 🌱: pr-template 수정

Github에서 수정한 커밋입니다.

* 🚩: udemy section2의 14번 강의를 듣고 실습을 했다.

* 🚩: interface를 학습하기 위해 클래스를 학습하고 실습해보았다.

* 🚩: dist의 컴파일된 js를 확인하기 위해서 es5에서 es6로 ts.config 변경

* 🚩: es6에서 es5로 컴파일 target을 변경

* 🚩: this를 사용해서 출력한 class 내 전역 name 프로퍼티 정상 출력

* 🚩: this키워드를 다시 한번 객체로 감싼 복제 함수 할당 후 출력 undefined 결과 확인, this를 사용시 주의 사항

* 🚩: undefined 재확인

* 🚩: 복제한 class의 함수를 사용 가능하게 하기 위한 방법과 에러 임시적인 해결 단, 똑같이 구현 불가능

* 🚩: 배열 프로퍼티에 접근하는 두 가지 방식

* 🚩: private 설정으로 employees[N]에 값을 할당할수 없다. error

* 🚩: 런타임과 컴파일 과정의 private 영향을 ts, js 파일에서 확인

Author: 4BFC

dist/app.js

@@ -1,18 +1,28 @@
 "use strict";
 var Department = /** @class */ (function () {
     function Department(n) {
+        this.employees = [];
         this.name = n;
     }
-
     Department.prototype.describe = function () {
         console.log("Department: " + this.name);
     };
+    Department.prototype.addEmployee = function (employee) {
+        this.employees.push(employee);
+    };
+    Department.prototype.printEmployeeInformation = function () {
+        console.log(this.employees.length);
+        console.log(this.employees);
+    };
     return Department;
 }());
 var accounting = new Department('Accounting');
+accounting.addEmployee('Max');
+accounting.addEmployee('Manu');
+accounting.employees[2] = 'Anna'; //employee private 설정으로 error 발생
+//위와 같은 방식으로 코드를 작성하고 실행해도 정상적으로 동작을 하지만 복잡한 코드에서 위와 같은 방식은 좋은 방식이 아니다. 따라서 employee를 접근할 수 없게 해야한다. 따라 접근 범위를 제한할 수 있는 private를 사용하면 된다.
+//TSError: ⨯ Unable to compile TypeScript: src / app.ts: 26: 12 - error TS2341: Property 'employees' is private and only accessible within class 'Department'.
+// private는 class 내에서만 접근이 가능하고 외부에서는 접근할수 없다.
+// 단, 해당 error 부분은 컴파일할 때는 문제가 없이 동작해서 app.js에서 확인은 가능하지만 런타임 과정에서는 error를 발생시킨다.
 accounting.describe();
-var accountingCopy = { name: 'newName', describe: accounting.describe };
-//여기서 undefined를 출력하는 이유는 describe가 참조하는 것이 무엇인지 알 수 없기 때문이다.
-//따라서 accountingCopy와 같이 새로운 객체로 재생성을 해서 할당하기 위해서는 class의 describe함수의 매개변수에
-//this를 넣고 타입지정을 Department로 설정한 뒤(즉, 청사진을 참조하게 설정) accountingCopy에 name 프로퍼티를 기입, 할당해줘야 한다.
-accountingCopy.describe();
+accounting.printEmployeeInformation();

package.json

@@ -5,6 +5,7 @@
   "main": "app.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "watch": "tsc -w",
     "start": "ts-node src/app.ts",
     "build": "tsc --build",
     "clean": "tsc --build --clean"

src/app.ts

@@ -1,20 +1,31 @@
 class Department {
   name: string;
+  private employees: string[] = [];
   constructor(n: string) {
     this.name = n;
   }
-
   describe(this: Department) {
     console.log(`Department: ` + this.name)
   }
+
+  addEmployee(employee: string) {
+    this.employees.push(employee);
+  }
+
+  printEmployeeInformation() {
+    console.log(this.employees.length);
+    console.log(this.employees);
+  }
 }
 
 const accounting = new Department('Accounting');
-accounting.describe();
+accounting.addEmployee('Max');
+accounting.addEmployee('Manu');
 
-const accountingCopy = { name: 'newName', describe: accounting.describe };
-//여기서 undefined를 출력하는 이유는 describe가 참조하는 것이 무엇인지 알 수 없기 때문이다.
-//따라서 accountingCopy와 같이 새로운 객체로 재생성을 해서 할당하기 위해서는 class의 describe함수의 매개변수에
-//this를 넣고 타입지정을 Department로 설정한 뒤(즉, 청사진을 참조하게 설정) accountingCopy에 name 프로퍼티를 기입, 할당해줘야 한다.
-
-accountingCopy.describe();
+accounting.employees[2] = 'Anna'; //employee private 설정으로 error 발생
+//위와 같은 방식으로 코드를 작성하고 실행해도 정상적으로 동작을 하지만 복잡한 코드에서 위와 같은 방식은 좋은 방식이 아니다. 따라서 employee를 접근할 수 없게 해야한다. 따라 접근 범위를 제한할 수 있는 private를 사용하면 된다.
+//TSError: ⨯ Unable to compile TypeScript: src / app.ts: 26: 12 - error TS2341: Property 'employees' is private and only accessible within class 'Department'.
+// private는 class 내에서만 접근이 가능하고 외부에서는 접근할수 없다.
+// 단, 해당 error 부분은 컴파일할 때는 문제가 없이 동작해서 app.js에서 확인은 가능하지만 런타임 과정에서는 error를 발생시킨다.
+accounting.describe();
+accounting.printEmployeeInformation();