2020-08-18 a few seconds read (About 2 words)

javaScript/Debounce & Throttle

Debounce & Throttle

2020-05-10 2 minutes read (About 237 words)

React/React.HOC

HOC (Higher Order Function)

컴포넌트를 파라미터로 넘겨서 사용하는 방식

파라미터로 컴포넌트를 받아오고, 함수 내부에서 새 컴포넌트를 만든 다음
해당 컴포넌트 안에서 파라미터로 받아온 컴포넌트를 렌더링 하는 것
자신이 받아온 props들은 그대로 파라미터로 받아온 컴포넌트에게 다시 주입해주고,
필요에 따라 추가 props도 넣어준다.
HOC의 이름을 만들땐 with~ 형식으로 짓는다. (ex. withRequest)

장점

함수에 기능을 추가하는 코드를 재사용 할 수 있다.

단점

콜백지옥?

여러 로직이 componentWillUnmount, componentDidMount 등의 리액트 life cycle에 흩어지게된다.
함수는 단일 책임 원칙을 벗어나게되고, 코드는 복잡해지고, 디버깅도 어려워진다.

그래서 나타난게 Hook이다.

2020-05-08 a few seconds read (About 0 words)

React/React.props

2020-05-08 a few seconds read (About 27 words)

React/React.state

컴퓨넌트의 상태(state)가 변하면, 컴포넌트의 리렌더링을 발생시킨다.

2020-05-08 a few seconds read (About 1 words)

React/React.Component

Component

2020-05-02 a few seconds read (About 100 words)

javaScript/js.mouseEvent

mouseover 와 mouseenter 이벤트 차이

버블링의 차이

mouseover는 직접 이벤트를 걸지않은 자식요소에 마우스 포인터가 와도 발생
mouseout과 한 쌍을 이룬다.
( 버블링이 발생한다 )
mouseenter는 오로지 자신에게 마우스 포인터가 와야만 발생한다.
mouseleave와 한 쌍을 이룬다.
( 버블링이 발생하지 않는다 )

2020-04-14 7 minutes read (About 988 words)

javaScript/js.Module

모듈

모듈? 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드조각
세부사항을 캡슐화하고 공개가 필요한 API만을 외부에 노출한다.

모듀른 파일 단위로 분리되어 있으며, 애플리케이션은 필요에 따라 명시적으로 모듈을 로드하여 재사용한다.
(애플리케이션과 분리되어 개별적으로 존재하다가, 애플리케이션의 로드에 의해 일원이 된다.)
기능별로 분리되어 작성되므로 코드 단위르 명확히 분리한다. 재사용성이 좋아서 효율성, 유지보수성을 높인다.
script 태그에 type= “module” 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다.
ES6 모듈의 파일 확장자는 모듈임을 명확히 하기위해 mjs를 사용하도록 권장한다.
1
<script type="module" src="app.mjs"></script>
ES6 모듈의 단점
구형 브라우저는 ES6 모듈을 지원하지 않는다.
브라우저의 ES6 모듈 기능을 사용하더라도 트랜스파일링이나 번들링이 필요하다.
지원하지 않는 기능이 있다. (Bare import 등)
따라서 ES6 모듈기능보다는 Webpack 등의 모듈 번들러를 사용하는 것이 일반적이다.

javaScript/js.REST API

REST API

1. REST API의 구성

구성 요소	내용	표현 방법
자원(Resource)	자원	HTTP URI
행위(Verb)	자원에 대한 행위	HTTP 요청 메소드
표현(Representations)	자원에 대한 행위의 구체적 내용	HTTP 페이로드

GET 요청

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <pre></pre>
  <script>
    // XMLHttpRequest 객체 생성
    const xhr = new XMLHttpRequest();

    // HTTP 요청 초기화
    // todos 리소스에서 모든 todo를 취득 (index)
    xhr.open('GET', '/todos');
    
    // HTTP 요청 전송
    xhr.send();

    // load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
    xhr.onload = () => {

    // status는 response 상태 코드를 반환 : 200 => 정상응답 
      if (xhr.status === 200) {
        document.querySelector('pre').textContent = xhr.response;
      } else {
        console.error('Error', xhr.status, xhr.statusText);
      }
    };
    </script>
