[JavaScript 문법] : 'Class' 와 'setter', 'getter' 사용 및 오류해결

 

오늘의 주제

 

class

getter

setter

 

시작 !

class를 이용해 여러 Instance를 생성해내는 예시를 보여주는 사진. (구글 이미지에서 가져왔습니다.)

---

구글링해서 가져온 자전거 사진을 예시로, Class 문법을 이용해 자전거라는 Instance(= 결과물)를 만들어보자.

​

* Class란? : 하나의 자전거를 만들기 위한 '설계도'.

​

자전거 설계도를 도면이라는 '종이'에 그린다면?

프로그램에서는 'constructor'라는 생성자 함수에 값들을 추가해가면서 만듦 !

설계도의 '종이' = Constructor (= 생성자 함수)

이제 그럼 constructor로 자전거를 만들자.

---

1. Class로 뭘 만들지 지정한다.

class Bicycle {}

난 자전거니까 Bicycle !!

---

2. {}안에 이 자전거를 만들기 위한 설계도의 '종이'역할 constructor(= 생성자 함수) 를 넣어준다.

 

class Bicycle {
    constructor () {
        
    }
}

이러면 준비 끝.

---

3. * 필수요소(= Property)

이제 나는 자전거를 만들준비가 끝났는데 자전거에 뭐가 필수적으로 필요한지, '필수요소'를 생각해보자 !!

일단, 굴러갈려면 '바퀴'와 '페달' 그리고, 움직임을 조종하려면 '핸들' 이니까, 일단 이 정도로만 만들어보자

1.바퀴 / 2.페달 / 3.핸들

class Bicycle {
    constructor (tire, pedal, handle) {
        
    }
}

생성자 함수의 필수요소는 보기와 같이 ()안에 ,를 이용해서 구분해서 넣어준다.

class Bicycle {
  constructor(tire, pedal, handle) {
    this.tire = tire;
    this.pedal = pedal;
    this.handle = handle;
  }
}

그리고 들어오는 필수요소들을 각자 다른 자전거에 맞게 넣어주기 위해

'this' 를 이용해서 구분을 해준다.

이러면 필수요소 끝.

---

* this를 달아주는 이유 : this는 j.s(자바스크립트)안에서 굉~~장히 다양한 의미와 용도로 활용되는것 같다.

나도 아직 모든 내용을 알고있진 못하지만,

여기서의 this는 앞에 Bicycle이라는 Instance(내가 만들어낼 결과물)을 지칭한다.

class Bicycle {
  constructor(tire, pedal, handle) {
    this.tire = tire;
    this.pedal = pedal;
    this.handle = handle;
  }
}

let greenBicycle = new Bicycle("금호타이어", "황금빛페달", "가벼운핸들");
let redBicycle = new Bicycle("미쉘린타이어", "겁쟁이페달", "러브핸들");
let blueBicycle = new Bicycle("한국타이어", "달팽이페달", "파울핸들");

console.log("이건 초록 자전거 -> ", greenBicycle);
console.log("이건 빨간 자전거 -> ", redBicycle);
console.log("이건 파란 자전거 -> ", blueBicycle);

* this 설명 :

초록 자전거를 보자,

"금호타이어" 라는 초록자전거의 필수요소는,

위 코드의 'tire' 부분에 들어가서,

this.tire로 지정되고,

this는 여기서 내가 만들 결과물인 Instance를 지칭하고 있으니 !!

저건 Class라는 설계도를 사용해서 새롭게 만든(=new Bicycle) 초록 자전거의 tire다.

​

이런식으로 미쉘린은 또 다른 new Bicycle tire가 되고,

한국타이어도 마찬가지.

​

이렇게 this를 사용해서 지금 들어온 타이어가 어떤 대상의 타이어인지 지칭을 해주어야,

서로 다른 필수요소들을 가진 새로운 객체들을 만들 수 있다.

---

이렇게 console.log()로 각각의 자전거가 잘 만들어지는지 찍어보면,

서로의 자전거가 각자의 필수요소들로 잘 만들어진걸 확인할 수 있다.

---

4. 메서드 (= method)

그림에 보면 메서드에 start() , break() , stop()이 있는걸 알 수 있다.

나는 여기서 break 기능이 제일 시급해 보이니 자전거에 break를 달아주겠다.

class Bicycle {
  constructor(tire, pedal, handle) {
    this.tire = tire;
    this.pedal = pedal;
    this.handle = handle;
  }

