[부스트캠프 9기 챌린지] 학습 정리 - 06일차

안녕하세요!

오늘은 객체지향에 대해 학습해본 날이었습니다.

그리고 오늘은 TypeScript에 대해서도 적용해보는 시간을 가져서 TypeScript에 대해 알아본 내용, 그리고 객체지향에 대한 내용을 정리해보겠습니다.

Yarn & TypeScript 적용

TypeScript: JavaScript에서 정적 타입을 적용할 수 있는 언어(이름 그대로 타입을 지정할 수 있는 JavaScript)

 

왜 굳이 npm 대신 yarn을 썼을까?
1. npm보다 빠른 다운로드 속도
2. 더 깔끔하게 정리되어서 나오는 log
3. 보안 문제에 더 강함
yarn의 단점은?
npm보다 더 저장 공간을 차지함
굳이 npm에서 한번 더 다운받아야 한다는 귀찮음

1. Yarn 설치

npm install -g yarn

2. TypeScript 패키지 설치

yarn add @types/node typescript

3. TypeScript 설정파일 생성

yarn tsc --init

4. 설정파일에 필드 파일이 만들어질 경로 설정 (여기서는 dist 폴더 안에 생성되도록 함)

...
"outDir": "./dist", 
...

5. package.json에 빌드 후 실행 명령어 설정

...
"scripts": {
    "start": "tsc && node dist/index.js"
}
...

6. 프로젝트 실행

yarn start

---

객체지향 프로그래밍

용어

• Class: 하나의 관련있는 주제에 대한 속성과 메서드를 정의해놓은 모음집
• Instance: 특정 Class의 실체를 뜻하는 단어
• Object: Instance와 거의 동일한 의미를 가짐
• Interface: JavaScript에선 만들 수 없지만 TypeScript에서는 생성이 가능함. Class와 비슷하지만 필요한 속성과 메서드들을 구현해놓은 것이 아닌 필요한 목록만 나열해놓은 것

상속 등 객체지향에 대한 설명

https://hel-p.tistory.com/24

[Spring Boot] 1. 객체 지향 프로그래밍을 해야 하는 이유

이전에 작성했던 글인데 여기서 자세하게 설명을 작성해봤습니다.

새로 배운 객체 생성 방법

1. 메서드를 prototype에 보관하는 방법

const Health = function(name, healthTime) {
  this.name = name;
  this.healthTime = healthTime;
}

Health.prototype.showHealth = function() {
  console.log(this.name + "님, 오늘은 " + this.healthTime + "에 운동을 하셨네요");
}

const ho = new Health("crong", "12:12");
ho.showHealth();

Prototype이란?
생성자를 생성된 객체가 여러개여도, prototype을 통해 연결된 객체들은 모두 동일한 메모리 공간에서 재사용됨.
myHealth.__proto__ === myHealth2.__proto__ //true
myHealth2.__proto__ === myHealth3.__proto__ //true

2. Object.create()를 사용하여 생성

const healthObj = {
  showHealth : function() {
    console.log(this.name + "님, 오늘은 " + this.healthTime + "에 운동을 하셨네요");
  }
}

const ho = Object.create(healthObj, {
   name: { value: "crong" },
   healthTime: { value: "12:22" } 
})

ho.showHealth();