TIL - Day13

Module

모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일 로 다음과 같은 것들을 위해 사용한다.

• 유지보수성 : 기능들이 모듈화가 잘 되어있다면, 의존성을 줄일 수 있기 때문에 어떤 기능을 개선이나 수정할 때 편하게 할 수 있다!!
• 네임스페이스화 : JS에서 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아질수록 겹치는 네임스페이스가 많아질 수 있다.
  • 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 문제가 해결👍
• 재사용성 : 모듈을 분리시켜 똑같은 코드를 반복하지 않고 재사용이 가능하다!

import

html에 불러올 script에는 src 뒤에 type = 'module' 선언해주기!

• export 키워드로 내보내진 변수, 함수 등을 불러올 수 있는 키워드

export default

• module-name 내에 export default로 내보내진 것을 가져온다!

import defaultExport form "module-name"

export, * as

• module-name 에서 export로 된 모든 것을 가져온다! as 이후에 이름은 중복되지 않는 한 자유롭게 정하자!

import * as allItems from "module-name"

{item, ...}

• module-name 내에서 export 된 것 중에서 특정 값만 가져온다
  • 쓰지 않는 모듈을 import 할 필요가 없기 때문

import {item} from "module-name"

• 이 코드 내에서 특정 값 이름 바꾸기

import {
	item as loadItem
} from "module-name" 

import를 사용하면 스크립트 의존성을 훨씬 간편하게 관리할 수 있다. 이전 TIL에서 html에 script를 실행 순서대로 생각하여 테트리스 방식처럼 쌓아놨었는데 그럴 필요가 전혀 없었다.. 각 JS별로 사용되는 모듈을 명시적으로 import 해오기 때문에, 사용되거나 사용되지 않는 스크립트를 추적할 수 있다!!

📌 불러올 때 파일 이름뒤에 .js 꼭 붙이기!!

비동기 다루기 (call back)

내가 지금까지 알았던 비동기 처리는 병렬?? 이전 작업의 실행을 기다리지 않고 다음 작업을 수행하는..? 방식으로 알고 있었지만 이번 기회에 확실히 정리해보자!!

비동기 처리 자세히 알아보기

• 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성!!

CASE 1. addEventListener 함수

function onButtonClick() {
	console.log('눌렀구나')
}
document.querySelector('.save').addEventListener('click',onButtonClick)

• 두 번째 인자로 넘겨진 onButtonClick() 함수는 바로 실행되지 않고 이벤트 리스너가 정의한 이벤트가 발생할 때 실행된다.

CASE 2. setTimeout과 setInterval

function work(){
	console.log('work!')
}
setTimeout(work,1000)
setInterval(work,3000)

console.log('working~~~~~')

• work() 함수는 바로 실행되지 않고 setTimeout, setInterval의 시간만큼 지난 후에 실행된다.

• setTimeout의 시간을 넣지 않거나 0으로 설정해도 바로 실행되지 않는다! (함수가 다 실행된 다음 진행)
  

CASE 3. XMLHttpRequest (XHR)

• 데이터를 비동기로 요청하고, 요청 후의 동작을 비동기로 처리한다.
• 오래된 방식으로 지금은 잘 사용하지 않는다! 사용했다면 많이 힘들었을수도..?

중요한 점

• sync(동기)방식으로 사용하면 요청 후 응답이 오기 전까지 브라우저가 굳어버린다!
  • Ex) API조회에 10초가 소요된다면 10초 간의 브라우저가 먹통..