  break() {
    console.log("속도가 감소하고 있습니다.");
  }
}

break() 라는 메서드를 우리의 설계도 class 안에 넣어주면서, 자전거가 만들어지면 자동으로 그 자전거는

break() 메서드 라는 속성을 갖고 만들어 지는 것이다.

---

브레이크 기능이 잘 만들어 졌는지 break를 실행(= () )시켜서 확인해보자.

class Bicycle {
  constructor(tire, pedal, handle) {
    this.tire = tire;
    this.pedal = pedal;
    this.handle = handle;
  }

  break() {
    console.log("속도가 감소하고 있습니다.");
  }
}

let greenBicycle = new Bicycle("금호타이어", "황금빛페달", "가벼운핸들");
let redBicycle = new Bicycle("미쉘린타이어", "겁쟁이페달", "러브핸들");
let blueBicycle = new Bicycle("한국타이어", "달팽이페달", "파울핸들");

// console.log("이건 초록 자전거 -> ", greenBicycle);
// console.log("이건 빨간 자전거 -> ", redBicycle);
// console.log("이건 파란 자전거 -> ", blueBicycle);

greenBicycle.break();

잘 만들어 졌다면, "속도가 감소하고있습니다"라는 메시지가 출력이 될 것이다.

잘 실행이 되는것을 확인했다.

---

this를 이용해서 이런것도 할 수 있다.

​

break가 실행 = () 될 때의 내용을 자전거마다 다르게 표현해주고 싶다면,

  break() {
    console.log(this.pedal + " 나가신다 !! 길을 비켜라 !!");
  }

이렇게 만들어준다면, 각자의 페달이름을 외치면서 뒤에 문자열과 함께 출력이 될 것이다.

class Bicycle {
  constructor(tire, pedal, handle) {
    this.tire = tire;
    this.pedal = pedal;
    this.handle = handle;
  }

  break() {
    console.log(this.pedal + " 나가신다 !! 길을 비켜라 !!");
  }
}

let greenBicycle = new Bicycle("금호타이어", "황금빛페달", "가벼운핸들");
let redBicycle = new Bicycle("미쉘린타이어", "겁쟁이페달", "러브핸들");
let blueBicycle = new Bicycle("한국타이어", "달팽이페달", "파울핸들");

// console.log("이건 초록 자전거 -> ", greenBicycle);
// console.log("이건 빨간 자전거 -> ", redBicycle);
// console.log("이건 파란 자전거 -> ", blueBicycle);

greenBicycle.break();
redBicycle.break();
blueBicycle.break();

이런식으로 말이다.

---

* (``)백틱을 이용하는 법

break 메서드의 코드를 ``을 이용해서 다르게 바꿔본다.

  break() {
    console.log(`${this.pedal} 으라라랄 112351 +_+)#$%+#$35`);
  }

이런식으로 ``을 이용하면 안에 왠만한 모든 내용들을 담을 수 있다.

* 그리고 `` 안에서 대상을 지칭할때는 ${}를 써주고 중괄호 안에 지칭할 대상을 넣어주면 된다.

---

추가 코드 해석

let greenBicycle = new Bicycle("금호타이어", "황금빛페달", "가벼운핸들");

위 greenBicycle을 해석하면, class Bicycle이라는 '설계도' 에 근거해서,

타이어는 금호타이어고, 페달은 황금빛페달이고, 핸들은 가벼운 핸들인~

새로운 자전거를 하나 만들어 줘 !! 라는 뜻으로 이해가 가능하다.

---

getter 와 setter

​

이 getter 와 setter 라는 개념이 있는 이유!

​

1. 우리가 class라는 설계도를 통해서 결과물 (= instance)를 만든다.

2. 그 안에는 결과물을 만들기 위한 필수요소들 (= Properties) 이 있다.

3. 하지만, 그 필수요소들의 값이 옳지 못한 요소들로 이루어져 있다면 ??

4. 우리는 그 프로퍼티에 접근하고 검증을 해 줄 필요가 있다.

Ex) pedal이라는 필수요소에 숫자를 넣어준다던지, handle에는 값을 넣지 않는다던지 등등

​

그래서 값을 가져오는 접근 방식인 'getter'와,

값을 세팅해주는 'setter'가 있다 !

​

세팅은 아래와 같이 해준다.

