Github Action이란?

CI(Continuous Integration)서버란 ?
App 개발자라면 App 소스코드를 짠 후 Build하고, 여러가지 Test도 하고, 그리고 최종 결과물을 특정 장소에 저장하는 Deployment(배포) 를 하곤 한다. 한마디로 개발자들은 코딩한 다음 Build, Test, Deploy 작업을 수행하는데 이를 자동으로 해주는 프로그램이 CI서버이다. 배포서버는 최종결과물을 저장하는 컴퓨터이다. CI서버가 빌드, Test 후에 배포서버로 최종 배포를 하는 것이다.

CI는 Continuous Integration의 약자로 지속적인 통합이라는 뜻이다. 지속적이라는 뜻은 늘 작동 대기 중이라는 뜻이다. 지속적으로 서비스를 한다라는 뜻이다. 통합이라는 뜻은 기본적으로 소스코드를 통합한다라는 뜻이다. 여러사람들이 GIt 같은 버전관리툴에 올린 내용들을 하나로 다운받아서 통합해서 빌드한다.

GitHub Actions는 GitHub에서 제공하는 워크플로우(Workflow) 자동화 도구다. 워크플로우라는 단어가 의미하듯 테스트, 빌드, 배포 뿐 아니라 다양한 작업을 만들어서 자동으로 실행하게 할 수 있다. PR에 특정 코멘트를 남기면 자동으로 머지를 하게 만들 수 있고, 데이터를 수집하는 데에 이용할 수도 있다.

• 개발 과정에서 발생하는 워크 플로우를 자동화 할 수 있는도구
• 빌드 / 테스트 /커버리지 /배포가지 진행 할 수 있다.

사용법

• .github/workflows 아래에 action이 작성된 xxx.yml 파일을 추가한다.
• github의 tab에서 action으로 확인 할 수 있다.

Action과 Workflow

Action은 사용자가 작성하는 실행가능한 코드 덩어리 이다. 하나의 작업을 설명한다.
Workflow는 Action을 실행하는 환경 단계를 서술한다. 하나의 Workflow는 여러개의 Action을 실행할 수 있다. 그래서 이름이 GitHub Actions다. Actions 페이지에 들어가 보면 저장소에서 사용하는 기술에 맞는 Workflow 템플릿을 추천 해준다(다양한 예제 제공).

Image lazy loading 기법

lazy Loading 기법

사용자가 웹 페이지를 열면 전체 페이지의 내용이 다운로드 되어 단일 이동으로 렌더링 됩니다. 이를 통해 브라우저를 캐시할 수 있지만 사용자가 다운로드한 모든 컨텐츠를 실제로 볼 수 있다는 보장은 없습니다.
예를 들어 전체 사진 갤러리를 다운로드 했지만 사용자가 첫번째 이미지만 본 후 사용자가 나갔을 때 웹 페이지에서는 메모리 및 대역폭 낭비로인해 발생합니다.
페이지에 액세스할때 모든 콘텐츠를 대량으로 로드하는 대신 사용자가 필요 할때만 시렞 콘텐츠로 대체 됩니다.

lazy-laodingd을 사용하면 페이지가 placeholder 콘텐츠로 작성이 되며 , 사용자가 필요할때만 실제 콘텐츠로 대체 된다.
last-loading은 페이지를 일겅들이는 시점에 중요하지 안흥ㄴ 리소스를 로딩을 추 후에 하는 기술입니다. ㅇ대신에 이 중요하지 않은 리소스들은 필요할때 로드 되어야합니다.
이미지와 관련된 경우에는 중요하지 않은 리소스들은 ‘off-screen’와 함께 동기화됩니다.
누군가가 웹 페이지(이미지 , 비디오 등)에 리소스를 추가할때 , 리소스는 small placeholder를 참조합니다. 사용자가 웹페이지를 검색할때 실제 리소스는 브라우저에 의해 캐시되고 ㅇ리소스가 사용다 화면에 표시될때 placeholder을 대체합니다. 예를 들어 , 사용자가 웹페이지를 로드하고 즉시 남겨 두면 웹 페이지의 맨 위 부분 이외의 항복이 로드 되지 않습니다.
이미지, 비디오를 그냥 로딩하지 않고 lazy loading을 사뇬하는 이유는 사용자가 볼 수 없는 것들을 로딩할 가능성이 있기 때문입니다.

