내보내기

기본 내보내기

이름 X
모듈당 1번만 사용가능

export default 데이터

이름 내보내기

이름 필수

모듈당 여러번 사용가능

export const 이름 = 데이터

키워드로 내보내는 데이터의 이름의 변경이 가능

const a = 'name'

export {
	a as str
}

가져오기

import 기본데이터, {이름데이터} from '경로'
// 기본데이터의 이름은 가지고 올 때 이름을 지정할 수 있음
// 이름을 가지는 데이터는 괄호를 통해 이름을 명시하여 데이터를 가져와야함

import defData from './myModule.js'

기본 내보내기는 이름이 있어도 이름이 없는 것처럼 내보냄

import * as 이름 from '경로'

이름에 해당하는 객체 데이터로 해당 경로의 데이터를 불러옴

동적 모듈 가져오기

동적으로 함수를 중간에 가져오기

import 함수를 통해 동적으로 모듈을 가져올 수 있습니다.

import 함수는 promise 데이터를 반환

import 함수는 비동기로 동작함

100초를 기다려야 실행됨

따라서 import(’경로’).then(인수 ⇒ 실행문)

// 다음과 같다

import * as 이름 from '경로'
실행

동기 비동기

api 같은 경우에는 중간에 데이터 요청과 응답이 필요하기 때문에 내부 함수를 실행하는 것보다 시간이 오래걸릴 수 있고, 따라서 이러한 현상이 일어나는 것을 비동기라고 한다

setTimeout은 비동기 코드이며, 처리 시간이 무조건 소요된다.

setTimeout(() => {
	실행문
}, 시간초)

콜백을 이용한 비동기 코드의 출력 순서 변경

promise

콜백 패턴

const a = (callback) =? {
	setTimeout() = {
		console.log(1)
		callback()
},1000)
}

a (()=>{console.log(2)})

// 1
//2

주의할 것 - 콜백 지옥이라고 불리는 구간이 발생할 수 있음

따라서 promise → .then → async/await 순으로 생겨

promise 객체

promise.then()

resolve를 리턴 - 약속이 이행된 때

const a = () => {
	return new Promise(resolve => {
		setTimeout(() = > {
			console.log(1)
			resolve()
		}, 1000)
	})
}

const b = () => console.log(2)

a().then(() => b())

reject를 리턴 - 약속을 이행할 수 없을 때

function a() {
	return new Promise((resolve) => {
		실행문
		콜백을 대신할 resolve()
	})
}

a().then(callBack)

export function loadImage(url) {
	return new Promise(resolve => {
		const imgEl = document.createElement('img')
		imgEl.src = url
		imgEl.addEvenvtListener('load', () => {
				console.log('Image loaded!')
				resolve()
			})		
	})
}

await loadImage(url)
const h1El = document.querySelector('h1')
h1El.textContent = 'Image Loaded!'

모듈

각 모듈을 만들 때 각각의 모듈은 독립성이 보전되어야 한다.

방향이 단방향으로 흐르면 괜찮지만 쌍방향으로 흐르는 경우는 추천되지 않는다. 이러한 경우 너무 얽히고 섥힐 경우가 매우 크다.

모듈의 핵심 : 기능의 독립!! 루프를 형성하지 마라!!

main.js를 최상위 모듈이라고하며, 엔트리 포인트라고 한다.

해당 엔트리 포인트를 다른 모듈이 가져다 쓰는 것은 옳지 않다.

Promise

reject함수가 실행되면 resolve가 실행되지 않음

resolve가 실행되면 reject가 실행되지 않음

catch() 메소드

문제가 발생할 때, 동작하는 메소드 like .then()

reject를 반환한 경우 사용, 해당 반환 데이터는 catch의 매개변수로 활용됨

resolve를 반환한 경우네느 .then() 사용, 해당 반환 데이터는 then의 매개변수로 활용됨

async await

const res = await delayAdd(4) // 정상작동, resolve 출력

console.log(res)

• try catch문

  try {
  	const res = await delayAdd(19)
  	console.log(res) 
  } catch(err) {
  	console.error()
  }

• .finally() : error 발생 시, 값을 초기화 시키기 위한 메소드

  delayAdd(){
  	.then(res => {
  	console.log(res)
  	h1El.innerHTML = res	
  })
  .catch (err => {
  	console.error(err)
  	h1El.innerHTML = err
  })
  .finally(() => {
  	loadingEl.classList.remove('active') // 로딩화면 제거
  })
  }

try {
	startLoading()
	const res = await delayAdd()
	h1El.innerHTML = res
} catch(err){

}

}

반복문 비동기 처리

순서대로 처리하기 위해서는 forEach를 사용해서는 안된다.

무조건 for문을 사용해야 한다.

forEach를 사용하는 경우에는 병렬로 각각의 실행문을 실행하기 때문에,

for와 await를 이용해서 각각의 루프가 끝난경우 배열을 탐색하도록 해야한다.

const titles = ['frozen', 'avengers', 'avatar']

이미지 로딩 콜백으로 구현

function loadImage(src, callback){
	const img = document.createElement('img')
	img.src = src
	img.addEventListener('load', () => {
		callback()
	})
}

이미지 로딩 프로미스로 구현

function loadImage(src) {
	return new Promise(resolve  => {
		cosnt img = document.createElement('img')
		img.src = src
		img.addEventListener('load', () => {
			resolve(img)
		})
	}
}

• 대기 pending : resolve 혹은 reject가 사용되지 않은 상태
• 이행 fullfilled
• 거부

동시 호출 및 다 끝날때까지 기다려라

	await Promise.all(a(), b())

불변성과 가변성

할당 연산자는 해당 메모리를 바라보도록 만듭니다.

재할당 시에는 새로운 메모리를 이용하며, 해당 할당 연산자는 다른 메모리 주소를 바라보게 됩니다.

let a = 2
const b = a

a= 7

console.log(a) // 7
console.log(b) // 2

일치 연산자는 메모리 주소를 따짐

원시형 데이터는 한번 만든 데이터는 여전히 해당 주소를 이용함

따라서 원시형 데이터는 생긴게 같으면 같은 메모리 주소를 참조합니다.

• 객체 데이터 내부의 원시 데이터는 다른 메모리 주소를 참조하여 데이터를 저장합니다.
• 이러한 경우에 객체 프로퍼티의 데이터를 변경하는 경우, 해당 객체 데이터를 카피한 데이터는 같은 메모리를 보고 있기 때문에 카피한 데이터 역시 바뀌게 됩니다.