이건 꼭 넣어주기
- 문 시 해 알
어떤 문제가 있었는지
내가 시도해본 것들 <<- 가장 중요하므로
어떻게 해결했는지
뭘 새롭게 알았는지 <<- 이 둘은 자세히
요점이 중요할 뿐 꾸밀 필요는 없지만
프론트앤드 지망일 경우 모든 것을 전부 꾸미세요 배포포함
- WIL ?
TIL의 회고 : 이번주 알게 된 점 총정리
다음 주 목표 세우기
이번 주 목표 달성 여부
.
~ 지금까지는 낙서 메모장이었다면
이제부터는 중요한 부분만 신경써서 잘 쓸 수 있을 것 같다
클래스
클래스(Class)는 다양한 종류의 책상을 만드는 설계도와 비슷하다. 이 설계도를 보면 어떤 종류의 책상을 만들 수 있는지, 책상이 가지고 있는 특징(이 특징은 변수-또는 속성과 메서드)은 무엇인지 알 수 있다.
인스턴스(Instance)는 이 설계도를 보고 만들어진 실제 책상이라고 볼 수 있다. 책상의 모양, 크기, 색상, 재료 등은 모두 설계도에 따라 만들어지며, 이러한 책상들은 모두 다른 인스턴스가 된다.
- 클래스 해보기
class Car {
constructor (modelName, modelYear, type, price) {
this.modelName = modelName;
this.modelYear = modelYear;
this.type = type;
this.price = price;
}
makeNoise() {
console.log(`${this.modelName} 빵빠앙`);
}
showYear() {
console.log(`${this.modelName}은 ${this.modelYear}년도 모델`)
}
}
클래스를 만들 때는 생성자(constructor)가 무조건 따라와야한다!
클락션 울리는 메서드와
몇년도 모델인지 알려주는 메서드를 만들어 봤다
(차알못이라 아무이름과 아무년도로 써봄)
const car1 = new Car("k5", "2022", "taxi", 100)
const car2 = new Car("sm3", "2019", "myCar", 120)
const car3 = new Car("truck", "2017", "Industrial", 200)
car1.makeNoise(); // k5 빵빠앙 -출력
car2.showYear(); // sm3은 2019년도 모델 -출력필수로 입력되어야 하는 값을 넣고 출력했다
(아직 바로바로 빠르게 만들기는 어려워서
두세개 더 실습해봐야겠음)
- Getter와 Setter 연습
위에서 만든 카 클래스 부분에서 추가로 연습하기
get modelName() {
return this._modelName;
}
set modelName(value) {
// 유효성 검사
if (value.length <= 0) {
console.log("[오류] 모델명이 입력되지 않았습니다.");
return;
} else if (typeof value !== 'string') {
console.log("[오류] 문자형으로 입력해야합니다.");
return;
}
this._modelName = value;
}
get modelYear() {
return this._modelYear;
}
set modelYear(value) {
// 유효성 검사
if (value.length !== 4) {
console.log("[오류] 4자리를 입력해주세요.");
return;
} else if (typeof value !== 'string') {
console.log("[오류] 문자형으로 입력해야합니다.");
return;
}
this._modelYear = value;
}
get type() {
return this._type;
}
set type(value) {
if (value.length <= 0) {
console.log("[오류] 타입이 입력되지 않았습니다.");
return;
} // g(가솔린), d(디젤), e(전기차)가 아닌 경우 오류
else if (value !== "g" && value !== "d" && value !== "e") {
console.log("[오류] 타입이 잘못 입력되었습니다.");
return;
}
this._type = value;
}
get price() {
return this._price;
}
set price(value) {
if (value.length <= 0) {
console.log("[오류] 가격이 입력되지 않았습니다.");
return;
} else if (typeof value !== 'number') {
console.log("[오류] 숫자로 입력해야합니다.");
return;
}
this._price = value;
}카 클래스 컨스트럭터에 입력될 값이 4개라 코드가 너무 길어지긴 했지만
각 값의 get과 set을 추가하고
set에 유효성 검사를 하는 조건을 넣은 것
=> Getter와 Setter 사용하는 이유 : 유효성 검사로 아주 유용함
그리고 위치는 클래스의 기본요건 컨스트럭터와 메소드 사이에
get과 set을 넣어주면 된다.
여기서 포인트는 this로 접근하는 property에 underscore(_)를 사용해야 무한 루프에 빠지지 않을 수 있다!! : 예시) this._price
상속
class의 유산을 내려주는 주요 기능 !
overriding... (면접에서도 자주 출제된다고 함)
class electric extends Car {
constructor (modelName, modelYear, price, chargeTime) {
super (modelName, modelYear, "e", price);
this._chargeTime = chargeTime;
}
get chargeTime () {
return this._chargeTime;
}
set chargeTime (value) {
this._chargeTime = value;
}
}Car를 상속받는 전기차 클래스를 만들었고
충전시간(chargeTime)을 추가해주었다
상속할 때 주의할 점은
부모의 유산을 super();로 명시해줘야 함!
고정값을 표시해 줄 수도 있음 ("e")
그리고
Static Method
정적인 속성으로 인스턴스 호출없이 만들 수 있음
class Calculator {
//contructor 필요없음
static add(a, b) {
return a + b;
}
static subtract(a, b) {
return a - b;
}
}
//인스턴스 만들 필요 없음
console.log(Calculator.add(1, 2)); // 3
console.log(Calculator.subtract(3, 2)); // 1이제 클래스는 안보고 만들 수 있고
게터와 세터도 빠르게 작성하는 연습을 해야겠다
