8. 웹패턴

웹 패턴

• 자바스크립트 전송

• 플러그인

• 멀티스레딩

• 서킷 브레이커 패턴

• 백오프

• 프라미스

1. 자바스크립트 전송

• 파일결합

  하나의 클래스당 하나의 자바스크립트파일 구성 -> 코드 찾기가 쉬움 -> 많아지는 파일은 또 단점 (브라우저가 콘텐츠를 요청할 때) 브라우저가 캐시사이즹 이슈 요청 후 응답에 대한 처리 (HTML) -> 다운로드가 전부 될 때까지 기다리지 않고 처리 시작함 : 외부자원을 발견했을때 웹 서버와 다른 연결을 오픈하고 새로운 요청을 보내 자원을 다운로드하게 됨 : 세션의 수는 정해져 있자나? -> 새로운 설정으 오버헤드 수반 -> 제한설정 필요 -> 파일결합? -> 모든자바스크립트를 하나의 파일로 저장 -> 결합하기만하면 나머지 작업은 정상 작동 -> 패턴당 하나의 파일이었다? -> 다수의 패턴 사용 -> 단순 파일결합 하면됨 -> 빌더와 팩토리메서드의 결합 -> 먼개소리지이건..?

  연결한다 이렇게?

  var Westros;
  // 빌더
  (function (Westros) {
    (function (Religion) {
  
    })(Westros.Religion || (Westros.Religion = {}));
    var Religion = Westros.Religion;
  })(Westros || (Westros = {}));
  // 팩토리
  (function (Westros) {
    var Tournament = (function () {
      function Tournament() {
      }
  
      return Tournament;
    });
  })(Westros || (Westros={}));

• 축소

  minify 파일. ex) jquery.min -> 파일용량줄임 소스맵?

• 컨텐츠 전송 네트워크 (CDN)

  여러 웹서버 간에 공유되는 자바스크립트를 캐시

타이밍 API 배포방식에서 CDN과 라이브러리

2. 플러그인

플러그인은 그냥 말그대로 라이브러리 갔다 쓰는 내용

• 제이쿼리 DOM 기반의 라이브러리 $변수를 자주씀

• D3 시각화 라이브러리 메서드 체인, 연쇄방식 (대부분 FP기반 소개)

3. 멀티스레딩

• 웹워커 : 브라우저에서 한번에 두가지 일을 할 수 있는 매커니즘 : 메시지를 사용하여 메인스레드와 통신 할 수 있는 백그라운드 스레드

  백그라운드에서 작업이 실행되는 동안 메인스레드는 어떤 작업도 할 수 있다. (안드로이드 스레드 개념과 일치하는것으로 판단됨)

• Nodejs

  부모와 자식 프로세스 간에 통신이 가능한 비슷한 웨워커같은 인터페이스 제공 (웹워커와 비슷한 매커니즘 제공)

// 웹워커 (피보나치)
self.addEventListener('message', function (e) {
  var data = e.data;
  if(data.cmd == 'startCalc'){
    self.postMessage({event: 'calcStarted'});
    var result = fib(data.parameters.number); // 새로운 인스턴스 시작 
    self.postMessage({event: 'calcComplete', result: result});
  }
}, false)

// TODO 웹워커 재 확인
function startThread(){
  worker = new Worker('worker.js');
  worker.addEventListener('message', function (message) {
    logEvent(message.data.event);
    if(message.data.event == 'calcComplete'){
      writeResult(message.data.result);
    }
    if(message.data.event == 'calcStarted'){
      document.getElementById('result').innnerHTML = 'working';
    }
  });
};

4. 서킷브레이커 패턴

시스템이 커질수록 실패할 확률이 높다 (오류발생률로 보임) 중복이란 단어로 번역이되어 있는데 이중화 같음 이런 중복이 실패시 (에러발생시) 백업용으로 사용되는 수단 중복을 제공하는 일반적인 시스템 일정 실패횟수가 도달하면 통신시도를 차단 -> 중간매개체

클라이언트 -> 서킷브레이커 -> 서버 (중간에서 오류발생이 지속될 경우 차단)

5. 백오프

서킷브레이커의 변형 -> 서버와의 통신을 차단하는 대신 백오프형태로 사용 원래의 폴링 값이 5초였다면, 고장이 날 경우 이것을 10초로 변경하고, 이과정을 반복하여 간격을 점점 늘리는 방식. 지속적인 재시도가 발생

...
// 제이쿼리 내용 일부
error : function (xhr, textStatus, errorThrown) {
  ...
  if(this.try <= this.retry){
    // 재시도, 재호출
    $.ajax(this);
    return;
  }
  return;
  ...
}

6. 프라미스

자바스크립트는 싱글쓰레드, 단일 이벤트 루프를 사용한다가 더 정확한 표현 이벤트 루프를 차단하지 않도록 유지하는게 중요

여러 경우에 콜백처리, 즉 비동기처리는 필요함. 알다시피 콜백의 대안으로 나온 개념이 프라미스인데 여기서는 간략히 설명 중.

프라미스는 동기와 비동기의 교량역할이며, 비동기를 동기처럼 보이게 바꿔놓는다. 내부적으로 지연패턴이 사용되어 있다.

// 일반적인 콜백패턴
$.ajax ("/some/url",{
  success: function(data, status){},
  error: function(jqXHR, status){}
});

// 프라미스
$.ajax("/some/url/").then(successFunction, errorFunction);  // 값과 상태를 포함하는 프라미스 반환

제이쿼리 프라미스와 ES6 프라미스는 상이하다. 제이쿼리 프라미스는 에러처리시 1.처리가 실패한 프라미스, 2.처리했지만 실패한 프라미스 를 제대로 구분못함

// 제이쿼리 프라미스
$.ajax("/some/url").then(
  function (data, status) {
  },
  function (jqXHR, status) {
    // 오류를 처리하고 새로운 프라미스를 반환 -> 처리가 중단된다
  }
).then(/*계속*/);

// 일반적인 프라미스 인듯 이렇게 코드작성을 권장한다. -> catch 사용 
$.ajax("/some/url").then(
  function (data, status) {
  },
).catch(function (jqXHR, status) {
    // 오류를 처리하고 새로운 프라미스를 반환
  }
)
.then(/*계속*/);