기술 면접 정리 (2)

메소드 체이닝

up, down 메소드를 제공하는 객체 ladder가 있다.

let ladder = {
  step: 0,
  up() {
    this.step++;
  },
  down() {
    this.step--;
  },
  showStep: function() { 
    alert( this.step );
  }
};

연어이 메소드를 호출하고 싶으면

ladder.up();
ladder.up();
ladder.down();
ladder.showStep();

이렇게 호출해야되는데 메소드 호출 체이닝을 이용하면

ladder.up().up().down().showStep();

이렇게 바꿀 수 있다. 그리고 각 메소드마다 호출을 연속적으로 하기 위해서는 return.this를 붙여서 쓰면된다.

메모이제이션

메모이제이션은 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적계획법(Dynamic Programming)에 핵심이 되는 기술이다.

closure

클로저는 자바스크립트의 중요한 개념중 하나이며 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다.

function outerFunc() {
  var x = 10;
  var innerFunc = function () { console.log(x); };
  innerFunc();
}

outerFunc();

함수 outerFunc 내에서 innerfunc이 선언되고 호출되었다. innerfunc는 내부에서 선언되었기 때문에 변수 x에 접근할 수 있다.
스코프는 함수를 호출할 때가아니라 함수를 어디에 선언하였는지에 따라 결정되는데 이를 렉시컬 스코핑이라고 한다. 위에서 볼 수 있듯이 innerFunc는 함수 outerFunc내부에서 선언되었기 때문에 innerFunc의 상위 스코프는 outerFunc이다. 만약 innerFunc가 전역에서 선언되었으면 상위 스코프는 전역 스코프가 된다.
함수 innerFunc는 자신이 속한 렉시컬 스코프(전역, 함수 outerFunc, 자신의 스코프)를 참조 할 수 있다. 여기서 실행컨텍스트의 개념이 들어간다.
내부 innerFunc가 호출되면 자신의 실행 컨텍스트가 실행컨텍스트 스택에 쌓이고 변수 객체와 스코프체인 그리고 this에 바인딩할 객체가 결정된다. 이때 스코프체인은 전역 스코프를 가리키는 전역 객체와 함수 outerFunc의 스코프를 가리키는 함수 outerFunc의 활성 객체 그리고 함수 자신의 스코프를 가리키는 활성 객체를 순차적으로 바인딩한다. 스코프 체인이 바인딩한 객체가 바로 렉시컬 스코프의 실체이다.
여기서 이제 내부 함수 innerfunc를 함수 outerFunc내에서 호출하는 것이 아니라 반환하도록 한다.

function outerFunc() {
  var x = 10;
  var innerFunc = function () { console.log(x); };
  return innerFunc;
}
var inner = outerFunc();
inner(); // 10

이러면 outerFunc은 innerFunc를 반환하고 콜스택에서 제거되므로 변수 x또한 더이상 유효하지 않게 되어 변수 x에 접근할 수 있는 방법이 없어보이지만 위의 실행값은 10이다. 이처럼 내부함수가 외부함수보다 더 오래 유지되는경우를 클로저(closure)라고 한다.

javascript 이벤트 전파

이벤트 모델은 DOM 구조를 두 번 순회한다. 이벤트가 호출되면 최상위 루트에서 자식 엘리멘트들을 타고 이벤트 타깃까지 내려가는 캡쳐 단계가 일어나고 다시 반대로 이벤트의 타킷으로부터 최상위 루트까지 올라가는 버블 단계가 일어난다. 이렇게 부모 요소와 자식 요소 두 곳에 click이벤트를 생성한 후 자식요소를 클릭하여 이벤트를 호출할 때 클릭하지 않은 부모 요소 에서 클릭이 발생하게 된다. 이런 반응이 나오는 경우는 이벤트 모델의 전파 과정 중 버블링 단계에서 이벤트를 발생하기 때문이다.
이벤트 전달을 막기위한 3가지 방법이 있다.

• event.stopPropagation(): 상위 DOM으로의 전달, 전파를 하지 않도록 하는코드
• event.preventDefault(): 이벤트의 기본 동작을 차단하는 메소드
• stopImmediatePropagation(): 같은 DOM에 걸린 다른 이벤트 까지도 전파를 차단

그래서 일반적으로 원하는 이벤트 동작만 하고 싶을때는 stopPropagation()과 perventDefault() 두개를 동시에 사용한다.

lazy-loading

lazy-loading은 리소스를 non-blocking으로 식별하고 필요할 때만 로드하는 전략이다. 이는 렌더링 범위를 줄여서 페이지 로딩속도를 더 빠르게 가져올 수 있다.

• Code-splitting
  javascript, css, html들을 더 작은 chunk파일들로 나눠서 로딩 하는 기법이다
• javascript
  script type을 module로 두면 기본적으로 lazy-loading이 적용된다.
• CSS, Fonts, Image, Iframe들을 lazy-loading을 통해 성능향상을 하는 경우가 많다.

브라우저 저장소

• Cookie: 서버와 데이터를 공유하는 용도로 사용되며 데이터의 유효기간 지정이 가능하다.
• local storage: 키, 밸류 형태로 저장하는 기능이 있고 간단한 텍스트만 담을 수 있지만 만료기간 없이 저장이 가능해서 자동로그인에 사용된다
• Sessoin Stroage: 로컬스토리지와 달리 만료기간이 있어 브라우저를 종료하거나 새탭을 열때 데이터가 초기화된다.

GET, POST 차이

• GET: 서버로부터 정보를 조회하기 위해 설계된 메소드이며 요청을 할때 body에 정보를 담지 않고 쿼리스트링을 통해 전송
• POST: 리소스를 생성/변경하기 위해 설계되었기 때문에 body에 정보를 담아서 전송할 수 있어서 GET과 달리 대용량 데이터를 전송할 수 있다.

SEO란?

검색 엔진 최적화란 웹페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹페이지를 구성해서 검색 결과의 상위에 나올 수 있게 하는 작업을 말한다. SPA의 경우 SEO가 잘 되지 않는 다는 약점이 있다 그래서 정보제공을 목적으로 하는 웹페이지의 경우는 SPA가 아니라 SSR방식을 써서 SEO에 대응할 수 있는 기술을 지원해야 한다.

CORS는 무엇이고 해결할 할 수 있는 방법

다른 도메인에서 리소스 요청 시 cross-origin HTTP에 의해 요청을 하는데, 대부분의 브라우저는 보안 상의 이유로 이 요청을 제한한다. 이를 동일 오리진 정책(Same Origin Policy)이라고 한다. 요청을 보내기 위해서는 요청보내는 대상과 프로토콜이 같아야 하고, 포트도 같아야 한다. JSONP(JSON-padding)을 통해 해결하거나 특정 HTTP 헤더를 추가하여 이 이슈를 해결할 수 있다. 이와 같이 타 도메인 간 자원을 공유할 수 있게 해주는 것을 Cross Origin Resource Sharing(CORS)라고 한다.