항해99 👩‍💻29일차 TIL

🎉오늘의 한 일🎉

1. 개인과제 테스트코드를 분석하였다.

2. MDN에서 자바스크립트 Class 개념을 찾아보고 공부하였다.  

3. blog에서 로그인되지 않은 회원이 권한이 없는 페이지로 이동하는 버튼을 클릭시 "로그인이 필요합니다" 라는 alert을 띄우고 접근을 막는 기능을 구현하였다. 처음엔 페이지까지는 접근이 가능했고 해당 기능을 실행시키는 버튼을 클릭시 alert을 띄웠는데, 이렇게 애초에 해당 페이지로 들어가지 못하도록 막아버리는 게 더 나은 방법인 것 같다. 

🐣배운 점🐣

Class

Class는 객체를 생성하기 위한 템플릿이다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화한다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES6의 클래스 의미와는 다른 문법과 의미를 가진다.

Class 정의

Class는 사실 "특별한 함수"이다. 함수를 함수 표현식와 함수 선언으로 정의할수 있듯이 class문법도 class표현식과 class선언 두 가지 방법을 제공한다.

Class 선언

Class를 정의하는 한 가지 방법은 class선언을 이용하는 것이다. class를 선언하기 위해서는 클래스의 이름과 함께 class키워드를 사용해야한다.

class Rectangle  {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Hoisting

함수 선언과 클래스 선언의 중요한 차이점은 함수의 경우 정의하기 전에 호출할 수 있지만, 클래스는 반드시 정의한 뒤에 사용할 수 있다는 것이다. 예외가 발생하는 이유는 클래스가 호이스팅이 될 때 초기화는 되지 않기 때문이다. 

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Class 표현식

Class 표현식은 class를 정의하는 또 다른 방법이다. Class표현식은 이름을 가질 수도 있고, 갖지 않을 수도 있다. 이름을 가진 class 표현식의 이름은 클래스의 body의 local scope에 한해 유효하다. (하지만, 클래스의 (인스턴스 이름이 아닌) name 속성을 통해 찾을 수 있다).

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 출력: "Rectangle"

// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 출력: "Rectangle2"

 

Class body와 메서드 정의 

Class body는 중괄호 {} 로 묶여 있는 안쪽 부분이다. 이곳에서 메서드나 constructor와 같은 class를 멤버를 정의한다.

 

Strict mode

클래스의 본문(body)는 stric mode에서 실행된다. 즉, 여기에 적힌 코드는 성능 향상을 위해 더 엄격한 문법이 적용된다. 

constructor(생성자)

constructor 메서드는 class로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드이다. "constructor"라는 이름을 가진 특수한 메서드는 클래스 안에서 한 개만 존재할 수 있다. 만약 클래스의 여러 개의 constructor메서드가 존재한다면 SyntaxError가 발행할 것이다. 

 

프로토타입 메서드 

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // 메서드
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

 

메서드 정의 

ECMAScript 2015를 시작으로, 객체 초기자에 메서드 정의를 위한 더 짧은 구문이 도입되었다. 이는 메서드 명에 할당된 함수를 위한 단축이다.

var obj = {
  foo: function() {},
  bar: function() {}
};

이러한 코드를 아래와 같이 줄일 수 있다.

var obj = {
  foo() {},
  bar() {}
};

 

extends를 통한 클래스 상속(sub classing)

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // super class 생성자를 호출하여 name 매개변수 전달
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

 

subclass에 constructor가 있다면. "this"를 사용하기 전에 가장 먼저 super()를 호출해야 한다. 

 

super를 통한 상위 클래스 호출

super 키워드는 객체의 부모가 가지고 있는 메서드를 호출하기 위해 사용된다. 이는 프로토타입 기반 상속보다 좋은 점 중 하나이다.

class Cat {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(`${this.name} roars.`);
  }
}

let l = new Lion('Fuzzy');
l.speak();
// Fuzzy makes a noise.
// Fuzzy roars.

 

클래스 재정의

클래스는 재정의 될 수 없다. 재정의를 시도하면 SyntaxError가 발생한다.