S2. 기술면접 연습하기

이번 포스트에서는 Section 2가 끝나고 배운 내용을 토대로 기술면접을 연습했습니다.

기술 면접 연습 방법

1. 질문 한 문장으로 답하기
2. 관련 핵심 키워드 찾기
3. 키워드를 토대로 한 문장에 살 붙이기
4. 예상 꼬리 질문 파악하기
5. 카메라 보고 연습하기

지난번과는 다르게 연습과정을 생략하고, 모든 질문에 대한 답변리스트만 작성하였습니다.

Section2 예상 질문 리스트

JavaScript

• Promise의 기능과 필요한 이유에 대해서 설명해주세요.
• 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.

React

• React의 state와 props에 대해서 설명해주세요.
• React 컴포넌트의 key 속성에 대해서 설명해주세요.
• useEffect의 dependency array에 대해서 설명해주세요.

HTTP/네트워크

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

웹서버 기초

• HTTP 메세지 구조에 대해 설명해주세요.
• Same-Origin Policy와 CORS에 대해서 설명해주세요.

Section 2 예상 질문 답변 리스트

JavaScript

► Promise의 기능과 필요한 이유에 대해서 설명해주세요.
promise는 비동기 메서드를 동기적으로 사용할 수 있도록 이름 그대로 '미래 시점에 값을 처리하겠다는 약속'을 반환하는 기능입니다. 즉, 약속인 promise객체를 반환하며 이 값을 then, catch 등으로 연결(체이닝)하여 결과 값, 실패 등을 처리할 수 있습니다.
프로미스에는 new키워드로 생성하며 대기, 이행, 거부 이렇게 3가지 상태가 있습니다. 연산이 성공하면 이행, 실패하면 거부라고 하며 대기를 벗어나 이행 또는 거부되었을 경우 처리되었다고 합니다.
이 Promise가 필요한 이유는, 웹개발에서 비동기 메서드를 사용하면서 동기적으로 작업을 처리해야할 때 유용하기 때문입니다.
비동기는 웹개발에서 중요하지만 원하는 작업을 동기적으로 해주어야 할 때가 있습니다. 이 때 콜백함수를 사용하거나 promise를 사용하면 해결할 수 있습니다. 그런데 콜백함수를 사용하면 잦은 중첩으로 일명 콜백헬(collback-hell)이 발생하지만 promise를 사용하면 이를 해결할 수 있고 promise의 기능을 이용해 보다 효과적으로 동기적 메서드를 사용할 수 있습니다.

► 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.
순수 함수(Pure Function)란 함수의 입력에 따라 같은 결과가 나오며 함수 내부에서만 영향을 주는 함수를 의미합니다. 때문에 만약 반대로 입력 외의 값이 함수 결과에 영향을 미치거나, 부수 효과를 발생시킨다면 순수함수라고 할 수 없습니다.
여기서 부수 효과(Side Effect)란 함수 내부의 구현이 함수 외부에 영향을 주는 경우를 의미합니다.

• 정리하자면 순수 함수는

  • 함수의 결과가 함수의 입력이 아닌 다른 값에 영향을 받지 않는, 불변성을 가지며
  • 입력으로 전달된 값을 수정하지 않습니다.
  • 그래서 전달인자가 일정하면 항상 똑같은 결과가 리턴되는, 예측가능성을 가지고 있습니다.

• 예시

  • Math.random()은 순수 함수가 아닙니다. 입력은 같아도 결과가 항상 다르기 때문입니다.
  • 타이머, 네트워크 요청, localstorage 사용은 순수 함수가 아닙니다. 부수효과를 발생시키기 때문입니다.
  • React에서 함수 컴포넌트는 순수 함수입니다. 입력은 props, 출력은 JSX element로 부수 효과가 발생하지 않기 때문입니다.
  • 만약 fetch처럼 React와 관련없는 API를 사용하면 React에서는 순수함수라고 하지 않습니다.

React

