[230420] class | 최적화

🪄 class

class 상속
extends 키워드 사용

상속을 받는 클래스는 ‘서브 클래스’(subclass) 혹은 ‘파생 클래스’(derived class) 라고 부른다.

부모 클래스의 프로퍼티를 상속받기 위해 super 함수를 사용한다. 이때 super는 부모 생성자(constructor)를 참조한다.

super 함수 사용시 주의할 점

• 만약 서브 클래스에 생성자 함수를 사용하고 싶다면 반드시 생성자 함수 안에서 super 함수를 사용해야 한다.
• 서브 클래스에 생성자 함수가 없다면 super 함수가 자동으로 호출되어 부모 클래스의 프로퍼티를 상속받게 한다.
• 생성자 함수에서 this 값을 사용할 경우 super 함수는 반드시 this보다 먼저 실행되어야 한다.
• 서브 클래스가 아닌 클래스에서 사용하면 에러가 발생한다.

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

  sayYourName() {
    console.log(`삐리비리. 제 이름은 ${this.name}입니다.`);
  }
}

class BabyRobot extends Robot {
  constructor(name) {
    super(name);
    this.ownName = '또봇';
  }

  sayBabyName() {
	// 상속을 받게되면 부모 클래스의 메소드를 사용할 수 있다. this로 접근 할 수 있다.
    this.sayYourName();
    console.log('Suceeding you, Father!');
  }
}

부모 클래스의 메서드와 동일한 이름의 메서드를 선언하여 덮어쓰는 오버라이딩이 가능하다

비공개 프로퍼티
class를 통해 인스턴스를 만들었을 때 보통 아무런 제약없이 인스턴스의 프로퍼티에 접근하거나 수정하는 것이 가능하다. 하지만 중요한 데이터를 조심스럽게 다뤄야 할 경우, 이런 데이터를 외부에서 함부로 수정할 수 없게 만들고 싶을 때 비공개 프로퍼티로 데이터를 변경할 수 있다.

# 키워드를 이용하면 프로퍼티를 비공개로 전환할 수 있다.

class Robot {
  #password

  constructor(name, pw) {
    this.name = name;
    this.#password = pw;
  }

  sayYourName() {
    console.log(`삐리비리. 제 이름은 ${this.name}입니다.`);
  }

  getPassword() {
    return this.#password;
  }

  setPassword(pw) {
    this.#password = pw;
  }
}

const robot = new Robot("윤말랑", "0522");

console.log(robot.password);		// undefined
console.log(robot.#password);		// Uncaught SyntaxError: Private field '#password' must be declared in an enclosing class
console.log(robot.getPassword());	// 0522
robot.setPassword("1234");
console.log(robot.getPassword());	// 1234

비공개 프로퍼티의 값을 불러오는 메서드를 getter 메서드, 값을 수정하는 메서드를 setter 메서드로 부른다.

get, set 키워드를 이용해 코드를 좀 더 단순화할 수 있다.

class Robot {
  ⋮
  
  get password() {
    return this.#password;
  }

  set password(pw) {
    this.#password = pw;
  }
}

const bot = new Robot("윤말랑", "0522");

bot.password = 1234;
console.log(bot.password);	// 1234

get과 set 키워드를 사용하면 마치 객체의 프로퍼티에 접근하듯 값을 다룰수 있게 된다.
하지만 이렇게 비공개 프로퍼티에 접근하기 위해 사용한다면 비공개의 의미가 사라져 버리게 된다. 주의!

💡 get과 set 키워드 사용시 주의할 점
해당 코드를 직접 작성하지 않은 협업자들에게는 오해를 일으킬 소지가 있다. get, set 안에 어떤 로직이 들어있는지 파악하지 못하고 단순히 객체의 프로퍼티를 수정한다는 착각을 일으킬 수 있기 때문이다. 때문에 협업 시에는 주석이나, 가이드 문서를 만들어 충분한 정보를 제공해주는것이 좋다.

Q. 사용자정의 타입으로는 어떻게 비공개 프로퍼티를 만들 수 있을까?!
A. 클로저

function PersonGenerator() {
  let age = 25;

  function InnerPersonType() {}

  InnerPersonType.prototype.getAge = function () {
    return age;
  };

  return InnerPersonType;
}

const Person = PersonGenerator();
const myPerson = new Person();
myPerson.getAge(); // 25

A. IIFE(Immediately Invoked Function Expression, 즉시실행함수)

const PersonGenerator2 = (function () {
  let age = 25;

  function InnerPersonType() {}

  InnerPersonType.prototype.getAge = function () {
    return age;
  };

  return InnerPersonType;
})();

const myPerson2 = new PersonGenerator2();
myPerson2.getAge(); // 25

💻 Todolist 만들어보기 실습
https://github.com/yoonmallang22/JavaScript/blob/main/practice/todolist.html

🪄 최적화

💡 면접 문제로 많이 나옴!!!

Make it work, Make it right, Make it fast

성능 측정의 척도

• 시간

초기 구동 시간

Pinterest는 인지된 대기 시간을 40% 줄였으며 검색 엔진 트래픽과 가입 수를 15% 늘렸습니다.

1. 다운로드해야 하는 파일의 개수와 용량은 작게 유지한다.

• 이미지 스프라이트 기법을 적극적으로 사용한다.
• 가능한 최신 포맷의 이미지를 사용한다.
• 이미지 용량 최적화 툴을 활용한다.
• 최적화된 폰트를 사용한다. 사용하려는 폰트의 용량을 체크해보고 가능한 최신 포맷의 폰트를 사용한다.
  • WOFF 권장
• 폰트의 사용빈도가 낮다면 이미지 폰트를 사용한다.

@font-face{
	font-family:'Nanum Gothic';
    src:url(NanumGothic.woff) format('woff');
    src:url(NanumGothic.woff2) format('woff2'); 
}
/* format('') 값을 명시적으로 작성하면 
이 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있다 */

2. 최소화한(minify) CSS, JS 파일 사용하여 파일의 용량을 줄인다.
3. 라이브러리, 프레임워크는 필요한 것만 사용한다.

• ex. 네이버: 같은 제이쿼리 여러 개 사용 중

4. 중요하지 않은 컨텐츠라면 레이지 로딩을 고려해볼 필요가 있다.

   <img src="image.jpg" alt="..." loading="lazy">
   <iframe src="video-player.html" title="..." loading="lazy"></iframe>

5. 지속적으로 구동시간을 측정한다.

• 크롬 개발자도구 네트워크 탭, 라이트하우스 탭
• https://pagespeed.web.dev/

계산 시간
효율적이고 빠르게 계산을 수행하도록 코드를 작성한다.
알고리즘의 영역

반응 시간
사용자의 행동에 얼마나 빠르게 반응하는가?

1. JS보다는 CSS 애니메이션을 활용한다.
   JS로 스타일을 수정해도 결국 CSS 속성으로 업데이트된다.

2. transform 속성을 사용한다.
   repaint, reflow를 모두 발생시키지 않고 합성만 발생시킨다.

3. repaint, reflow를 발생하는 속성은 되도록 사용하지 않는다.

• csstriggers : css 속성별 reflow & repaint 에 대한 정보 참고

4. requestAnimationFrame을 사용한다.
   브라우저가 애니메이션을 최적화하도록 하고, 비활성 탭에서는 애니메이션이 동작하지 않도록 한다.
   브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 한다.