Daehyunii's Dev-blog
[데브코스] TIL-113 module, promise 본문
ES6 module 이란?
1. import
export 키워드로 내보내진 변수, 함수 등을 불러올 수 있는 키워드이다. import를 사용하려면 웹 서버가 필요하다. 우리는 npx serve 모듈을 사용하여 로컬 웹서버를 띄우고 있어 상관없다. from 이후 모듈 이름 맨 뒤에 .js를 빼먹지 않았는지 체크해야 한다.
import defaultExport from 'module-name;
위의 경우에는 module-name 내에 export default로 내보내진 것을 가져온다. 보통 컴포넌트 단위로 코드를 구성할 때는 하나의 파일에 export default가 하나만 있게 구현한다.
import * as allItems from 'module-name'
위의 경우에는 module-name 내에서 export 된 모든 것을 전부 가져온다. as 이후의 이름은 중복되지만 않으면 자유롭게 정할 수 있다.
import { loadItem } from 'module-name'
위의 경우에는 module-name 내에서 export 된 것 중에 특정 값만 가져온다.
import { loadItem as loadSomething } from 'module-name'
위의 경우에는 module-name 내에서 export 된 것 중에 특정 값만 이름을 loadSomething으로 바꿔서 가져온다.
2. 장점
- 각 JS별로 사용되는 모듈을 명시적으로 import 해오기 때문에, 사용되거나 사용되지 않는 스크립트를 추적할 수 있다.
- script src로 불러오는 것과 다르게 전역 오염이 일어나지 않는다.
- script 태그로 로딩하는 경우 html에서 파일을 불러오는 순서가 중요하지만, import로 불러오는 경우에는 순서가 무관하다. 아래와 같은 차이가 나게 된다.
...
<body>
<script src="./main.js" type="module"></script>
</body>...
<body>
<script src="./todoForm.js"></script>
<script src="./todoList.js"></script>
<script src="./App.js"></script>
<script src="./main.js"></script>
</body>비동기 처리란?
특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성이다. 동기 방식으로 사용하게 되면 요청 후 응답이 오기 전까지 브라우저가 굳어버린다. 만약 API 조회에 10초가 걸린다면 10초간 브라우저가 먹통이 될 것이다.
1. Promise
자바스크립트에서 비동기 작업에 필수적인 개념이다. Promise는 비동기 작업을 제어하기 위해 나온 개념으로, callback hell에서 어느정도 벗어날 수 있게 해준다. Promise로 정의된 작업끼리는 연결할 수 있으며, 이를 통해 코드의 depth가 크게 증가하지 않는 효과가 있다.
2. Promise 만들기
const promise = new Promise((resolve, reject) => {
// promise 내부에서 비동기 상황이 종료될 때 resolve 함수 호출
// promise 내부에서 오류 상황일 때 reject 함수 호출
})
Promise에서는 then() 을 이용해 비동기 작업 이후 실행할 작업을 지정한다. then() 의 result에는 resolve를 호출하며 return한 값이 들어있다. Promise chain 중 작업이 실패했을 경우, catch()로 에러를 잡을 수 있다. 성공과 실패 여부와 상관없이 호출해야하는 코드가 있다면 finally() 에서 처리한다. 기존의 callback 함수를 promise 형태로 만들 수 있다. resolve를 작업이 끝나는 순간에 호출하면 된다.
const delay = (delayTime) => new Promise((resolve) => {
setTimeout(resolve, delayTime)
})
delay(5000)
.then(() => {
doSomething()
return delay(3000)
).then(() => {
console.log('complete!')
})
3. Promise 내장 함수들
- Promise.all(iterable): 여러 Promise를 동시에 처리하기에 유용하다.
const promise1 = delay(1000)
const promise2 = delay(2000)
const promise3 = delay(3000)
Promise.all([promise1, promise2, promise3]).then(() => { // promise1, promise2, promise3이 모두 처리된 이후에 호출된다. })- Promise.race(iterable): 여러 Promise중 하나라도 resolve 또는 reject 되면 종료된다. 즉, 제일 먼저 하나라도 Promise 실행이 끝나면 전체가 실행이 끝나게 된다.
function getRandomInt(min, max) {
min = Math.ceil(min)
max = Math.floor(max)
return Math.floor(Math.random() * (max-min)) + min
}
const promises = [1, 2, 3, 4, 5].map(n => {
const delayTime = getRandomInt(1000, 5000)
return new Promise(resolve => { setTimeout(() => {
console.log(`${n}번 고양이 완주`)
resolve(`${n}번 고양이 승리`) }, delayTime) }) })
Promise.race(promises).then(message => console.log(message))- Promise.any(iterable): 여러 Promise중 하나라도 resolve 종료된다. race()와 다른 점은 resolve가 하나라도 되어야 종료되는 것이다. reject 된 것은 무시한다.
- Promise.allSettled(iterable): 여러 Promise들이 성공했거나 실패했거나 상관없이 모두 이행된 경우를 처리할 수 있다.
- Promise.resolve(): 주어진 값으로 이행하는 Promise.then 객체를 만든다. 주어진 값이 Promise인 경우 해당 Promise가 반환된다.
오늘을 마무리 하며
module의 개념을 정의해보자면 여러 기능들에 관한 코드가 모여있는 하나의 파일인데 위에서 언급한 장점 외에도 하나의 파일안에서 관련된 기능들이 하나의 모듈로 존재한다면 유지보수성이 뛰어날 것 같고 또 import해서 사용만하면 되기 때문에 재사용하기에도 너무 좋은 장점을 지녔다는 것을 어렴풋이 느낄 수 있었다. 지금까지 공부를 하면서 가장 많인 듣는말이 코드의 중복 방지, 재사용성이라는 말을 많이 듣게 되는데 처음에는 사전적 의미로는 이해했지만 실제 피부로 와닿지는 못했던 것 같다. 하지만 오늘 배운 모듈 개념과 이와 관련된 예시들을 참고하면서 module화를 통해 조금 더 체계적인 코드를 작성할 수 있게 만들어 준다는 점은 확실한 것 같다. 오늘 공부한 내용을 토대로 코드를 작성하는데 연습이 많이 필요하겠지만, 이를 익숙하게 만들고 체득한다면 분명 한층 업그레이드된 코딩 실력을 갖출 수 있을것 같다는 생각이 든다!!
'✏️ 2022. TIL > November (데브코스)' 카테고리의 다른 글
| [데브코스] TIL-115 CSS Grid (0) | 2022.11.29 |
|---|---|
| [데브코스] TIL-114 Float, Position, Flex (0) | 2022.11.28 |
| [데브코스] TIL-112 fetch API, history API (0) | 2022.11.24 |
| [데브코스]TIL-111 TO-DO 앱 만들기 (0) | 2022.11.07 |
| [데브코스] TIL-110 UP&DOWN 게임 만들기 (0) | 2022.11.06 |