► React의 state와 props에 대해서 설명해주세요.
state는 컴포넌트를 사용하는 동안 컴포넌트 내부에서 변하는 값으로 말 그대로 (지정한) 상태를 의미합니다.
체크 여부 확인, input 입력값 받기, 토글 이벤트 처럼 보통 이벤트나 함수에 의해 변경되어야 하거나 사용해야 하는 변수를 state로 선언합니다.
state는 useState를 사용해 state변수, state변경함수를 선언하고, 초기값을 지정하여 사용합니다. 선언한 변수는 오직 같이 선언했던 state변경 함수만 사용해서 변경할 수 있으며 그 외의 방법으로 재할당할 수는 없습니다. 그리고 함수가 끝나도 이 선언한 state는 사용할 수 있으며 하위 컴포넌트에서 props로 함수를 전달받았다면 state 끌어올리기도 가능합니다.
props는 외부로부터 전달받은 값으로 해당 컴포넌트의 속성(property)을 뜻합니다.
이 props는 외부, 보통 상위 컴포넌트(부모 컴포넌트)에서 속성과 속성값으로 하위 컴포넌트에 전달됩니다. 전달받은 컴포넌트에서는 이 props를 전달인자로 받아오며 이 props는 객체형태입니다. 부모 컴포넌트에서 전달한 속성명이 키, 속성값이 값으로 객체에 할당되어 있습니다. 이렇게 받아온 props 데이터는 컴포넌트에서 활용할 수 있습니다.
이렇게 props를 이용해 상위 상위컴포넌트에서 하위 컴포넌트로 데이터를 전달하기 때문에 이를 하향식(top-down), 단방향 데이터 흐름(one-way data flow)이라고 하며 이는 리액트의 큰 특징 중 하나입니다.
state와 props개념이 많이 헷갈릴 수 있는데요, props는 한 번 할당되면 변하지 않는 값인 반면 state는 계속 변하는 값이라는 차이가 있습니다. 또한 props의 값은 외부컴포넌트에서 그 값을 전달해주지만, state의 값은 내부컴포넌트에서 그 값을 설정합니다.

► React 컴포넌트의 key 속성에 대해서 설명해주세요.
리액트는 JSX를 가지고 컴포넌트를 만들며 자바스크립트와 다르게 몇가지 지켜야할 규칙이 있는데요, 그 중 하나가 key 속성입니다.
리액트에서는 동일한 형태의 여러 HTML엘리먼트를 표현하기 위해서 map()을 사용합니다. 이 때 이 컴포넌트들을 정상적으로 렌더링하기 위해서는 각 요소의 고유한 속성이 필요한데 그것이 key 속성입니다. 때문에 map() 메서드를 사용할 때는 반드시 key 속성을 사용해야 합니다.
이 key 속성의 값은 반드시 변하지 않고, 예상 가능하며, 유일해야 합니다. 그래서 주로 데이터의 ID값을 사용하며 랜덤으로 발생하거나 변하는 값은 사용해서는 안됩니다.

► useEffect의 dependency array에 대해서 설명해주세요.
useEffect를 사용할 때 두가지 인자가 있으며 첫번째 인자에는 함수, 두번째 인자에는 배열, 즉 종속성 배열이 들어갑니다.
이 종속성 배열은 dependency array라고도 하며, 이 배열 안에는 변경이 되는 값이 요소로 들어가며 이 요소를 조건이라고 합니다.
이 dependency array에 어떤 값이 들어가냐에 따라 첫번째 인자인 함수의 실행 조건이 달라지는데요, 크게 3가지가 있습니다.
첫째, dependency array를 아예 생략한다면 useEffect의 함수는 컴포넌트가 새롭게 렌더링될 때마다 실행됩니다.
두번째, dependency array에 아무런 요소가 없을 경우 함수가 한번만 실행됩니다. 주로 API를 통해 리소스를 응답받고 더 이상 API 호출이 필요하지 않을 때 사용합니다.
세번째, dependency array에 요소가 있다면, 그 요소가 조건이 되어 요소의 값이 변할 때마다 함수가 실행됩니다. 이 요소는 2개 이상이 있을수도 있습니다.

