어제 프라미스를 쓰면서 정리 해봤는데,
또 파라미터를 넘겨서쓰거나 하려니 제대로 쓸 수가 없어서 정리해봤다.
일단 reject 되는 경우는 생각하지 않고, 그냥 내가 짠 비동기 함수를 동기식으로 실행시키길 원했을 뿐이었다.
지극히 사용 방법 위주로 적었으니 아래 링크들을 참조해서 이해하자.
일단 구현이 먼저인 사람은 코드를 적극 참조하면 될 것 같다.
전에 AJAX를 Promise와 Async/Await로 처리하는 방법을 알아봤는데,
setTimeout과 같은 비동기 함수를 처리하려니 또 버퍼링이 걸려서 정리해봤다.
너무 사용법 위주로 공부하다보니 나중에 또 정리를 하게 될 것 같다.
AJAX를 비동기로 처리하고 싶은 사람은 아래 글을 참조하자.
(ES6) ajax 위주의 promise 실습
(ES6+) ajax를 위한 fetch와 async/await
순서가 보장되지만 피라미드 같이 생겼다.
뎁스가 깊어질 수록 컨트롤하기가 어렵다.
혹시 cb && cb()의 동작 방식과 원리가 궁금한 사람은 아래 글을 참조하자.
(ES) 똑똑한 논리 연산자1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59const f1 = cb => setTimeout(() => {
console.log(1);
// setTimeout의 콜백 함수 안에서
// 콜백함수(f1 함수의 매개변수인 cb)
// 를 실행해야 실행 순서가 보장됨.
// 매개변수로 넘어온 콜백함수(cb)
// 가 없으면 실행하지 않음.
cb && cb();
}, 1000);
const f2 = cb => setTimeout(() => {
console.log(2);
cb && cb();
}, 1000);
const f3 = cb => setTimeout(() => {
console.log(3);
cb && cb();
}, 1000);
const f4 = cb => setTimeout(() => {
console.log(4);
cb && cb();
}, 1000);
const f5 = cb => setTimeout(() => {
console.log(5);
cb && cb();
}, 1000);
const f6 = cb => setTimeout(() => {
console.log(6);
cb && cb();
}, 1000);
const f7 = cb => setTimeout(() => {
console.log(7);
cb && cb();
}, 1000);
const f8 = cb => setTimeout(() => {
console.log(8);
cb && cb();
}, 1000);
const f9 = cb => setTimeout(() => {
console.log(9);
cb && cb();
}, 1000);
f1(
() => f2(
() => f3(
() => f4(
() => f5(
() => f6(
() => f7(
() => f8(
() => f9()
)
)
)
)
)
)
)
);
웹팩 2, 웹팩 1, 바벨, 리액트 등등에 대해서 기본적인 부분은 설명하지 않는다.
또한 (Webpack 2) 트리 쉐이킹을 해보자!를 보고 나서 이 포스팅을 읽는 걸 추천한다.
SPA(Single Page Application)은 한 번에 모든 리소스를 로딩해서
초기 로딩 이후에 페이지 이동이 매우 빠르다는 장점을 가지고 있다.
하지만 앱의 규모가 커지면 모든 리소스를 한 번에 로딩하므로초기 로딩이 느려져 사용자 이탈을 유발하는 양날의 검을 가지고 있다.
여기선 기본적으로 웹팩 1, 바벨, ES2015(ES6)을 알고 있다는 전제로 진행한다.
리액트 대신에 다른 서드 파티(라이브러리/프레임워크) 가지고 테스트하면서 이 글을 봐도 된다.
또한 이 글을 보고 나서 (Webpack 2) 코드를 분할해보자!도 보는 걸 추천한다.
트리 쉐이킹이란 나무를 흔들어서 필요없는 걸 떨어트리는 행위를 말한다.
여기서 우리에게 필요없는 것이란 쓰지 않는 코드를 뜻한다.
나는 코드 실행 시간에 굉장히 관심이 많다.
따라서 코드 실행 시간 측정을 위해 테스트를 종종 해보곤 한다.
그럴 때 아래와 같은 코드를 사용하였다.1
2
3
4
5
6
7
8
9
10
11const iterations = 10000000;
console.time("function A");
for(let i=0; i<iterations; i++){
// some code1
}
console.timeEnd("function A"); // 'Function A: xxx.xxx ms'
console.time("function B");
for(let i=0; i<iterations; i++){
// some code2
}
console.timeEnd("function B"); // 'Function B: xxx.xxx ms'