사용자가 보고 있지 않은 것들을 로딩할 때 데이터가 낭비가 됩니다.
미디어 리소스를 다운로드한 후 브라우저는 이를 디 코딩하여 화면에 렌더링 합니다.

SEO에 미치는 영향

lazy loading은 검색 엔진 순위에 영향을 미치낟. 리소스는 placeholder 콘텐츠여서 웹 사이트를 크롤링하는 검색엔진은 리소소의 내용을 잘못 해석하거나 무시할수 있습니다.
블로그 게시물과 같은 웹페이지의 전체 구성요소를 느리게 로드하면 검색엔진이 해당 구성요소을 우회하여 콘텐츠가 인덱싱 되지 않아 검색엔진 결과가 줄어들수 있습니다.
이러한 문제를 극복하는 한가지 방법은 lazy load하는 콘텐츠에 대한 링크를 제공하는 것 입니다. 이렇게하면 기본적으로 검색엔진 크롤러가 엑세스 할 수 있는 콘텐츠에서 웹페이지를 만듭니다. 검색엔진이 웹사이트를 index하면 이러한 링크를 따라가며 검색한 내용을 색인화 합니다. 이 방법은 기존저긍로 사용자가 콘텐츠를 동적으로 로드할 수 있데 하면서 lazy load도 웹 사이트를 전톤적인 웹사이트로 구성합니다.

장점

1. lazy-loading은 콘텐츠 전달 최적화와 최종 사용자 간의 경험을 간소화하는 균형을 맞춥니다.
2. 사용자가 처음 열 때 웹 사이트의 일부만 다운로드 해야하므로 사용자에게 콘텐츠를 더 빨리 제공합니다.
3. 콘텐츠가 지속적ㅇ르로 사용자에게 공급되므로 사용자가 웹 사이트를 이탈할 확률을 낮출 수 있습니다.
4. 사용자가 한번에 필요한 경우에만 콘텐츠를 불러오므로 리소스 사용(사용자의 배터리 , 시스템 간, 시스템 리소스)이 낮아진다.

1

<img data-src="https://ik.imagekit/demo/default-image.jpg" />

DOM

DOM(DOCUMENT OBJECT MODEL)은 HTML문서의 계층적 구조와 정보를 표현하며 이를 제어할 수있는 API,프로퍼티와 메소드를 제공하는 트리 자료 구조이다.

HTML 문서는 HTML요소들의 집합으로 이루어지며 , html요소는 중첩 관계를 갖는다. html콘텐츠 영역에는 텍스트 뿐아니라 다른 html 요소도 포함 될수 있다. 이때 html요소들 간의 계증적인 관계가 형성이 된다.

이러한 HTML 요소 간의 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다.

노드 객테들로 구성된 트리자료 구조를 DOM이라한다. 노드객체의 트리로 구조화되었기 때문에 dom을 dom트리라고 한다.

DOM은 노드 객체의 계층적인 구조로 구성된다. 노드 객체는 종류가 있고 상속 구조를 갖는다. 노드 객체는 총 12개의 종류(노드 타입)가 있다. 이 중에서 중요한 노드 타입은 아래와 같이 4가지이다.

