2021.01.20

Javascript

www.inflearn.com/course/%ED%95%B5%EC%8B%AC%EA%B0%9C%EB%85%90-javascript-flow/dashboard

 

 

Event 관련

customEvent - event 자체를 생성함

 

event = new CustomEvent(typeArg, customEventInit);

 

typeArg : event이름

customEventInit : Optional/'detail'이라는 field를 가지고 있는 객체

 

 

addEventListener - event가 생기면 할 것 지정(클릭 event가 생성되면 A를한다)

 

EventTarget.addEventListener(typeArg, listener)

 

typeArg : event이름

listener : 실행할 함수

 

dispatchEvent - event를 실행함

 

EventTarget.dispatchEvent(event);

event : event, customEvent도 사용가능

 

dispatchEvent가 실행되면, addEventListener로 등록된 이벤트가 발생해 listener가 실행된다

 

 

참고

https://im-developer.tistory.com/190 [Code Playground]

 

preventDefault

submit같이 기존 이벤트가 있는 경우 event.preventDefault를 사용해야 내가 원하는 이벤트만 실행할 수 있다

 

 

비동기처리와 Promise, then

비동기처리

-특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것

-비동기처리가 일어나지 않으면 모든 요청을 실행하는 데 이전 요청이 완료될 때까지 기다려야 하기 때문에 시간이 오래 걸린다. 비동기처리는 기다리지 않고 다른 것 부터 실행하므로 자바스크립트는 비동기처리 방식으로 실행된다.

.setTimeout()

-코드를 바로 실행하지 않고 설정한 시간만큼 기다린 후 실행한다

-요청1, setTimeout(요청2), 요청3 순서대로 코딩한다면 1-3-2 순서로 실행된다

 

참고

joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

 

 

Promise

-Promise의 세 상태

--Pending(대기) : 호출 당시, 콜백함수 선언가능(resolve, reject)

--Fullfilled(이행) : resolve를 실행하면 이행상태가 됨. .then()을 이용해 처리 결과 값을 받을 수 있다

--Rejected(실패) : reject를 호출하면 실패상태가 됨. .chatch()로 실패한 이유(실패 처리 결과 값)를 받을 수 있다

 

참고

joshua1988.github.io/web-development/javascript/promise-for-beginners/

 

 

Chaining

메서드가 객체를 반환하면, 반환 값인 객체를 통해 또 다른 함수를 호출할 수 있다.

매서드가 return this 일 경우 사용 가능

 

참고

recoveryman.tistory.com/368