VanillaJS를 통한 자바스크립트 기본 역량 강화

Module

모듈 적용하는 순서

1. index.html의 main.js로딩 부분을 아래와 같이 변경

<script src="./src/main/js" type="module"></script>

2. 컴포넌트의 경우 export default로 사용하며,
   외부 의존성이 없는 Header, TodoForm, TodoList먼저 처리

export default function Header({
  ...
export default function TodoForm({
  ...
export default function TodoList({
  ...

3. storage.js 변경

const storage = window.localStorage

export const setItem = (key, value) => {
  ...
  
export const getItem = (key, defaultValue) => {
  ...

IIFE방식에서 바꿔준다.
storage를 선언해줌으로서 localStorage를 sessionStorage로 변경해서 사용가능
export 키워드 붙여주기

4. App에서 사용하는 컴포넌트, 함수를 import 키워드로 불러오도록 선언

import Header from './Header.js'
import TodoForm from './TodoForm.js'
import TodoList from './TodoList.js'
import { setItem } from './storage.js'

export default function App({ $target, initialState }) {
  ...

5. main.js에 import를 선언

import App from './App.js'
import { getItem } from './storage.js'

이렇게 하면

• 각 JS별로 사용되는 모듈을 명시적으로 import해오기 때문에,
  사용되거나 사용되지 않는 스크립트를 추적할 수 있다.

• script 태그로 로딩하는 경우 불러오는 순서가 중요하지만,
  import로 불러오는 경우 순서는 무관하다.

• script src로 불러오는 것과 다르게 전역오염이 일어나지 않는다.
  
  

그래서 import를 사용하려면 웹 서버가 필요하기 때문에

cmd에서 npx serve 모듈로 로컬 웹서버를 띄워서 진행하면 된다!

---

하루의 마무리

🖤 모듈 적용하는 순서와 컴포넌트를 export, import하는 방법을 정리해보는 수업!