• 문서 노드

  문서 노드(document node)는 DOM 트리의 최상위에 존재하는 루트 노드로서 document 객체를 가리킨다. document 객체는 브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체로서 전역 객체 window의 document 프로퍼티에 바인딩되어 있다. 따라서 window.document 또는 document로 참조할 수 있다.브라우저 환경의 모든 자바스크립트 코드는 script 태그에 의해 분리되어 있어도 하나의 전역 객체 window를 공유한다. 따라서 모든 자바스크립트 코드는 전역 객체 window의 document 프로퍼티에 바인딩되어 있는 하나의 document 객체를 바라본다. 즉, HTML 문서 당 document 객체는 유일하다.문서 노드, 즉 document 객체는 DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점(entry point) 역할을 담당한다. 즉, 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다.

• 요소 노드

  요소 노드(element node)는 HTML 요소를 가리키는 객체이다. 요소 노드는 HTML 요소 간의 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 표현한다고 할 수 있다.

• 어트리뷰트 노드

  어트리뷰트 노드(attribute node)는 HTML 요소의 어트리뷰트를 가리키는 객체이다. 어트리뷰트 노드는 어트리뷰트가 지정된 HTML 요소의 요소 노드와 형제(sibling) 관계를 갖는다. 따라서 요소 노드에 접근하면 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경할 수 있다.

• 텍스트 노드

  텍스트 노드(text node)는 HTML 요소의 텍스트를 가리키는 객체이다. 텍스트 노드는 요소 노드의 자식 노드이며 자신의 자식 노드를 가질 수 없는 리프 노드(leaf node)이다. 즉, 텍스트 노드는 DOM 트리의 최종단이다. 요소 노드가 문서의 구조를 표현한다면 텍스트 노드는 문서의 정보를 표현한다고 할 수 있다.

위 4가지 노드 타입 이외에도 주석을 위한 Comment 노드, DOCTYPE을 위한 DocumentType 노드, 복수의 노드를 생성하여 추가할 때 사용하는 DocumentFragment 노드 등 총 12개의 타입이 있다.

노드 객체로 자바스트립트의 객체이므로 프로토타입에 의한 상속에 으한 상속구조를 가진다.

1. 타입 선언

TypeScript는 다음 같이 변수 명 뒤에 타이븡ㄹ 명시하는 것으로 타입을 선언 할 수 있다.

1
2

//변수 foo는 string 타입이다.
let foo;string = 'hihi';

선언한 타입에 맞지않는 값을 할당하면 컴파일 시점에서 에러가 발생한다.

1

let bar:number = true; //Error

이러한 타입선언을 개발자가 코드를 에측할 수 있도록 돕는다. 또한 타입 선언은 강력한 타입체크를 가능하게 하여 문법 에러나 타입고 일치 하지않는 할당 증 기본적인 오류는 런타임 이전에 검출한다.

함수의 매개변수와 반환값에 대한 타입 선언 방법은 다음과 같다. 일반 변수와 마찬가지로 선언된 타입에 일치 하지 않는 값이 주어지면 에러가 발생한다.

1
2
3
4
5
6
7
8
9
10
11
12

//함수 선언식
function multiply1(x:number ,y:number):number{
  return x * y;
}

//함수 표현식
const multiply2 = (x:number,y:number):number => x * y;

console.log(multiply1(10, 2));
console.log(multiply2(10, 3));

console.log(multiply1(true, 1)); // error

TypeScript는 ES5, ES6의 상위확장이므로 자바스크립트의 타입을 그대로 사용할 수 있다. 자바스크립트 타입 이외에도 TypeScript 고유의 타입이 추가로 제공된다.

#타입 가드란?
일부 스코프에서 타입을 보장하는 런타임 검사를 수행하는 표현식. 타입 가드를 정의하여면 반환 타입이 타입 명제(type predicate)인 함수를 정의 하기만 하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

interface Bird {
  fly();
  eat();
}
interface Fish{
  swim();
  eat();
}
function getSmallPet: Fish | Bird{
  ...
}
  