class Bicycle {
  constructor(tire, pedal, handle) {
    this._tire = tire;
    this._pedal = pedal;
    this._handle = handle;
  }

  get tire() {
    return this._tire;
  }

  set tire(value) {
    if (typeof value === "number") {
      console.log(`문자를 입력해주세요 !`);
      return;
    } else if (value.length <= 1) {
      console.log(`정보를 입력해주세요 !`);
      return;
    }
    this._tire = value;
  }
}


let redBicycle = new Bicycle("미쉘린타이어", "겁쟁이페달", "러브핸들");


console.log("이건 초록 자전거 -> ", redBicycle);
redBicycle.tire = 5;
console.log("이건 초록 자전거 -> ", redBicycle);

get은 값을 반환해주는 친구이기 때문에, 항상 return문이 들어간다 !!

set은 들어가는 값의 검증을 필요로 할 때, 주로 사용한다.

​

set은 들어오는 값이 value기 때문에 매개변수 자리에 통상적으로 value를 넣어준다.

위 함수의 set 부분을 해석해보자면

들어온 value의 type이 number 라면 '문자를 입력해주세요'를 찍고 return시킨다.

이런식으로 각각의 필수요소에 들어오는 값의 오류를 검증할 수 있다.

이렇게 setter에 걸려서 값이 다시 return 되어 출력되는것을 확인할 수 있다.

---

RangeError: Maximum call stack size exceeded => 오늘의 오류 !!!!

PC@DESKTOP-TI9SBJL MINGW64 ~/Desktop/sparta/Week_5
$ node 06.js
C:\Users\PC\Desktop\sparta\Week_5\06.js:20
    this.tire = value;
              ^

