36+DAY_멋사 프론트엔드 부트캠프 14기_TIL

What I Learned Today

• JS에서 이벤트는 어떤 일이 발생했음을 알려준다.
  • 사용자가 무언가를 클릭(click)하면 클릭 이벤트가 발생
  • 사용자가 키보드의 키(key)를 누르면 키보드 이벤트가 발생
  • 이 외에도 다양한 이벤트가 있다.
• 이벤트를 수신하려면 이벤트 리스너가 필요하다.
  • 요소에 발생한 이벤트를 수신하기 위해 리스너를 추가할 수 있다.

element.addEventListener('type', () => {})

// type은 이벤트의 타입을 말한다.
// () => {} 함수는 이벤트가 발생할 때 마다 호출된다.

 

• 클릭 이벤트

<button type="button" class="clickable">클릭 가능한 버튼 요소</button>

저런 마크업이 있다고 가정해보자. 버튼을 클릭하면 인터렉션이 동작하도록 하고싶다면

const button = document.querySelector('button.clickable')

button.addEventListener('click', () => {
  console.log('클릭 가능한 버튼 요소를 눌렀습니다.')
})

이런식으로 전에 설명했던 쿼리 셀렉터로 요소를 찾아 변수에 저장하고 이벤트 리스너를 통해 연결해준다.

그러면 사용자가 클릭을 할 때마다 console.log가 출력될 것이다.

 

특정 요소가 이벤트가 있는지 확인하고 싶을 때에는 이 코드를 사용하면 된다.

getEventListeners(button)

 

• 레거시 이벤트 모델 : "옛날 방식" 또는 "이전 버전의 이벤트 모델" 이라는 뜻이다.
  • 웹 초창기에는 .addEventListener() 메서드를 지원하지 않았다.
  • 당시엔 HTML 태그에 직접 onclick 속성을 추가하고 함수 실행 구문을 문자열 값으로 설정했다.

<button type="button" onclick="handleClick()">알림</button>

function handleClick() {
	alert('버튼이 클릭됐어요!')
}

이런 방식으로 사용했다.

 

• 콜백 : 나중에 실행되기 위해 다른 함수에 인수로 전달되는 함수를 말한다.

// 콜백이 자주 사용되는 예 - 이벤트 리스너
element.addEventListener('mouseenter', function() {})
element.addEventListener('click', () => {})

// 이벤트 리스너는 변수에 참조된 함수로 설정할 수도 있다.
function callback() {
  console.log('콜백은 "다른 함수에 인수로 전달된 함수"를 말합니다.')
}

element.addEventListener('click', callback)

 

• 콜백을 사용하는 이유
  • 유연하게 코드를 추가할 수 있다.
    
    • 동일한 요소에 같은 메서드를 사용할 때 원하는 기능을 가진 서로 다른 함수를 손쉽게 설정할 수 있다.
  • 비동기 코드 작업 차단 방지
    • 위에서 아래로 순차적으로 코드가 실행되는 방식을 따르지 않고 대기하고 있는다.

 

• 비동기 코드의 중요성
  • JS는 한가지 일이 완료될 때까지 다른 일을 처리하지 못한다. (싱글 스레드)
  • 이와 같은 현상을 "차단(Blocking)"이라고 한다.

 

• 이벤트 루프
  • JS는 한가지 일이 완료될 때까지 다른 일을 처리하지 못한다고 말했었다.
  • 하지만 웹 브라우저는 JS 엔진이 제공하지 않는 Web API를 제공한다.
  • Web API를 사용하면 비동기 처리 방식으로 코드가 블로킹되는 것을 방지할 수 있다.

 

• 이벤트 루프의 작동 방식

const foo = () => console.log("First")
const bar = () => setTimeout(() => console.log("Second"), 500)
const baz = () => console.log("Third")

bar()
foo()
baz()

1. bar() 가 호출되면 call stack에 쌓임
2. bar()에 저장된 setTimeout() 함수도 쌓임
3. 콜백 함수가 Web API로 이동되고 setTimeout()이 call stack에서 빠져나감
4. bar() 도 빠져나감
5. foo() 가 호출되면 call stack에 쌓임
6. First를 출력하며 foo()가 call stack에서 빠져나감
7. baz() 가 호출되면 call stack에 쌓임
8. Third를 출력하며 baz()가 call stack에서 빠져나감
9. 0.5초가 지난 콜백 함수는 큐로 이동됨
10. call stack에 아무것도 없기때문에 큐에 있던 콜백 함수가 call stack으로 이동
11. Second를 출력하고 콜백함수는 call stack에서 빠져나감

 

The Problem I Faced

 

What I Tried to Do

 

How I Solved It

 

So

 

Aha Moments

모든 이벤트 리스너는 이벤트(event) 객체를 매개변수로 전달받는데 일반적으로 개발자들은 이벤트 객체 매개변수를 evt, ev 또는 e 중 하나를 선택해 사용한다고 한다.

 

하지만 HTML과 JS가 섞이기 때문에 코드가 지저분해지고 관리가 어려워진다.

그래서 재사용과 유지보수가 불리하고 동일하게 여러 곳에서 작동되게 하려면 태그마다 함수 실행 구문을 넣어야 한다.

따라서 레거시 이벤트 모델은 아주 간단한 테스트나 빠른 시연에 사용하고 실제 프로젝트나 규모가 있는 개발에서는 최신 이벤트 모델이 권장된다.