let pet = getSmallPet();

 //타입 가드
 //타입 명제는 argName is Type형태
 //argName은 현재 함수에서 사용한 매개변수의 이름을 사용해야한다.
function isFish(pet:Fish | Bird):pet is Fish{
  return (<Fish>pet).swim !== undefined;
}
 

if(isFish(pet)){ //isFish(pet)이 true이면 pet은 Fish이다.
  pet.swim();
}else{
  pet.fly();
}

typeof 타입 가드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function isNumber(x:any):x is number{
  return typeof x === "number";
}
function isString(x:any):x is string{
  return typeof x === "string";
}
function padLeft(value:string,padding: string | number){
  if(isNumber(padding)){
    return Array(padding+1).join(" ").value;
  }
  if(isString(padding)){
    return padding + value;
  }
  throw new Error(`Expected string or number, got '${padding}'`);
}

다음과 같은 순반복 작업을 피하기 위해 , 타입 스크립트에서 인라인 검사를 통해 타입가드를 통해 지원한다.

인라인은 함수의 내용만을 그대로 옮겨 놓은 듯이 작성하는 것을 의미

1
2
3
4
5
6
7
8
9

function padLeft(value:string,padding:string | number){
  if(typeof padding === "number"){
    return Array(paddding+1).join(" ").value;
  }
  if(typeof padding === "string"){
    return padding + value;
  }
  throw new Error(`Expected string or number, got '${padding}'`)
}

typeof을 사용한 타입가드느 typeof === “typename” 또는 typeif !== “typename”두가지 형태를 지원하고 ,typename은 [number ,string , boolean,symbol]중 하나이어야한다.

instanceof 타입 가드

클래스를 사용할 때는 instanceof을 사용한다.

1. 타입 스크립트 클래스의 정의(class Definition)

ES6 클래스는 클래스 몸체에 메소드 만을 포함할 수 있다. 클래스 몸체에 클래스 프로퍼티를 선언 할 수 없고 반드시 생성자 내부에 클래스 프로퍼티를 선언하고 초기화 한다.

1
2
3
4
5
6
7
8
9
10

//person.js
class Person{
  constructor(name){
    //클래스 프로퍼티의 선언과 포기화
    this.name = name
  }
  walk(){
    console.log(`${this.name} is Walking`);
  }
}

위 예제의 Es6에서의 문제없이 실행되는 토드이지만 위 파일의 확장자를 ts로 바꿔 TypeScript 파일로 변경항 후 , 컴파일하면 아래와 같이 컴파일 에러가 발생한다.

1
2

person.ts(4,10): error TS2339: Property 'name' does not exist on type 'Person'.
person.ts(8,25): error TS2339: Property 'name' does not exist on type 'Person'.

TypeScript 클래스는 클래스 몸체에 클래스 프로퍼티를 사전 선언하여여한다

1
2
3
4
5
6
7
8
9
10
11
12
13

class Person{
  //클래스 프로퍼티를 사전 선언해야 힌다.
  name:string;
  constructor(name){
    //클래스 프로퍼티수에 값을 할당
    this.name = name;
  }
  walk(){
    console.log(`${this.name} is Walking`);
  }
}
const person = new Person('kim')
person.walk(); // kim is Walking

2. 접근제한자

TypeScript 클래스는 클래스 기반 객체 지향언어가 지원하는 접근제한자 public , private,proteted를 지워하며 의미 또하 기본적으로 동일 하다.

단 , 접근제한자를 명시하지 않았을때 , 다른 클래스 기반의 언어의 경우 , 암묵적으로 protected 로 지정 되어 패키지 레벨로 공개되지만 TypeScript의 경우 , 접근 제한자르르 생략한 클래스 프로퍼티와 메소드는 암묵적으로 public 이 선언 된다. 따라서 public으로 지정 하고자하는 멤버 변수와 메소드는 접근자 제한자를 생략한다 .

Typescript 는 정적 타입 언어이기 때문이 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언 해야한다. 그런데 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언하기 어려운 경우가 있다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

