[TIL] 2022-03-15

1. Coding Test

• 백준 문제풀기 (그리디[15/50] → 탐색[12/50] → 동적프로그래밍[12/50])

  • [그리디 14번 문제] : #16953, Silver 1, A -> B 😃복습-성공

  • [그리디 15번 문제] : #4596, Silver 5, 캠핑 😓진도-실패

---

2. Live Academy

• ⚡️영어 Tip | "언제" & "얼마나 오래" - 질문에 쉽고 자연스럽게 대답하는 요령 🔗복습

• 💬"내가 걔한테 좀 심했나?" , "~하려고 했던 것 뿐인데" , "부모로서(형으로서) 잘 하다" , "내가 한 말 가지고 서운해 하더라" 🔗진도

---

3. TypeScript

• TypeScript 환경에서 Redux를 프로처럼 사용하기 🔗진도

  • as const는 const assertions라는 TypeScript 문법입니다. 이 문법을 사용하면 우리가 추후 액션 생성함수를 통해 액션 객체를 만들게 됐을 때 type의 TypeScript 타입이 string이 되지 않고 실제값을 가르키게 됩니다.

---

4. Resume & Interview

• 끊임없이 배우고싶은 ENTJ 개발자 🔗

• 면접 기출 문제 by Woong-il

☑️ this

• 함수를 선언할때 this 사용 가능, 다만, 함수가 호출되기 전까지 this엔 값이 할당되지 않는다.

• 자바스크립트에서 this는 런타임에 결정됩니다. 메서드가 어디서 생성되었는지에 상관없이 this는 ‘점 앞의’ 객체가 무엇인가에 따라 ‘자유롭게’ 결정됩니다.

  • 장점: 함수(메서드)를 하나만 만들어 여러 객체에서 재사용 가능
  • 단점: 유연함, 자유로움이 실수로 이어지기 쉽다

• 메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있습니다.

• 엄격 모드가 아닐 때는 this가 전역 객체를 참조한다. 브라우저 환경에서는 window라는 전역 객체를 참조한다.

• new 바인딩 🔗

  1. 새 객체가 만들어짐

  2. 새로 생성된 객체의 Prototype 체인이 호출 함수의 프로토타입과 연결됨

  3. 1. 에서 생성된 객체를 this context 객체로 사용(명시적으로)하여 함수가 실행됨

  4. 이 함수가 객체를 반환하지 않는 한에서 1에서 생성된 객체가 반환됨

• 이벤트 리스너 안에서 this 사용
  https://codesandbox.io/s/prod-worker-ezdfle?file=/index.html:0-196

  function App() {
    this.plus = document.querySelector(".plus");
  
    // 화살표 함수로 this(App을 전달)
    this.plus.addEventListener("click", () => this.useBind());
  
    this.useBind = () => {
      setTimeout(() => {
        this.show();
      }, 500);
    };
  
    this.show = () => console.log(this); 
    //App {plus: HTMLButtonElement, useBind: ƒ (), show: ƒ (), constructor: Object}
  }
  
  new App();

---

⏱ Total study time - 7 hours 20 minutes