231009 [Day15] VanillaJS를 통한 자바스크립트 기본 역량 강화 1 (4)

 

ES6 Module 사용하기

[모던자바스크립트]

module 이란 애플리케이션을 구성하는 개별적 요소로 재사용 가능한 코드 조각
일반적으로 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함 => 다른 모듈에서 접근할 수 없다.(캡슐화) 

모듈은 재사용 되어야 의미가 있기 때문에 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. => export
공개(export)된 모듈의 자산은 다른 모듈에서 재사용할 수 있다. 이때 공개된 모듈의 자산을 사용하는 모듈을 모듈 사용자라고 함.

모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. => import

 

import

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

import name from "module-name"; // module-name 내 export default로 내보내진 것을 가져옴
import * as allname form "module-name"; // allname 이름으로 지정하여 export 된 것을 가져옴

export const DOMAIN_NAME = 'www.kitty.codes'
export const PORT = '8000'

// 함수 export
export const isProduction = () => {
    return false
}

 

하나하나 따로 꺼내오기

import { loadItem } from "module-name" // 모듈내 export된 것 중 특정 값만 가져옴
import {
	loadItem as loadSomething
} from "module-name"; // 모듈내에서 export 된 것 중에 특정 값만 이름을 바꿔서 가져옴

 

export default 된 것과 개별 export 된 것을 한 번에 가져올 수 있다.

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

import "module-name"; // 별도의 모듈 바인딩 없이 불러오기만 함.

 

장점

• 각 JS별로 사용되는 모듈을 명시적으로 import 해오기 때문에 사용되거나 사용안되는 스크립트 추적 가능
• script 태그로 로딩하는 경우 불러오는 순서가 중요하지만, import는 순서가 무관하다.
• script src로 불러오는것과 다르게 전역 오염이 일어나지 않음
• import 사용하려면 웹 서버가 필요
• froem 이후 모듈 이름 맨 뒤에 .js 빼먹었는지 확인

 

 

비동기 다루기 callback

비동기 처리란?

• 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성

 

addEventListener() 함수

• 두번째 인자로 넘겨진 함수는 바로 실행되지 않고 이벤트 리스너가 정의한 이벤트 발생시 실행

function onButtonClick(){
	alert('눌렀군요')
}
document.querySelector('.save-button').addEventListener('click', onButtonClick)

 

setTimeout과 setInterval

• 첫번째 인자로 넘겨진 함수는 바로 실행되지 않고 지정시간만큼 지난 후에 실행
• 시간을 0으로 넣거나 지정하지 않는다고해도 바로 실행되지 않는다. 

function work(){
	console.log('work!')
}

setTimeout(work, 1000);  // 1초 후 실행
setInterval(work, 5000); // 5초마다 실행

console.log("work process");

 

 

 

XMLHttpRequest()

• 데이터를 비동기로 요청하고, 요청 후의 동작을 비동기로 처리

function request (url, successCallback, failCallback) {
  const xhr = new XMLHttpRequest();
  xhr.addEventListener("load", (e) => {
    if(xhr.readyState === 4) {
      if(xhr.status === 200) {
        successCallback(JSON.parse(xhr.responseText))
      } else {
        failCallback(xhr.statusText)
      }
    }
  })
  xhr.addEventListener('error', (e) => failCallback(xhr.statusText))
  xhr.open('GET', url);
  xhr.send()
}

 

비동기 포기하고 동기 방식으로 코드 작성 가능(사용 x)

function syncRequest (url) {
  const xhr = new XHLHttpRequest()
  
  xhr.open('GET', url, false)
  xhr.send()
  
  if(xhr.status === 200){
    return JSON.parse(xhr.responseText)
  } else {
    throw new Error(xhr.statusText)
  }
}

sync 방식으로 사용하면 요청 후 응답이 오기 전까지 브라우저가 동작하지 않는다 .

 

<작업순서>

• api.js 만들기
• TodoList 컴포넌트 만들기
• TodoComments 컴포넌트 만들기
• App 컴포넌트 만들기