class Queue{
  protected data = []; // data :any[]
  push(item){
    this.data.push(item);
  }
  pop(){
    return this.data.shift();
  }
}
const queue = new Queue();

queue.push(0);
queue.push('0')//의도치 않은 실수

console.log(queue.pop().toFixed())// 0;
console.log(queue.pop().toFixed())// 런타임 에러

Queue 클래스의 data 프로터티는 타입 선언을 생략 하였기 때문에 any[]타입이 된다. any[]타입은 어떤 타입의 요소도 가질 수 있는 배열을 의미한다. any[]타입은 배열의 요소의 타입이 모두 같지 않다는 문제를 가지게 된다. 위 예제의 경우 data 프로퍼티는 number 타입만을 포함하는 배열이라는 기대 하에 각 요소에 대해
Number.prototype.toFixed를 사용하였다. 따라서 number 타입이 아닌 요소의 경우 런타입 에러가 발생한다.
위와 같은 문제를 해결하기 위해 Queue 클래스를 상속하여 number 타입 전용 NumberQueue 클래스를 정의 해보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

class Queue{
  protected data = [];
  
  push(item){
    this.data.push(item)
  }
  pop(){
    this.data.shift();
  }
}
//Queue 클래스를 상속하여 number 타입 전용 NumberQueue 클래스 정의
class NumberQueue extends Queue{
  //number타입의 요소만을 push한다.
  push(item:number){
    super.push(item);
  }
  pop():number{
    return super.pop();
  }
}
const queue = new NumberQueue();
queue.push(0);
// 의도하지 않은 실수를 사전 검출 가능
// [ts] Argument of type '"1"' is not assignable to parameter of type 'number'.
//quueue.push('0')
queue.push(+'0');
console.log(queue.pop().toFixed()); // 0

이와 같이 number 타입전용 NumberQueue 클래스를 정의하면 number 타입이외의 요소 추가(push)되었을 때 , 런타임 에러 이전에 에러를 사전에 감지 할 수 있다.

하지만 다양한 타입을 지원해야 한다면 타입 별로 클래스를 상속받아 추가 해야하므로 이 또한 좋은 방법은 아니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

class Queue<T>{
  protected data :Array<T> = [];
  push(item:T){
    this.data.push(item);
  }
  pop():T{
    return this.data.shift()p;
  }
}
//number 전용 Queue
const numberQueue = new Queue<number>();
numberQueue.push(0);
// numberQueue.push('1'); // 의도하지 않은 실수를 사전 검출 가능
numberQueue.push(+'1');   // 실수를 사전 인지하고 수정할 수 있다

console.log(numberQueue.pop().toFixed()); // 0
console.log(numberQueue.pop().toFixed()); // 1

//string 전용 Queue
const stringQueue = new Queue<string>();

stringQueue.push('Hello');
stringQueue.push('World');

console.log(stringQueue.pop().toUpperCase()); // HELLO
console.log(stringQueue.pop().toUpperCase()); // WORLD


//커스텀 객체 전용 Queue 
const myQueue = new Queue<{name:string,age:number}>();
myQueue.push({name:'kim',age:25});
myQueue.push({name:'park',age:20});

console.log(myQueue.pop()); // {name:'kim',age:25}
console.log(myQueue.pop()); // {name:'park',age:20}

제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한 번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이 있다.

T는 제네릭을 선언할 때 관용적으로 사용되는 식별자로 타입 파라미터라 한다. T는 Type의 약자로 반드시 T을 사용해야하는 것은 아니다. 또한 함수에도 제네릭을 사용할 수 있다. 제네릭을 사용하면 하나의 타입이 아닌 다양한 타입의 매개 변수와 리턴 값을 사용할 수 있다.

