TIL13 - 2023.10.09

Module

import

• export 키워드로 내보내진 변수, 함수 등등을 불러올 수 있는 키워드
• import를 사용하면 스크립트 의존성을 훨씬 간편하게 관리할 수 있다
• module-name 내에 export default로 내보내진 것을 가져온다

import defaultExport from "module-name";

• module-name 내에서 export된 모든 것을 모두 가져오고 as 이후 이름은 중복되지만 않으면 자유롭게 정할 수 있다

import * as allItems from "module-name";

• module-name 내에서 export된 것 중에 특정 값만 가져온다

import { loadItem } from "module-name";

• module-name 내에서 export된 것 중에 특정 값만 이름을 바꿔서 가져온다

import {
	loadItem as loadSomething
} from "module-name";

• export default된 것과 개별 export된 것을 한번에 가져올 수도 있습니다

import defaultFunction, {
	loadItem
} from "module-name";

• 별도의 모듈 바인딩 없이 불러오기만 합니다. 불러오는 것만으로 효과가 있는 스크립트의 경우 사용된다

import "module-name";

module의 장점

• 각 JS별로 사용되는 모듈을 명시적으로 import 해오기 때문에, 사용되거나 사용되지 않는 스크립트를 추적할 수 있다
• script 태그로 로딩하는 경우 불러오는 순서가 중요하지만, import로 불러오는 경우 순서는 무관하다
• script src로 불러오면 전역오염이 일어나는데 import는 전역오염이 일어나지 않는다
• import를 사용하려면 웹 서버가 필요

---

비동기 다루기 ( callback )

• 자바스크립트는 싱글 스레드로 동작하기 때문에 비동기 처리가 필요하다
• sync(동기) 방식으로 사용하게 되면 요청 후 응답이 오기전까지 브라우저가 굳어버린다
• 만약 API 조회에 10초가 걸린다면 10초간 브라우저가 먹통이 될 것이다

 

비동기 처리란?

• 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성
• addEventListener 함수 : 두 번째 인자로 넘겨진 함수는 바로 실행되지 않고, 이벤트 리스너가 정의한 이벤트가 발생할 때 실행된다
• setTimeout, setInterval 함수 : 첫번째 인자로 넘겨진 함수는 바로 실행되지 않고, setTimeout 혹은 setTimeout의 시간만큼 지난 후에 실행된다(작업 시간이 실행되고 첫번째 인자가 실행된다)
• XMLHttpRequest(XHR) : 데이터를 비동기로 요청하고, 요청 후의 동작을 비동기로 처리한다

---

바닐라 자바스크립트로 모듈을 나누기를 처음해봤는데 React와 비슷하면서 달라서 아직 익숙하지 않은거 같다...