[TIL🔥]Day13(8/19)

김다슬·2021년 8월 19일

Today I Learned

목록 보기

13/22

Introduction

오늘은 어제 만든 TodoList에서 스크립트 태그로 불러오던 파일들을 모듈로 분리하여 기능을 가져오는 방식으로 보완해보았다.
또한, 비동기 처리를 이용해 각 TodoList에 해당하는 댓글을 불러오는 기능 구현을 연습했다.
중요한 개념들인 Promise, async, await를 한번 더 복습할 수 있는 좋은 기회였다.

그리고 한 가지 오늘 행복했던 일화를 말하자면, 바닐라 JS를 공부하고 있어서 인지는 모르지만 바닐라빈이 듬뿍 들어있는 에그타르트가 먹고 싶었다. 4일째 집을 안나가서 (운동 빼고) 광합성도 할 겸 집 앞 카페가서 사먹었는데 너무 맛있어서 기분이 좋아졌다. 참 단순한 나다...
이상 나의 tmi였다...😋

오늘 새롭게 배운 것

1. 모듈 (export, import)
2. 비동기 다루기 (callback, Promise, async와 await)

비동기는 모아모아 아티클로 다루고자하니, 오늘은 모듈에 대해 깊게 다뤄보도록 하자!

⚙️ Module

Module이란

대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 파일 하나를 의미한다
export를 통해 모듈을 내보내고, import를 통해 모듈을 불러올 수 있다

export(모듈 내보내기)

변수나 함수 앞에 붙여 외부 모듈에서 해당 변수나 함수에 접근할 수 있도록 한다

// export 사용 예시
export const DOMAIN_NAME = "www.daseul.codes";
export const PORT = "8000";

export const isProduction = () => {
  return false;
};

export와 export default

모듈은 export default라는 특별한 문법을 지원한다.
export default를 사용하면 해당 모듈에는 개체가 하나만 있다라는 사실을 명확히 나타낼 수 있다.

// export default 사용 예시
// 모듈에 sayHello라는 함수 하나만 존재할 경우
export default function sayHello(){
  alert("Hello!");
}

즉, 모듈 당 최대 하나의 export default를 가질 수 있다.

import(모듈 가져오기)

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";

위와 같은 방법으로 외부 모듈을 가져올 수 있다.
프로젝트 내에서 직접 사용하는 예시도 살펴보자.

// constants.js에서 DOMAIN_NAME은 dn으로
// PORT는 p로 가져온다
import { DOMAIN_NAME as dn, PORT as p } from "./constants.js";

// App.js에서 export default된 App과
// 개별 export된 printToday를 한 번에 가져온다 
import App, { printToday } from "./App.js";