DAY19

Intro

어제 이야기를 들은대로 올인원패키지 강의를 최대한 빠르게 한바퀴 돌리는 것도 조금 더 의식하며 공부를 해봐야겠다.

공부 목표

• 클래스 문법
• 스타벅스 사이트 ing
• css grid-items속성들 정리하기 grid-items
• bouce, throttle 공부
• Typescript타입공부
• 프로젝트로 배우는 JS 이미지 슬라이더

오늘 배운 내용 정리

• 자바스크립트의 this

  • 함수에서의 this는 전역공간(global), 객체 메소드에서의 this는 호출되는 대상의 객체.
  • 객체 안에 함수가 할당되었다고 해서 무조건 메서드가 아니다. 객체의 메서드로서 호출할 경우에만 메서드로 동작하고 그렇지 않은 경우에는 함수로서 동작.
  • 내장함수가 메서드로 쓰였는지를 구분하는 방법 (함수명 앞에 .이 있는가?)
  • ES6부터 함수를 어떻게 호출했는지는 상관 하지 않고 this값을 설정할 수 있는 bind메소드를 도입
  • var의 경우 선언과 동시에 전역객체의 프로퍼티에 저장을 해버린다. 또한 삭제도 불가하기 때문에 var보다는 const,let을 사용하는 것을 권장한다.

• Constructor, prototype, instance의 관계

  • 모든 함수는 생성자가 될 수 있고, 모든 함수는 prototype 프로프티를 가지고 있습니다.
  • __proto__는 생성자 함수의 prototype프로퍼티를 참조합니다.
  • 생성자를 이용해 만든 객체는 자동으로 그 함수에 객체인 prototype 프로프티가 부여됩니다.
  • 자동으로 생성된 인스턴스의 __proto__는 생성자 함수의 prototype프로퍼티를 참조하게 됩니다.
  • __proto__ 프로퍼티는 생략 가능하도록 구현돼 있기 때문에 생성자 함수의 prototype에 어떤 메서드나 프로퍼티가 있다면 인스턴스에서도 마치 자신의 것처럼 해당 메서드나 프로퍼티에 접근할 수 있게 됩니다.

• 클래스와 인스턴스

  • prototype을 사용해서 new라는 키워드와 함께 생성자함수로 인스턴스를 만들어내는 개념.

• 구현할 요소들이 모두 .carousel태그 안에 들어있기 때문에 클래스로 구현하는 것이 좋다.

추가공부필요

• 실행컨텍스트란?

반복되는 문제

• npm i 실행 시 gyp ERR! ~ pythone
  • 해결방법

내일공부고민

• 캐러셀 리팩토링
• 자바스크립트 문법 추가 공부
• CSS 속성 마무리.

하루를 마무리하며

과제를 진행하며 JS기본기에 대해 부족했던 것을 안만큼 다시 하나씩 공부를 하고 있다. 그런데 확실히 처음 강의를 듣고 정리를 했을 때보다 이해되는 내용도 많고 강의 중 중간에 찾아보고 정리하는 부분도 많아지는 것 같다.

무엇보다 이전에 정리를 해놓았던 내용들을 다시 확인보니, 정말 정리가 잘되어있다,,😅이해가 안되는만큼 무작정 다 받아적었는데 정리된 내용을 다시 읽어보고 정리하는 것만으로도 정말 큰 공부가 되는 것 같다.

또한 클래스 문법과 프로토타입을 다시 공부하고 자바스크립트 예제만들기를 해보니, 확실히 재밌고 흥미롭게 진행을 하게 되는 것 같다. 아자아자🤗

클래스를 이용한 함수 구현 Github