1108 - 1114

1108

이번 주 목요일에 모의 면접이 있을 예정이라 이와 관련해서 헷갈렸던 개념들을 하나씩 정리하고자 한다.

자바스크립트는 정적타입인가 동적타입인가?

동적 타입 언어와 정적 타입 언어

정적 타입 언어 특징

정적 타입 언어는 데이터 타입을 사전에 선언해야 한다.
변수의 타입을 변경할 수 없으며, 선언한 타입에 맞는 값만 할당할 수 있다.
컴파일 시점에 타입 체크를 수행하여 통과하지 못하면 에러를 발생시키고 프로그램 실행 자체를 막는다.

자바스크립트의 타입

자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정된다.
재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. -> 동적 타이핑

변수는 타입을 가질까?

기본적으로 변수는 타입을 갖지 않지만, 값이 타입을 가지기 때문에 현재 변수에 할당되어 있는 값에 의해 변수의 타입이 동적으로 결정된다.

동적 타입 언어와 변수

변수 값은 언제든지 변경될 수 있기 때문에 복잡한 프로그램에서는 변화하는 변수 값을 추적하기 어려울 수 있다.
값의 변경에 의해 변수의 타입도 언제든지 변경될 수 있기 때문에 동적 타입 언어의 변수는 값을 확인하기 전에 타입을 확신할 수 없다.
자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되기도 한다.
-> 동적 타입 언어는 유연성은 높지만 신뢰성은 떨어진다.

컴파일이란 개발자가 작성한 소스코드를 바이너리 코드로 변환하는 과정
빌드란 소스코드 파일을 실행가능한 소프트웨어 산출물로 만드는 일련의 과정

1109

this 바인딩

바인딩 식별자와 값을 연결하는 과정

this는 자신이 속한 객체 또는 자신이 생성할 가리키는 자기 참조 변수 this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩될 값이 동적으로 결정된다.

일반 함수로 호출된 모든 함수 내부의 this에는 전역 객체가 바인딩된다.
메서드로 호출된 함수 내부의 this에는 메서드를 호출한 객체가 바인딩된다.
생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩된다.
Function.prototype.call/apply/bind 메서드는 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩한다.

메서드 내에서 정의한 중첩 함수 또는 콜백 함수가 일반 함수로 호출될 때는 this가 전역 객체를 바인딩하는 것은 문제가 있다.
중첩 함수나 콜백 함수는 외부 함수를 돕는 헬퍼 함수의 역할을 하는데, 외부 함수인 메서드와 중첩 함수 또는 콜백 함수의 this가 일치하지 않는다.
이를 일치시키기 위해 두 가지 방법이 있다. Function.prototype.bind 메서드를 사용하거나, 화살표 함수를 사용한다.
call/apply 메서드의 대표적인 용도는 arguments 같은 유사 배열 객체에 배열 메서드를 사용하는 경우
bind 메서드의 대표적인 용도는 메서드 내부의 중첩 함수나 콜백 함수의 this가 불일치하는 문제를 해결

1110

서버사이드 렌더링과 클라이언트사이드 렌더링 차이

클라이언트 사이트 렌더링은 의미가 다양할 수 있지만 보통 브라우저에서 자바스크립트를 사용해 콘텐츠를 렌더링하는 것을 의미한다. 처음에 서버에서 index.html을 클라이언트에 보내주면 <body>안에는 id=”root”만 하나 들어있고 애플리케이션에서 필요한 자바스크립트의 링크만 들어가 있다. html은 비어져 있기 때문에 처음에 접속하면 빈 화면만 보이고 다시 링크된 자바스크립트 파일을 서버로부터 다운로드 받게 되는데, 여기에는 애플리케이션에서 필요한 로직들 뿐만 아니라 애플리케이션을 구동하는 프레임워크와 라이브러리 소스코드들도 다 포함이 되어 있다. 그래서 사이즈가 커서 다운로드 받는데도 시간이 걸린다. 추가로 필요한 데이터가 있다면 서버에 요청해서 데이터를 받아온 다음에 이것들을 기반으로 동적으로 html을 생성해서 사용자에게 최종적인 애플리케이션을 보여주게 된다.