타입 엘리어스는 새로운 타입을 정의한다. 타입으로 사용할 수 다는 점에서 타입 엘리어스는 인터페이스와 유사하다. 인터페이스는 다음과 같이 타입으로 사용할 수 있다.

1
2
3
4
5
6
7
8
9

interface Person{
  name:string;
  age?:number;
}
//빈객체를 Person타입으로 지정
const person = {} as Person;
person.name = 'kim';
person.age = 20;
person.address = 'Seoul' //Error;

타입 엘리어스도 인터페이스와 마찬가지로 타입으로 사용할 수있다.

1
2
3
4
5
6
7
8
9
10

//타입 엘리어스
type Person{
name:string,
age?:number
};
//빈 객체를 Person타입으로 지정
const person = {} as Person;
person.name = 'kim';
person.age = 20;
person.address = 'Seoul' //Error;

하지만 타입 엘리어스는 원시값, 유니온 타입 ,튜플 등도 타입으로 지정 할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

//문자열 리터럴로 타입 지정
type Str = 'kim';

//유니온 타입으로 타입 지정
type Union = string | null;

//문자열 유니온 타입으로 타입 지정
typ Name = 'kim'| 'lee';

//숫자 리터럴로 유니온 타입으로 타입 지정
type Num = 1| 2 | 3 | 4 | 5;

//객체 리터럴 유니온 타닙으로 타입 지정
typs Obj = {a:1} | {b:2};

//함수 유니온 타입으로 타입지정
type Fuc = (()=>string) | (()=> void);

                           
//인터페이스 유니온 타입으로 타입 지정
type Shape = Square | Rectangle | Circle;
                           
//튜플로 타입지정
type Tuple = [string ,boolean];
const t:Tuple = ['',1]
const f:Tuple = ['',''] //Error 지정한 타입만 가능하다.

인터페이스는 extends 또는 implements 될 수 있지만 타입 엘리어스는 extends , implements 될 수 없다. 즉 상속을 통해 확장이 필요하다면 타입 엘리어스보다는 인터페이스가 유리하다. 하지만 인터 페이스로 표현 할 수없거나 유니온 타입 또는튜플을 사용해야한다면 타입 엘리어스를 사용하는 것이 유리하다.

그러나 현시점에서는 type도 extends , implements 모두 사용 가능하도록 변경 되었다.

1
2
3
4
5
6
7
8
9
10
11
12
13

type test = {
  a:number;
}
interface inter extends test{ //ok
  b:number;
}
class Test implements inter{// ok
 public a = 1;
 public b = 1;
}
class Test2 implements test{ //ok
  public a = 1;
}

자바스크립트는 프로토 타입의 객체 지향 언어이다.프로토타입기방의 객체 지향 언어는 클래스가 필요없는 객체 지향 프로그래밍 언이다. ES5에서는 class없이 생성자 함수와 프로토 타입을 통해 객체 지향언어의 상속을 구현할 수있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//es5생성자 함수
var Person = (function (){
  //생성자 함수
  function Person(name){
    this.name = name;
  }
  //프로토타입의 메소드
  Person.prototype.sayHello= function(){
    console.log(`Hello ${this.name}`);
    
    //생성자 함수 반환
    return Person;
  }
})();
const me = new Person('kim');
me.sayHello() // Hello kim

ES6에서는 클래스가 도입되었다.그러나 도입된 클래스는 프로토타입기반의 프로그래밍 언어를 버리고 새롭게 Java 나 C++ 같은 클래스 지향 객체를 제공하는 것이 아니다. 사실은 Es6의 클래스는 함수이면 기존의 프로토 타입 기반 패턴을 클래스 기반 패턴으로 사용할수있는 문법적 설탕이다.
클래스와 생성자 함수는 모두 프로토 타입 기반의 인스턴스를 생성하지만 정확히 동일하게 동작하지않는다. 클래스는 생성자 함수보다 엄격하며 생성자 ㅎ마수에서는 제공하지않는 기능도 제공한다.