RangeError: Maximum call stack size exceeded
    at set tire [as tire] ?[90m(C:\Users\PC\Desktop\sparta\Week_5\?[39m06.js:20:15?[90m)?[39m
    at set tire [as tire] ?[90m(C:\Users\PC\Desktop\sparta\Week_5\?[39m06.js:20:15?[90m)?[39m
    at set tire [as tire] ?[90m(C:\Users\PC\Desktop\sparta\Week_5\?[39m06.js:20:15?[90m)?[39m
    at set tire [as tire] ?[90m(C:\Users\PC\Desktop\sparta\Week_5\?[39m06.js:20:15?[90m)?[39m
    at set tire [as tire] ?[90m(C:\Users\PC\Desktop\sparta\Week_5\?[39m06.js:20:15?[90m)?[39m
    at set tire [as tire] ?[90m(C:\Users\PC\Desktop\sparta\Week_5\?[39m06.js:20:15?[90m)?[39m
    at set tire [as tire] ?[90m(C:\Users\PC\Desktop\sparta\Week_5\?[39m06.js:20:15?[90m)?[39m
    at set tire [as tire] ?[90m(C:\Users\PC\Desktop\sparta\Week_5\?[39m06.js:20:15?[90m)?[39m
    at set tire [as tire] ?[90m(C:\Users\PC\Desktop\sparta\Week_5\?[39m06.js:20:15?[90m)?[39m
    at set tire [as tire] ?[90m(C:\Users\PC\Desktop\sparta\Week_5\?[39m06.js:20:15?[90m)?[39m

Node.js v18.16.0

getter 와 setter를 쓸 때, 항상 주의해야 할 부분이 바로 이 오류이다.

---

오류 발생지점 : 06.js 파일의 20번 째 줄

​

오류 문구 : this.tire = value;

---

잘못된 점이 뭘까 ?

​

RangeError: Maximum call stack size exceeded 이 오류를 해석하자면 다음과 같다.

콜스택에 쌓일 수 있는, 값을 처리할 수 있는 사이즈, 범위를 초과했다. 기준치의 한도를 초과했다.

한 마디로 '무한루프'에 빠졌다고 정의한다.

​

위 오류 나오면 === 무한루프

---

그럼 이유는 ?

  set tire(value) {
    if (typeof value === "number") {
      console.log(`문자를 입력해주세요 !`);
      return;
    } else if (value.length <= 1) {
      console.log(`정보를 입력해주세요 !`);
      return;
    }
    this.tire = value;
  }

// 우리가 Class Bicycle로 새로운 자전거를 만들기 위해서

// let redBicycle = new Bicycle("미쉘린타이어", "겁쟁이페달", "러브핸들");
// 이렇게 각각의 tire, pedal, handle에 값을 부여하고,

// 생성자 함수인 constructor에 해당 요소의 값들을 넣어주기 전에~
// setter 역할을 해주는 함수가 있다면 ??

// 위에 보이는 함수로 들어가서 검증과정을 거치게 된다.
// 들어오는 값이 number 형태는 아닌지 ~ 들어온 value의 문자길이가 1보다 작거나 같진 않은지
// 검증을 거치고 들어온 value가 정상이라면, 정상이라는 결과값을 this.tire = value;(= 검증을 마친 값) 정의해 주는데,
// 이렇게 지정이 되면 우리의 this는 instance인 new Bicycle을 가리키기 때문에,
// 또 다시 입력된 tire값의 검증을 거치러 위와 같은 과정을 반복하게 된다.

// 그렇게 1번,2번,3번,4번 .......... n번 '무한루프'에 빠지게 되고,
// 그렇기 때문에 call stack 에는 처리해야 하는 정보들이 계속해서 쌓이게 되면서
// 최대치, 한계 범위를 초과하게 되는 것이다.

// 그러면서 나오게 된 Error 메시지가 
RangeError: Maximum call stack size exceeded
// 이다.

---

RangeError: Maximum call stack size exceeded 오류 해결 방법

​

this에 접근하는 모든 property(= 필수요소)의 이름앞에는 항상 _(언더스코어)를 붙인다.

​

이유 :

​

_(언더스코어) 는 프로그램의 세계에서 private라는 의미를 많이 가진다고 한다.

뜻은 은밀하고, 무언가를 감 출 때~! 그럴 때 _를 통해서 분리를 시켜줄 수 있다.

​

this가 우리가 새로만들 instance 내에서만 의미를 가질 수 있게 _(언더스코어)를 통해서 분리를 해줘야 한다.

그래야 지금과 같은 오류가 해결이 된다.

(this 에 접근하는 모든 properties 앞에는 전부 _를 붙여줘야 한다.)

---

오늘의 완성 코드.

class Bicycle {
  constructor(tire, pedal, handle) {
    this._tire = tire;
    this._pedal = pedal;
    this._handle = handle;
  }

  get tire() {
    return this._tire;
  }

  set tire(value) {
    if (typeof value === "number") {
      console.log(`문자를 입력해주세요 !`);
      return;
    } else if (value.length <= 1) {
      console.log(`정보를 입력해주세요 !`);
      return;
    }
    this._tire = value;
  }

  break() {
    console.log(`${this.pedal} 으라라랄 112351 +_+)#$%+#$35`);
  }

  //   break() {
  //     console.log(this.pedal + " 나가신다 !! 길을 비켜라 !!");
  //   }
}

let greenBicycle = new Bicycle("금호타이어", "황금빛페달", "가벼운핸들");
let redBicycle = new Bicycle("미쉘린타이어", "겁쟁이페달", "러브핸들");
let blueBicycle = new Bicycle("한국타이어", "달팽이페달", "파울핸들");

console.log("이건 초록 자전거 -> ", greenBicycle);
console.log("이건 빨간 자전거 -> ", redBicycle);
console.log("이건 파란 자전거 -> ", blueBicycle);

greenBicycle.break();
redBicycle.break();
blueBicycle.break();

redBicycle.tire = "세상은 하나";
console.log("이건 빨간 자전거 -> ", redBicycle);

이렇게 class의 사용법과 그 안에서 property 에 접근하고, 세팅하고, 검증해주는 getter 와 setter 에 대해 알아봤다.

​

this는 이 밖에도 굉장히 많은 역할들이 있어서, 그 부분을 조금 더 명확히 파고 들어 보아야 겠고,

_언더스코어도 정확히 어떤식으로 분리를 시켜주는 건지 원리가 있다면 좀 더 확인해보고 싶다.

---

시 : class를 사용해 자전거 만들기 (getter 와 setter 사용).

문 : RangeError: Maximum call stack size exceeded

해 : 언더스코어(_)를 이용해 property를 분리.

알 : class의 개념 및 흐름 이해, 무한루프, getter setter, 언더스코어의 기능, this 와의 친밀감 상승

        ``(백틱)의 자유로운 활용도

 

#시문해알 #javascript #class #getter #setter #`` #백틱 #this #무한루프 #RangeError

#Maximum_call_stack_size_exceeded #오류 #오류해결 #문법