서버 사이드 렌더링은 서버에서 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. 웹사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 html 파일을 만들게 되고, 만들어진 html 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에 보내주게 된다. 그러면 클라이언트 상에서는 잘 만들어진 html 문서를 받아와서 사용자에게 보여줄 수 있게 된다.

CSR은 초기 화면 로딩이 느리고, SEO가 취약할 수 있지만 초기 로딩 이후 빠른 웹사이트 렌더링이 가능하다. SSR은 초기 화면 로딩이 빠르고 모든 컨텐츠가 html 안에 담겨져 있기 때문에 SEO에 최적화되어 있지만 좋지 않은 사용자 경험을 제공할 수 있고 서버에 과부화가 걸리기 쉽다.

1111

알고리즘 수업

프로그래머스 카카오 Level3 - 합승 택시 요금

function solution(n, s, a, b, fares) {
  let answer = Number.MAX_SAFE_INTEGER;
  const dist = Array.from(Array(n + 1), () => Array(n + 1).fill(10000000));
  for (let i = 1; i <= n; i++) dist[i][i] = 0;

  for (const [a, b, c] of fares) {
    dist[a][b] = c;
    dist[b][a] = c;
  }

  for (let k = 1; k <= n; k++) {
    for (let i = 1; i <= n; i++) {
      for (let j = 1; j <= n; j++) {
        dist[i][j] = Math.min(dist[i][j], dist[i][k] + dist[k][j]);
      }
    }
  }

  for (let i = 1; i <= n; i++) {
    answer = Math.min(answer, dist[s][i] + dist[i][a] + dist[i][b]);
  }

  return answer;
}

간만에 플로이드 와샬 알고리즘에 대해서 복습할 수 있었다.
플로이드 와샬은 모든 최단 거리를 구할 때 사용하기 적합한 알고리즘이다.
입력 값이 500 이하이면 시도해볼 만 하고 300 이하이면 안전한 정도라고 한다.
모든 거리의 최단 비용을 구한 뒤, 합승 지점만 다르게 하여 최솟값을 구했다.

인덱스 트리

세 가지 방법의 시간 복잡도

일반 방식 - 값 변경 O(1), 구간 합 O(n)
누적합 방식 - 값 변경 O(n), 구간 합 O(1)
인덱스 트리 - 값 변경 O(lgn), 구간 합 O(lgn)
-> 즉 인덱스 트리는 특정 인덱스의 변경이 계속 일어날 수 있으면서 부분합을 계속해서 구해야할 때 사용한다.

const solution = (nums, order) => {
  const answer = [];
  const n = nums.length;
  let s = 1;

  while (s < n) {
    s *= 2;
  }

  const tree = Array(s * 2).fill(0);

  for (let i = 0; i < n; i++) {
    tree[s + i] = nums[i];
  }

  for (let i = s - 1; i > 0; i--) {
    tree[i] = tree[i * 2] + tree[i * 2 + 1];
  }

  const update = (idx, val) => {
    while (idx > 0) {
      tree[idx] += val;
      idx = Math.floor(idx / 2);
    }
  };

  const get = (s, e) => {
    let result = 0;
    while (s <= e) {
      if (s % 2 === 1) result += tree[s];
      if (e % 2 === 0) result += tree[e];

      s = Math.floor((s + 1) / 2);
      e = Math.floor((e - 1) / 2);
    }
    return result;
  };
  for (const [a, b, c] of order) {
    if (a === 1) {
      update(s + b - 1, c - tree[b + s - 1]);
    } else {
      answer.push(get(b + s - 1, c + s - 1));
    }
  }

  return answer;
};