</body>
</html>

javaScript/js.promise

1. 프로미스?

비동기 처리를 위해 콜백 함수를 사용한다.
하지만 콜백 패턴은 가독성이 나쁘고 비동기 처리 중 발생한 에러의 예외 처리가 곤란하며 여러 개의 비동기 처리 로직을 한꺼번에 처리하는 것도 한계가 있다.

이를 보완하기위해 ES6에서 프로미스를 도입. 비동기 처리 시점을 명확하게 표현한다.
후속 처리 메소드를 체이닝(chainning)하여 여러 개의 프로미스를 연결하여 사용할 수 있다.

2. 콜백 패턴의 단점

2.1 콜백 헬 (Callback Hell)

콜벡 헬이 발생하는 이유
비동기 처리 모델은 실행 완료를 기다리지 않고 즉시 다음 태스크를 실행한다.
따라서 비동기 함수 내에서 처리 결과를 반환하면 기대한 대로 동작하지 않는다.

비동기식 처리 모델(병렬적 태스크 수행)

태스크가 종료되지 않은 상태여도 대기하지 않고 즉시 다음 태스크 실행(Non-Blocking)
DOM 이벤트, Timer 함수, Ajax 요청
비동기 처리를 위해 콜백 패턴을 사용하면 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 네스팅(nesting)되어 복잡도가 높아지는 콜백 헬이 발생된다. (가독성 안좋음)

2.2 에러 처리의 한계

3. 프로미스의 생성

Promise 생성자 함수를 통해 인스턴스화한다.

const promise = new Promise((resolve, reject) => {
  if (//비동기 작업 수행 성공) { 
    resolve('result');   // fulfilled 상태
  } else { // 비동기 작업 수행 실패
    reject('failure reason');  // rejected 상태
  }
});

4. 프로미스의 후속 처리 메소드

Promise로 구현된 비동기 함수는 Promise 객체를 반환하여야 한다.
Promise 객체의 후속 처리 메소드(then, catch)를 통해 비동기 처리 결과 또는 에러 메시지를 전달받아 처리한다.
Promise 객체는 상태를 갖는다. 이 상태에 따라 후속 처리 메소드를 체이닝 방식으로 호출한다.

then

두 개의 콜백 함수를 인자로 전달 받는다.
첫번째 콜백함수 - 성공시 호출 (fulfilled, resolve 함수가 호출된 상태)
두번째 콜백 함수 - 실패시 호출 (rejected, reject 함수가 호출된 상태)
then 메소드는 Promise를 반환한다.

catch

예외가 발생하면 호출 (비동기 처리에서 발생한 에러, then 메소드에서 발생한 에러)
Promise를 반환한다.

5. 프로미스의 에러 처리

6. 프로미스 체이닝

7. 프로미스의 정적 메소드

7.1 Promise.resolve / Promise.reject

존재하는 값을 Promise로 래핑하기 위해 사용

7.2 Promise.all

각각의 프로미스가 resolve한 처리 결과를 배열에 담아 resolve 하는새로운 프로미스 반환
처리순서가 보장

7.3 Promise.race

가장 먼저 처리된 프로미스가 resolve한 처리 결과를 resolve하는 새로운 프로미스를 반환
병렬처리 x

2020-04-07 2 minutes read (About 225 words)

javaScript/js.Asynchronous

비동기 프로그래밍

동기식 처리 모델(Synchronous processing model)

태스크를 순차적으로 하나씩 처리하는 방식
현재 실행중인 태스크가 종료할 때까지 다음 실행될 태스크가 대기하는 방식
앞선 태스크가 종료할 때 까지 이후 태스크들이 블로킹된다는 단점

비동기식 처리모델(Asynchronous processing model)

현재 실행중인 태스크가 종료되지 않은 상태라 하더라도 다음 태스크를 곧바로 실행하는 방식
setTimeout은 일정 시간 경과한 후에 콜백 함수를 호출하지만 이후 태스크들을 블로킹하지 않고 곧바로 실행
타이머 함수, Ajax 요청, 이벤트 처리는 비동기식 처리모델

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
}

setTimeout(foo, 3 * 1000);
bar();
// bar ->(3초 경과후) foo