(필요시 답변) 컴포넌트가 렌더링 될 때는 언제인가?

• 첫 화면에 컴포넌트가 생성된 후
• 컴포넌트에 새로운 props가 전달될 때
• 컴포넌트에 상태(state)가 바뀔 때

HTTP/네트워크

► CSR과 SSR의 차이점에 대해서 설명해주세요.
웹 페이지를 클라이언트와 서버 중 어디서 렌더링하느냐에 따라 SSR과 CSR로 나뉩니다.
SSR은 Server Side Rendering으로 말 그대로 웹 페이지를 서버에서 렌더링합니다. 만약 서버로 요청이 들어오면 서버는 데이터를 불러와 웹 페이지를 완전히 렌더링 된 페이지로 변환 후 클라이언트에 응답을 보냅니다.
CSR은 Client Side Rendering으로 클라이언트에서 웹 페이지를 렌더링합니다. 만약 서버로 요청이 들어오면 SSR과 다르게 완성된 웹 페이지가 아니라 뼈대가 되는 단일 페이지(Single Page)와 자바스크립트 파일을 응답으로 보냅니다. 응답을 받은 후 브라우저에서 이 단일 페이지와 JS 파일로 웹 페이지를 렌더링합니다.
SSR, CSR의 차이점은 말씀드린 대로 페이지가 렌더링되는 위치에 가장 큰 차이가 있습니다. 이 차이 때문에 사용자가 웹 페이지에 요청을 보낼 때 SSR은 매번 서버로 요청을 보내며 이동시 페이지의 새로고침이 발생하지만, CSR은 서버로 요청을 보내지않고 클라이언트에서 처리하기 때문에 페이지의 새로고침이 발생하지 않습니다.

► 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라고도 하며 요청 및 응답과 관련된 데이터, 문서를 포함합니다. 이 바디는 선택적으로 사용합니다.

► Same-Origin Policy와 CORS에 대해서 설명해주세요.
SOP(Same-Origin Policy)란 동일 출처 정책, 즉 같은 '출처'의 리소스만 공유가 가능하다는 의미입니다.
여기서 출처란 URL의 프로토콜, 호스트, 포트를 의미하며 이 중에 하나라도 다르면 같은 출처라고 할 수 없습니다.
이 SOP가 있어서 서버에서 해킹의 위협을 받을 수 있는 경로를 줄일 수 있고 다른 사이트와의 리소스 공유를 제한하므로 모든 브라우저에서 기본적으로 사용하고 있는 정책입니다.
그런데 만약 이 상황에서 만약 다른 출처의 리소스를 받와야 할 때는 CORS를 사용해야 합니다.
CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유로, 한 출처의 웹 앱이 다른 출처의 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 역할을 합니다.
그래서 다른 출처로 요청할 때 브라우저는 실제 리소스를 요청하지 않고 먼저 프리플라이트 요청을 통해 접근 권한을 확인합니다. 이 때 만약 CORS에 접근권한을 얻지 못하고 리소스 요청을 하면 콘솔에 에러가 뜹니다.
이 때는 서버에서 CORS 설정을 통해 서버의 응답 헤더에 ‘Access-Control-Allow-Origin’을 작성하면 브라우저는 접근 권한을 얻을 수 있게 됩니다.

자가 점검 리스트

질문 이해
질문을 잘 이해했는가?
질문에 대한 답변이 맞는 내용인가?
개념 설명에 맞는 예시였는가?

답변 명확성
이해하기 쉬운 답변인가?
개념 설명이 간단 명료한가?
불명확하게 설명한 부분이 없었는가?
정확한 CS용어를 사용했는가?

자연스러움
개념 설명, 예시가 인위적이지 않았는가?
모르는 부분은 솔직하게 인정했는가?
자세와 표정이 어색하지 않은가?