221008_TIL

오늘 한 일

• 클래스 필드
• 클래스 get, set 복습
• git blog 게시물 이슈 해결
• 아코디언 메뉴

---

class field

class Fruit {
	name;
	emoji;
	type = '과일';
	constructor(name, emoji) {
		this.name = name;
		this.emoji = emoji;
	}
	display = () => {
		console.log(`${this.name}: ${this.emoji}`);
	};
}
const apple = new Fruit('apple', '🍎');
console.log(apple);

Fruit이라는 클래스에 name,emoji,type 이라는 필드가 있다.

name과 emoji 필드는 생성자 안에서 외부로부터 전달받은 데이터로 할당받은 것이다. type은 클래스가 만들어지자마자 과일로 초기화가 미리 되어있다. 생성자 안에서 외부로부터 전달받은 데이터로 할당된다면 필드에선 생략이 가능하다. (name; 과 emoji; 생략가능) 인스턴스를 만들 때 초기화가 되어야 한다면 constructor 밖에서 설정할 수 있다.

접근제어자 :

Fruit 이라는 객체를 만들었을 때, 한 번 설정한 값은 외부에서 변경 불가능하게 하고 싶을 때 apple.name = 'orange'이런 것을 불가능하게 하고 싶을 때 접근제어자를 사용한다.

접근제어자를 이용해 “캡슐화”를 할 수 있다. 즉, 내부상으로 필요한 데이터를 외부에서 보이지 않도록, 수정할 수 없도록 꽁꽁 캡슐화

다른 프로그래밍 언어에선 아래와 같은 걸 사용하지만, 자바스크립트엔 없다. private - 외부에서 접근이 불가능 public - 외부에서 볼 수 있고 접근이 가능 protected - 외부에서는 볼 수 없지만, 상속된 자식 클래스에서만 접근이 가능

자바스크립트에서 접근제어자를 사용하는 방법 private -> # 을 붙인다. public -> 기본적인 상태라 아무것도 안쓰면 이 상태이다.

// private(#) : 내부에선 사용이 가능하고 외부에선 사용할 수도 접근도 안됨
// private를 사용하는 곳엔 모두 다 #을 붙여야한다.
class Fruit {
  #name;
  #emoji;
  #type = '과일';
  constructor(name, emoji) {
    this.#name = name;
    this.#emoji = emoji;
  }
  #display = () => {
    console.log(`${this.#name}: ${this.#emoji}`);
  };
}
const apple = new Fruit('apple', '🍎');
console.log(apple);

apple.#name = '오렌지'; // 이렇게 해도 수정이 되지 않는다!! name은 현재 private 상태라서

#을 붙인 필드는 외부에서 접근이 불가능하다. 인스턴스 만들어진 걸 출력할 때에도 private 된 것들은 출력되지 않는다. console.log(apple); apple.display(); // 호출되지 않는다. Fruit {}, name, emoji 등 private 된 필드값 출력 x / display 함수도 보이지 x

---

get, set복습 , git blog 이슈해결

get, set 접근자 프로퍼티에 대해 복습했고, 최근 git blog의 글들을 보려고 클릭하면 해당 글이 뜨지 않고 가장 최근에 push한 글이 떠버리는 이슈가 발생했다. post에 넣은 파일명이 같은 부분을 다 다르게 설정해주니까 이슈 없이 잘 작동됐다. 전에는 이름이 중복돼도 이런 문제가 없었는데ㅠㅠ

---

개인 사이트를 만들어 보기 위해 아코디언 메뉴를 공부했다. 제목을 탭하면 아래 내용이 안보이다가 갑자기 나오는 그런 메뉸데 조만간 직접 만들어보고 블로그에도 올릴 계획이다.