내일배움캠프 React트랙 23일차 회고 (2022.11.30)

조바심이 들면 공부를 학습의 대상이 아닌 빨리 끝내서 해치워버려야할 대상으로 바라보게된다.

보통 '해야할건 많은데, 진도가 쉽게 나가지 않는 상황'에서 이런 조바심이 난다.

그런상태에서의 학습의 흥미도와 집중도가 매우 떨어지기때문에 공부효율도 엄청 낮아진다.

조금 늦어도 된다. 이해도낮은 상태의 완강보다 이해도높은 70~80%의 강의수강률이 더 도움이 되니까 내일부터는

조바심내지말고 공부에 집중해봐야지.

 

this - 객체내의 속성 접근하기

객체안에서 객체내의 속성(property)에 접근하기위해서는 'this'를 사용한다. 

'this'를 사용하는 방법은 다음과 같다. -> `${this.키이름}`

 

this 사용 예시1

const mac = {
  name: 'commend',
  display: function () {
    console.log(`${this.name}: ⌘`);
  }
};

mac.display(); // commend: ⌘가 출력됨

---

생성자 함수(constructor function)

생성자함수는 객체라는 붕어빵을 찍어내는 객체붕어빵기계의 역할을 한다. 다음의 예시를 보자.

const window = {
  osName: 'window11',
  display: function () {
    console.log(`${this.name}: 🖥`);
  },
};

const mac = {
  osName: 'macOsX',
  display: function () {
    console.log(`${this.name}: 💻`);
  },
};

이렇게 객체의 양식은 같고 내용물만 다른 경우, 일일이 찍어주는 수고를 생성자 함수를 이용해 덜어낼 수 있다.

템플릿을 만들고, 템플릿과 new연산자를 통해 객체를 찍어낼 수 있다.

 

1. 붕어빵 틀을 만드는 단계 

function Os(osName, emoji) {
  this.osName = osName;
  this.emoji = emoji;
  this.display = () => {
    console.log(`${this.osName}: ${this.emoji}`);
 	 };
  return this; 
  // 'return this'는 생략가능-> 작성하지 않아도, 자바스크립트엔진이 return this를 자동으로 뱉어줌
  }

• 1. Os와 같이 생성자함수의 네임 맨 첫글자는 대문자로 한다.
• 2. this.osName을 실행하는 순간 Os라는 객체내에 osName이라는 key가 생기고 받아온 versionName인자를 value에 할당한다.
• 3. 작성하고싶은 key와 value를 모두 작성한 후 'return this'를 적는다. 이때 'return this'는 굳이 작성하지 않아도 자바스크립트엔진이 자동으로 적어주기때문에 생략할 수 있다.
• 4. 개발자는 적어둔 생성자 함수를 이용해 객체를 찍어내면 된다.

 

2. 붕어빵틀을 이용해 붕어빵을 굽는단계

const window = new Os('Window11', '🖥');
const mac = new Os('macOsX', '💻');

 

3. console.log로 붕어빵 잘 구워졌는지  확인하기

console.log(window);
// Os { osName: 'Window11', emoji: '🖥', display: [Function (anonymous)] }
console.log(mac);
// Os { osName: 'macOsX', emoji: '💻', display: [Function (anonymous)] }
console.log(window.osName);	// Window11
console.log(mac.emoji);	// 💻
mac.display();	// macOsX: 💻