async & await 자바스크립트의 비동기 처리 패턴 중 ES7에 나온 최근 문법 기존의 비동기 처리방식인 콜백함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은(동기함수처럼 읽고쓰기) 코드를 작성하게 도와준다. > 동기함수처럼 아래로 차례대로 읽히는 방식의 코드를 구성하는 것이 async, await 문법의 목적 기본 문법 함수의 앞에 async라는 예약어가 붙음 2 함수의 내부 로직중 HTTP 통신을 하는 비동기 처리 코드 앞에 await을 붙힌다. > 주의할 점: 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작됨 일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios등 프로미스를 반환하는 API 호출이다. 예제 async & await 문법이 가장 빛을 발하는 순간은 여러 비동기 처리 코드를 작업할 때! 예외처리 async & await 에서 예외를 처리하는 방법은 `try &

이벤트 위임(Event delegation) 특정 노드에 일일이 이벤트 리스너를 추가하는 대신, 이벤트 리스너를 특정 노드들을 포함하는 상위 노드에 연결하여 이벤트를 전파하는 것을 이벤트 위임이라고 한다. 위임된 이벤트는 포함된 하위 노드에 전파된다. 이벤트가 전파되는 방식의 기본값은 버블링(아래에서 위로) 이벤트 위임이 필요한 이유 하위 노드들이 실시간으로 추가 또는 제거 될 때마다 이벤트 리스너를 매번 연결하거나 제거해야한다. 💩 이벤트 위임을 사용할수 있기에 새로운 노드가 추가, 제거 또는 업데이트 되어도 별도로 이벤트 리스너를 연결하거나 제거하지 않아도 된다.

Module이란..? > 한 파일안의 작성되어진 코드 웹 애플리케이션을 구성하는 기능들을 분할한 단위 코드를 그 파일 내부로 한정하여 전역적으로 등록되어지는 것을 막고 충돌을 방지 서로 다른 파일에서 각 파일의 코드에 접근이 불가하므로 제공하고자 하는 모듈에서 export, 사용하고자 하는 모듈에서 import를 하면 된다. 파일들간의 중복적으로 발생할 수 있는 이름 충돌을 방지 모듈간의 재사용성도 높여준다. Export & Import export 파일 안에서 정의된 이름으로 import 해야 한다. import할때 {} 안의 동일한 이름으로 가져와야 한다. as를 이용하면 다른 이름으로 변경해서 호출 가능 export 되는 모든 것들을 받아오고 싶다면 * 사용 export default import에서 사용하고자 하는 이름을 정의해서 사용 가능하다. 한 파일안에서 `export

This this는 현재 실행되는 코드의 실행 컨텍스트를 가리킨다. 실행 컨텍스트 자바스크립트 코드가 실행되는 환경 모든 javascript 코드는 실행 컨텍스트 내부에서 실행된다. 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념 종류: 전역 실행컨텍스트, 함수 실행컨텍스트 Javascript This 다른 객체지향 언어의 this와 성격이 다르다 this는 함수 자신이나 함수의 렉시컬 스코프를 가리키는 레퍼런스가 아니라는 점을 분명히 인지 호출한 문맥에 따라서 this가 동적으로 변경된다. 자바스크립트의 this란 자기자신을 가리키는것이 아닌 함수 호출 시점에 바인딩되며 무엇을 가리킬지는 전적으로 함수를 호출한 코드에 달려있다. 변수는 글로벌 객체안에 등록이 되지 않는다. 자바스크립트에서 함수를 정의하면 기본적으로 정의된 함수는 global(window)에 등록되 접근이 가능하다. let과 c

프로토타입(Prototype)이란..? > 프로토타입은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다. 자신을 만들어낸 객체의 원형 자바스크립트는 프로토타입 기반으로 상속을 구현하여 불필요한 중복을 제거 생성자 함수가 생성한 모든 인스턴스가 공통적으로 사용한 프로퍼티나 메소드를 프로토타입에 미리 구현해 놓음으로써 또 구현하는 것이 아닌 상위 객체인 프로토타입의 자산을 공유하여 사용하는 것 Prototype Chain 객체의 프로퍼티에 접근하려고 할 때 객체에 접근하려는 프로퍼티가 없으면 접근자 프로퍼티가 가리키는 링크를 따라 상위 프로토타입의 프로퍼티를 순차적으로 검색하는 것 Class (프로토타입의 연쇄작용) 자바스크립트에서 class는 디자인 패턴의 일종 (다른 언어들과 의미가 다름) 자바스크립트 class는 복사를 의미 (프로토타입의 연쇄작용) 인스턴스화하면 class -> instance로 복사