트리의 인덱스 특성상 편리함을 위해 앞에 0을 추가해준다.
트리를 구성하기 위해 계산해야 하는 요소 개수를 통해 트리를 생성하고 남은 부분에는 0으로 채운다.
update 함수는 상위 인덱스를 찾아가면서 값을 변경한다.
get 함수는 s번 째 수부터 e번 째 수 까지의 합을 구한다.

1112

기술 모의면접 피드백

어제 봤던 기술 모의면접에서 부족하다고 들었던 부분들을 정리해보고, 몰랐던 내용은 작성하고 부족했던 부분은 어떻게 고칠 지 고민해보려고 한다.

자기소개에서 지망생, 학생이라는 표현을 사용했는데, 이 표현은 아마추어 같이 느껴지는 인상을 줄 수 있으므로 고칠 것
문장을 끝맺을 워딩을 잘못한 것 같다. 느끼고 있던 것이지만 아직 인성면접에 대한 준비가 많이 부족한 것 같다. 이 부분을 충족시키기 위해 연습을 많이 해야겠다.
크로스 브라우징과 프로토타입 체인에 대해서는 다시 살펴볼 것
생각보다 면접 질문 리스트에 있는 내용들 외의 질문들을 많이 받았는데, 위의 두 질문에 대해서는 확실하게 답하지 못한 것 같다. 이번 기회에 두 개념에 대해 확실히 정리하고 넘어가자
~같습니다라는 표현을 지양하자.
면접관님의 총평은 답변에 대한 정확도가 높아 위와 같은 표현을 지양하자는 것이었다. 이번 녹화 영상을 나도 다시 한 번 살펴봤는데, 내가 확실히 아는 것에 대해서도 불확실한 표현으로 자신감이 없어보이는 듯한 느낌을 주는 것 같았다. 지금부터 훈련하여 습관을 제대로 만들어야겠다.

총평

이외에도 눈알 돌리는 모습이라던지, 정면을 응시하는 측면에서 스스로 고쳐야 할 점들이 보였다. 그래도 예상치 못했던 질문들을 받은 것에 비해 선방했다고 생각한다. 면접 준비는 꾸준하게 해야겠다고 생각이 들었고, 인성 면접을 잘 준비하고 프로젝트에 관련한 질문들을 잘 대비해야할 것 같다.

크로스 브라우징

웹 규격에 맞는 코딩을 함으로써 어느 브라우저에서나 사이트가 제대로 보여지고 작동되도록 하는 기법

크로스 브라우징을 한 경험

PostCSS 플러그인 중 하나인 autoprefixer를 사용해서 -webkit-등의 prefix를 붙여줬다.
Babel을 사용해서 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환하였다.
Can I Use와 MDN을 참고해서 사용하려는 기능이 모든 브라우저에서 지원하는 기능인지 확인하며 크로스 브라우징을 한 경험이 있다.
css 속성에 readonly와 관련한 속성으로 :read-only와 [readonly]가 있다. 그러나 :read-only의 경우에는 IE에서는 작동이 되지 않기 떄문에 [readonly]를 통해 인터넷 익스플로어에서도 작동할 수 있도록 했다.

프로토타입과 프로토타입에서 상속을 구현하는 방법

프로토타입

자바스크립트에서는 프로토타입을 기반으로 상속을 구현한다.

생성자 함수가 생성할 모든 인스턴스가 공통적으로 사용할 프로퍼티나 메서드를 프로토타입에 미리 구현해 두면 인스턴스는 별도의 구현 없이 상위 객체인 프로토타입의 자산을 공유하여 사용할 수 있다.
프로토타입 객체는 생성자 함수가 평가되어 함수 객체를 생성하는 시점에 더불어 생성된다.
프로토타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다.
모든 객체는 [[prototype]]이라는 내부 슬롯을 가지며, 이 내부슬롯의 값은 프로토타입의 참조다.

프로토타입에서 상속을 구현하는 방법

JS는 객체의 프로퍼티에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다.
이를 프로토타입 체인이라 한다. 프로토타입 체인은 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 메커니즘이다.

Twitter Facebook LinkedIn

이정훈