목차

1. Module

1-1. import

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

<aside> 💡 import/export Module 방식을 사용하면, 스크립트 의존성을 훨씬 간편하게 관리할 수 있다.

• 스크립트 의존성을 추적하여 사용하지 않는 스크립트 제거 가능
• script 태그 사용 시 불러오는 순서가 중요하지만, module방식은 고려하지 않아도 됨
• 전역오염이 되지 않는다는 장점

</aside>

import defaltExport from “module-name”

• export default로 보내진 것만을 가져올 수 있다.
• 컴포넌트처럼 통채로 들고 올 때 사용

import * as ItemList from “module-name”

• as는 alias의 줄임말로, export로 내보내진 모든 것을 가져온다.
• 객체형식으로 받아온다.

import { loadItem as LItem } from “module-name”

• 해당 모듈에서 특정 부분만 import 해온다.
  • as를 붙여서 alias 지정도 가능
• treeshaking을 이용한 라이브러리 경량화 작업에 많이 사용

1-3 실습

html 파일에서 <script type=”module” > 방식으로 index.js를 불러온다.

• 이후 모든 다른 js 파일들은 import/export 방식으로 index.js에서 불러와 사용한다.
• 컴포넌트의 경우 export default
• storage는 전역오염 방지를 위해 설정한 IIFE방식 더 이상 사용하지 않아도 됨

2. 비동기를 다루는 법

비동기처리란 특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고, 다음코드를 먼저 실행하는 JS의 특성이다.