[TIL🔥]Day13(8/19)

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

Module의 장점

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

모듈을 사용할 때 주의할 점은
모듈은 로컬 파일에서 동작하지않고, 웹서버(HTTP, HTTPS 프로토콜)에서만 동작한다

Comment

점점 지식은 쌓여가고, 정리해서 내 것으로 만들 시간은 부족한 것 같다.
아티클로 정리할 것과 한 번 더 복습할 주제들을 차곡 차곡 쌓아두고 있는데, 점점 곶간이 꽉 차고있다 🤪
얼른 이 곶간을 하루 빨리 정리해서 나의 머릿속을 꽉꽉 채워야겠다!!!