[하루 30분 모던 자바스크립트 딥 다이브] 이벤트 핸들러 등록 방식

이번 포스팅에서 이벤트 핸들러 등록 방식에 대해 알아봅시다 🤔이벤트 핸들러 어트리뷰트 방식 HTML요소의 어트리뷰트 중에는 이벤트에 대응하는 이벤트 핸들러 어트리뷰트가 있습니다. 이벤트 핸들러 어트리뷰트 값으로 함수 호출문 등의 문을 할당하면 이벤트 핸들러가 등록됩니다. Click! 주의할 점은 함수 참조가 아닌 함수 호출문 등의 “문”(statement)를 할당한다는 것이다. 이 방식은 더 이상 사용하지 않는 것이 좋다. html과 js의 관심사가 다르므로 혼재하는 것 보다는 분리하는 것이 좋다. 하지만 CBD(Component Based Development) 방식의 라이브러리는 이벤트 핸들러 어트리뷰트 방식으로 이벤트를 처리한다. Click Click Click Click 🤔이벤트 핸들러 프로퍼티 ..

• format_list_bulleted 개발관련/하루 30분 모딥다
• · 2023. 8. 30.
• textsms

[하루 30분 모던 자바스크립트 딥 다이브] 상속에 의한 클래스 확장

🤔클래스 상속과 생성자 함수 상속 이 개념은 프로토타입 체인과는 다른 개념이다. 기존 클래스를 상속받아 새로운 클래스를 확장하는 것! 생성자 함수는 의사 클래스 상속 패턴을 사용하여 확장을 흉내 낼 순 있지만, 문법이 있지는 않다. 클래스는 extends 키워드가 제공된다. 클래스의 등장으로 의사 클래스 상속 패턴(모딥다 451p)은 더 이상 사용하지 않는다. 🤨extends 키워드 extends 키워드를 사용하여 상속받을 클래스를 정의할 수 있다 class super {} class sub extends super{} //상속을 통한 확장 extends 키워드의 역할은 수퍼클래스와 서브클래스 간의 상속 관계를 설정하는 것이다 클래스도 프로토타입을 통해 상속 관계를 구현한다. 🤔동적 상속? extends..

• format_list_bulleted 개발관련/하루 30분 모딥다
• · 2023. 7. 26.
• textsms

[하루 30분 모던 자바스크립트 딥 다이브] 클래스 2

🤔클래스의 인스턴스 생성과정 new 연산자와 함께 클래스를 호출하면 생성자 함수와 마찬가지로 [[Construct]]가 호출된다. 인스턴스 생성과 this 바인딩 constructor 코드가 실행되기 앞서 빈 객체가 생성된다. 이 객체가 인스턴스이다. 인스턴스의 프로토타입으로 클래스의 prototype이 설정된다. 인스턴스에 this가 바인딩된다. 인스턴스 초기화 constructor가 인수로 받은 초기화 값을 인스턴스 프로퍼티 값으로 초기화 한다. constructor가 생략되었다면, 이 과정 역시 생략된다. 인스턴스 반환 암묵적으로 this가 반환된다. 🤨클래스의 프로퍼티 인스턴스 프로퍼티 constructor 내부에서 정의한다 접근 제한자 없이는 항상 public값으로 가진다. 접근자 프로퍼티 자체..

• format_list_bulleted 개발관련/하루 30분 모딥다
• · 2023. 7. 25.
• textsms

[하루 30분 모던 자바스크립트 딥 다이브] 클래스

🤔클래스와 생성자 함수 JS는 프로토타입기반 객체지향 언어. 클래스가 필요없는 객체지향 언어이다. JS는 클래스 말고 생성자 함수를 이용하여 객체를 생성하고, 프로토타입을 통해 상속 구현이 가능하다. 하지만 클래스 기반 언어에 익숙한 프로그래머들의 장벽으로 EX6클래스가 도입되었다. 클래스와 생성자함수가 모두 인스턴스를 제공하지만, 동일하게 작동하지는 않는다 생성자 함수와 다른 클래스의 특징? 클래스는 new연산자 없이 사용한다. 상속을 지원하는 extend, super 키워드를 제공한다. 클래스는 함수 객체이지만, 변수 호이스팅과 같이 클래스 정의 이전에는 참조할 수 없다. (TDZ에도 빠질 수 있다). 클래스는 암묵적으로 strict mode를 사용한다. 메서드 모두 [[Enumerable]]값이 f..

• format_list_bulleted 개발관련/하루 30분 모딥다
• · 2023. 7. 24.
• textsms

하루 30분 모던 자바스크립트 딥 다이브 실행 컨텍스트 2

실행 컨텍스트의 생성과 식별자 검색 과정 전역 객체 생성 평가 이전에 생성되며, 빌트인 전역 프로퍼티, 빌트인 전역 함수, 표준 빌트인 객체가 추가되며 클라이언트 사이드 Web API또는 특정 환경을 위한 호스트 객체가 추가된다. 전역객체도 Object.prototype을 상속받는 프로토타입 체인의 일원이다. 전역 코드 평가 전역 실행 컨텍스트 생성 실행 컨텍스트에 푸시한다. 전역 렉시컬 환경 생성 전역 렉시컬 환경을 생성하고, 전역 실행 컨텍스트에 바인딩 한다. 렉시컬 환경은 환경 레코드와 외부 렉시컬 환경에 대한 참조로 구성된다. 객체 환경 레코드와 선언적 환경 레코드로 구성되어 있다. 객체 환경 레코드 생성 객체 환경 레코드는 var로 선언한 전역 번수, 함수 선언문으로 정의한 전역 함수, 빌트인 ..

• format_list_bulleted 개발관련/하루 30분 모딥다
• · 2023. 7. 6.
• textsms

하루 30분 모던 자바스크립트 딥 다이브 실행 컨텍스트 1

ECMAScript 사양은 소스코드를 전역코드, 함수코드, eval코드, 모듈코드로 구분한다. 소스코드의 평가와 실행 모든 소스코드는 실행에 앞서 평가 과정을 거치며, 코드를 실행하기 위한 준비를 한다. 즉 “소스코드의 평가”와 “소스 코드의 실행” 과정으로 나누어 실행한다. 소스 코드 평가과정에서는 실행 컨텍스트를 생성하고 선언문을 실행하여 실행 컨텍스트가 관리하는 스코프에 등록한다. 실행 컨텍스트의 역할 전역 코드 평가 선언문 실행, 스코프에 등록. 전역 코드 실행 런타임 시작. 전역 변수에 값이 할당되고 함수가 호출된다. 함수 코드 평가 매개 변수와 선언문 마찬가지로 먼저 실행. 함수 코드에서는 arguments객체도 지역 스코프에 등록된다, this 바인딩 결정 함수 코드 실행 런타임 시작. 매개..

• format_list_bulleted 개발관련/하루 30분 모딥다
• · 2023. 7. 5.
• textsms