기술면접

JavaScript

• Promise의 기능과 필요한 이유에 대해서 설명해주세요.

  Promise는 비동기 처리에 사용되는 객체이다. 비동기 처리란, 특정 코드의 연산이 끝나길 기다리지 않고 다음 코드를 처리한다. 장점으로는 요청에 결과가 반환되는 시간동안 다른 작업을 수행할 수 있다는 장점이 있다. 예로는 web Api, ajax, setTimeout 등이 있다. 서버에서 받아온 데이터를 원하는 순서대로 처리하고 싶을 때 사용한다. 그럼 callback함수를 쓰면 되지않냐는 생각을 할 수 있다. 물론 된다! 하지만, 콜백함수를 사용하면 코드가 복잡해지고 가독성이 떨어지기 때문이다.(콜백지옥) 이러한 단점을 promise의 then, catch로 보완하여 사용한다.

pending : 대기 - 비동기 처리 로직이 아직 완료되지 않은 상태
fulfilled : 이행 - 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
rejected : 실패 - 비동기 처리가 실패하거나 오류가 발생한 상태

• 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.

  순수 함수란 오직 동일한 인자에 대해서 항상 동일한 값을 리턴하고 함수 외부에 어떠한 영향을 미치지않는 함수이다. 이렇기 때문에 항상 같은 입력값을 이용해 처리하고
  같은 결과값을 반환하기 때문에 불변성을 유지할 수 있다. 만약 전달인자로 배열이나 객체와 같은 참조 자료형이 전달될 때 객체 자체가 바뀌는 사이드 이펙트가 발생 할 수 있다. 이를 해결하고자 형태(크기)를 유지하면서 내용을 변환하는 map filter reduce 메소드를 많이 사용된다.

React

• React의 state와 props에 대해서 설명해주세요.

  React에서 props와 state는 데이터를 다루는 개념이다. props는 단방향 데이터 흐름의 리액트에서 상위에서 하위로의 데이터 전달을 위해 사용되고, state는 컴포넌트 내부에서 관리되는 데이터의 상태를 의미한다. 간단하게 생각하면, props는 함수에 전달하는 매개변수, state는 함수 내부에 선언된 변수 정도로 볼 수 있다.

• React 컴포넌트의 key 속성에 대해서 설명해주세요.

  컴포넌트의 상태나 속성(prop)이 변할 때마다 render() 함수를 호출하게되는 데, render() 함수는 새로운 리액트 요소 트리를 반환하고 이를 기존의 요소 트리와 비교해 새로운 변경점에 대해서만 재렌더링을 수행하게 된다. 여기서 기존 요소들 뒤에 새로운 내용을 추가할 경우 새로운 부분에 대해서만 재렌더링 되지만 새로운 요소를 기존요소 앞에 추가할 경우 모든 부분이 재렌더링 됩니다. 바로 이런 상황을 최적화 하기 위해 key 속성을 사용합니다.
  각 요소에 key 속성을 부여하면 더 이상 모든 요소를 렌더링하지 않고 추가된 부분만 재렌더링 하는 효율적인 렌더링을 시도합니다.

• useEffect의 dependency array에 대해서 설명해주세요.

  useEffect란 컴포넌트 내에서 Side Effect를 실행항 수 있게 하는 Hook이다. useEffect를 사용할 때는 두 가지 인자가 필요하다. 첫 번째 인자에는 콜백 함수, 그리고 두번째 인자에는 배열을 받는데 이 배열을 바로 dependency array, 종속성 배열이라고 한다.useEffect는 화면이 처음 렌더링 될 때, 그리고 종속성 배열 안에 있는 value의 값이 바뀔 때마다 실행되게 된다. 만약 종속성 배열을 입력하지 않는다면 컴포넌트가 새롭게 렌더링 될 때 마다 useEffect 함수가 작동되게 되고, 빈 배열을 입력할 경우 첫 렌더링에 한 번만 실행된다.
  특정값이 업데이트 될 때 실행하게 하려면 검사하고 싶은 값을 넣어주면 된다.

HTTP/네트워크

• CSR과 SSR의 차이점에 대해서 설명해주세요.

  CSR은 Client Side Rendering의 약자이다. SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다.즉, 서버는 요청을 받으면 클라이언트에 HTML, CSS, JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다.
  SSR은 Server Side Rendering의 약자이다. 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이고, 필요한 부분의 HTML과 script를 보내준다.
  첫 페이지 로딩 시간은 CSR은 HTML, CSS와 모든 스크립트들을 한 번에 불러오기 때문에 첫 페이지 로딩시간이 상대적으로 길다. JS파일에는 애플리케이션을 구성하는 모든 소스코드가 들어있기 때문에 페이지를 구성하는 데까지 시간이 걸릴 수 밖에 없다. 반면 SSR은 필요한 부분의 HTML과 script만 불러오기 때문에 평균적으로 SSR이 더 빠르다.
  다음 페이지 로딩 시간은 반대이다. CSR은 이미 첫 페이지 로딩할 때 모든 파일을 받아왔기 때문에 SSR에 비해 상대적으로 빠르고 SSR은 첫 페이지 로딩한 것처럼 로딩하기 때문에 상대적으로 느리게 된다.

• GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.

  웹에서 정보나 리소스를 요청할 때는 HTTP프로토콜을 사용하며 요청의 목적에 따라 다른 HTTP 메서드를 사용합니다.
  GET 메서드는 특정 리소스를 수정하지 않고 조회하거나 받아와야 할 때 사용합니다.
  반면 POST 메서드는 특정 리소스를 추가할 때 주로 사용하며 GET메서드와는 다르게 추가할 내용을 담은 요청 body가 필요합니다. POST는 데이터를 추가하기 때문에 서버의 리소스에 영향을 줄 수 있으므로 처리시 신중해야 합니다.

웹서버 기초

• HTTP 메세지 구조에 대해 설명해주세요.

  HTTP 메시지의 구조는 크게 헤더와 바디로 나뉩니다. HTTP 메시지에는 요청과 응답 두 가지 유형이 있다. 먼저 헤더에는 start line과 HTTP headers가 있습니다. start line은 응답시 status line이라고도 하며 항상 첫번 째 줄에 위치하여 요청이나 응답의 상태를 나타낸다. HTTP headers에는 요청을 지정하거나, 메시지에 포함된 본문을 설명하고, 다음 헤더와 본문을 구분하는 빈 줄인 empty line이 있습니다. 마지막으로 body는 payload라고도 하며 요청 및 응답과 관련된 데이터, 문서를 포함합니다. 이 body는 선택적으로 사용합니다.

• Same-Origin Policy와 CORS에 대해서 설명해주세요.

  동일 출처 정책(Same-Origin Policy)은 웹 브라우저 보안을 위해 프로토콜, 호스트, 포트가 동일한 서버로만 ajax 요청을 주고 받을 수 있도록 한 정책이다. SOP와 CORS는 모두 브라우저의 보안 관련 정책이다.
  SOP, 동일 출처 정책은 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용 하는 것을 제한하는, 한마디로 “같은 출처의 리소스만 공유 가능하고, 동일한 출처로만 요청을 보낼 수 있다”는 정책이다.
  CORS란 cross-Origin 즉, 출처가 다른 도메인에서의 AJAX요청이라도 서버 단에서 데이터 접근 권한을 허용하는 정책