JSFiddle - React, Tailwind, and code Playground

by nagaeso

HTML

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
  <div>
    <p class="result-message"></p>
  </div>
</body>

</html>

JavaScript

class MiddleSchooler {
  // 객체 정의
  constructor(name, grade) {
    this.name = name;
    this.grade = grade;
  }

  // getter
  get grade() {
    return this._grade;
  }

  // setter
  set grade(value) {
    this._grade = value <= 0 || value > 3 ? '학년을 확인해주세요.' : value;
  }
}

// 객체 생성
const middleSchool = new MiddleSchooler('John', 4);

// 결과
document.querySelector('.result-message').innerHTML = middleSchool.grade;
console.log(middleSchool.grade);