클래스는 생성자 함수와 매우 유사하게 동작하지만 다음과 같은 차이가 있다.

1. 클래스는 new 연산자를 사용하지않고 호출하면 에러가 발생한다.
2. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 하지만 생성자 함수는 extends와 super키워드를 사용하지 않는다.
3. 클래스는 호이스팅이 발생하지 않는것 처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 호이스팅이 , 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다.
4. 클래스 내의 모든 코드에는 암묵적으로 strict모드가 지정되어 실행되며 strict모드를 해지 할 수 없다. 하지만 생성자 함수는 암묵적으로 strict모드가 지정 되지않는다.
5. 클래스의 constructor, 프로토 타입의 메서드 ,정적 메서드는 모두 프로퍼티 어트리뷰트[[Enummerable]]의 값이 false이다. 다시말해 ,열거되지않는다.

생성자 함수와 클래스는 프로토 타입 기반의 객체 지향을 구현 했다는 점에서 유사하다. 하지만 클래스는 생성자 함수를 기반으로한 객체 생성 방식보다 견고하고 명료하다. 클래스의 extend와super 키워드는 상속관계 구현을 보다 간결하고 명료하게 한다.

1.클래스의 정의

클래스의 class키워드를 사용하여 정의한다. 클래스의 이름은 생성자 함수와 마찬가지로 파스칼케이스를 사용하는 것이 일반적이다.

1
2

//클래스 선언문
class Person{}

일반적이지는 않지만 함수와 마찬가지로 표현식으로 정의할 수 있다. 이때 클래스는 함수와 마찬가지로 이름을 가질수도 ,않을수도 있다

1. 소개

인터페이스는 일반적으로 타입체크를 위해 사용되며 변수,함수,클래스에 사용할 수 있다.여러가지 타입을 갖는 프로터피로 이루어진 새로운 타입을 정의하는 것과 유사하다. 인터페이스는 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는것이다. ES6 인터페이스는 지원을 지원하지 않지만 TypeScript는 인터페이스를 지원한다.

인터페이스는 프로퍼티와 메소드를 가질수 있다는 점에서 클래스와 유사하나 직접 인스턴스를 생성 할 수없고 모든 메소드는 추상 메소드이다. 단 추상 클래스의 추상 메소드와 달리 abstarct 키워드를 사용하지 않는다.

2. 변수와 인터페이스

인터페이스는 변수의 타입으로 사용할 수 있다. 이때 인터페이스를 타입로 선언한 변수는 해당 인터페이스를 준수 하여야한다. 이서은 새로운 타입을 정의하는것과 유사하다.

1
2
3
4
5
6
7
8
9
10
11
12

//인터페이스의 정의 
interface Todo{
  id:number;
  content:string;
  completed:boolean;
}

//변수의 todo 타입으로 Todo 인터페이스를 선언하였다.
let todo = Todo;

//변수 todo는 Todo 인터페이스를 준수해야한다. 
todo = {id:1,content:'typescript',completed:false};

인터페이스를 사용하여 함수 파라미터의 타입을 선언할 수있다. 이때 해당 함수에는 파리미터의 타입으로 지정한 인터페이스를 준수하는 인수를 전달하여 야한다. 함수의 객체를 전달할 때 복잡한 매개변수 체크가 필요없어 매우 유용하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//인터페이스의 정의 
interface Todo {
  id:number;
  content:string;
  completed:boolean;
};
let todos = Todo:[] =[];

//파라미터 todo의 타입으로 Todo 인터페이스를 선언하였다.
function addTodo(todo:Todo){
  todos = [...todos,todo];
}

//파라니터 todo는 Todo 인터페이스를 준수해야한다. 
const newTodo = {id:1,content:'typescript',completed:false};
addTodo(newTodo);
console.log(todos);
//// [ { id: 1, content: 'typescript', completed: false } ]

3. 함수와 인터페이스