오늘도 끄적끄적

느리더라도 꾸준하게

작성일 In , Disqus:

들어가기에 앞서

어제 프라미스를 쓰면서 정리 해봤는데,
또 파라미터를 넘겨서쓰거나 하려니 제대로 쓸 수가 없어서 정리해봤다.
일단 reject 되는 경우는 생각하지 않고, 그냥 내가 짠 비동기 함수를 동기식으로 실행시키길 원했을 뿐이었다.
지극히 사용 방법 위주로 적었으니 아래 링크들을 참조해서 이해하자.
일단 구현이 먼저인 사람은 코드를 적극 참조하면 될 것 같다.

파라미터 없는 일반 비동기 함수

더 읽어보기 »

작성일 In , Disqus:

전에 AJAX를 Promise와 Async/Await로 처리하는 방법을 알아봤는데,
setTimeout과 같은 비동기 함수를 처리하려니 또 버퍼링이 걸려서 정리해봤다.
너무 사용법 위주로 공부하다보니 나중에 또 정리를 하게 될 것 같다.
AJAX를 비동기로 처리하고 싶은 사람은 아래 글을 참조하자.
(ES6) ajax 위주의 promise 실습
(ES6+) ajax를 위한 fetch와 async/await

~ES5(콜백 함수)

순서가 보장되지만 피라미드 같이 생겼다.
뎁스가 깊어질 수록 컨트롤하기가 어렵다.
혹시 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
59
const 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()
              )
            )
          )
        )
      )
    )
  )
);
더 읽어보기 »

작성일 In , Disqus:

들어가기에 앞서

기본적으로 웹팩, 바벨, 리액트 라우터 등등은 안다는 전제 하에 글을 썼다.
웹팩 2에 대한 모르는 부분은 아래 글을 조금씩 참조하면 도움이 될 것이다.

또한 리액트 라우터 v4 예제로 진행할 것이므로 아래 포스트를 참고하고 소스 코드를 클론하자.

더 읽어보기 »

작성일 In , Disqus:

들어가기에 앞서

~~React Router v4가 정식으로 나와서 3은 deprecated 된 거나 마찬가지라고 본다.~~~
현재 React Router v3은 디프리케잇 되지 않고 React Router v4와 다른 노선을 탔을 뿐, 지원은 계속 해주는 것 같다.
따라서 레거시 환경을 싫어하기도 해서 한 번 마이그레이션을 간단하게 해보았다.
기본적으로 웹팩, 바벨, 리액트 라우터 등등은 안다는 전제 하에 글을 썼다.
웹팩 2에 대한 모르는 부분은 아래 글을 조금씩 참조하면 도움이 될 것이다.

v3으로 만들어보기

더 읽어보기 »

작성일 In , Disqus:

들어가기에 앞서

웹팩 2, 웹팩 1, 바벨, 리액트 등등에 대해서 기본적인 부분은 설명하지 않는다.
또한 (Webpack 2) 트리 쉐이킹을 해보자!를 보고 나서 이 포스팅을 읽는 걸 추천한다.

코드를 왜 분할하지?

SPA(Single Page Application)은 한 번에 모든 리소스를 로딩해서
초기 로딩 이후에 페이지 이동이 매우 빠르다는 장점을 가지고 있다.
하지만 앱의 규모가 커지면 모든 리소스를 한 번에 로딩하므로
초기 로딩이 느려져 사용자 이탈을 유발하는 양날의 검을 가지고 있다.

더 읽어보기 »

작성일 In , Disqus:

들어가기에 앞서

여기선 기본적으로 웹팩 1, 바벨, ES2015(ES6)을 알고 있다는 전제로 진행한다.
리액트 대신에 다른 서드 파티(라이브러리/프레임워크) 가지고 테스트하면서 이 글을 봐도 된다.
또한 이 글을 보고 나서 (Webpack 2) 코드를 분할해보자!도 보는 걸 추천한다.

트리 쉐이킹(Tree Shaking)??

트리 쉐이킹이란 나무를 흔들어서 필요없는 걸 떨어트리는 행위를 말한다.
여기서 우리에게 필요없는 것이란 쓰지 않는 코드를 뜻한다.

더 읽어보기 »

작성일 In , Disqus:

perf-chk (Performance Check)

왜 perf-chk를 만들었나?

나는 코드 실행 시간에 굉장히 관심이 많다.
따라서 코드 실행 시간 측정을 위해 테스트를 종종 해보곤 한다.
그럴 때 아래와 같은 코드를 사용하였다. 

1
2
3
4
5
6
7
8
9
10
11
const 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'
더 읽어보기 »

작성일 In , Disqus:

자바스크립트에서 this는 상황에 따라 다른 값을 반환해서 아주 짜증나기 마련이다.
이와 관련해서 하나하나 낱낱이 테스트해보자.

ES5

함수로서 호출할 때

1
2
3
4
5
6
7
'use strict';
var a = function() { // 함수로서 호출할 때
  // strict mode에서는 undefined
  // non-strict mode에서는 Window
  console.log(this);
};
a();
더 읽어보기 »

작성일 In , Disqus:

우리는 주로 ~라는 문자를 물결이라고 읽었다.
하지만 영어권 국가에서는 Tilde(틸드)라고 읽는다.
따라서 해당 연산자를 틸드 연산자라고 부른다.
해당 연산자가 기본적으로 어떤 일을 하는지 보자.

뭐하는 놈이니?

~ 연산자는 비트 단위의 연산자이다.
즉, 10진수를 2진수로 바꿔버린 후 연산을 진행한다는 것이다.
비트 단위의 연산자 중에 Not을 진행하는 연산자이다.
Not 연산자이므로 단항 연산자이다.
간단하게 어떻게 작동하는지 보자. 

1
console.log(~1); // -2
더 읽어보기 »

작성일 In , Disqus:

생성자(Constructor)

인스턴스가 생성될 때 호출되는 인스턴스 초기화 메소드
인스턴스 변수 초기화 작업에 주로 사용된다.

생성자는 인스턴스를 생성하지 못한다!

나는 생성자로 인스턴스를 생성하고
new 연산자가 C언어의 &(주소값 반환) 역할을 하는 줄 알았는데
new 연산자가 있어야 인스턴스를 생성하면서 그 주소값을 반환하게 하는 연산자인 것 같다.
생성자는 인스턴스 변수 초기화이지 그 이상(인스턴스 생성)도 그 이하도 아닌 것 같다.

더 읽어보기 »
0%