Section 3. [기술 면접]

𝟭. 재귀

Q. 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요.

A. 주어진 문제를 비슷한 구조의 작은 문제로 나눌 수 있는 경우와 중첩된 반복문이 많거나 반복문의 반복 횟수를 예측하기 어려운 경우 입니다.

대표적인 예시로는 피보나치 수열, 팩토리얼 구하기 등이 있습니다. 피보나치 수열로 예를 들어보자면, 피보나치 수열의 n번째 수는 n-2번째 수와 n-1번째 수를 합한 값이므로 몇 번째 값을 구하든지 동일한 구조로 구할 수 있으므로 작은 문제로 나누어 구현할 수 있습니다.

 

𝟮. UI/UX

Q. UI, UX의 개념과 두 개념의 관계에 대해서 설명해주세요.

A. UI는 사람들이 컴퓨터와 상호작용하는 시스템을 의미하며, 키보드, 마우스 등 물리적인 요소도 UI로 볼 수 있으나, 프론트엔드 개발자에게 UI란 보통 화면상의 그래픽 요소인 GUI를 의미합니다.

UX는 사용자가 어떤 시스템이나 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총제적인 경험을 의미합니다. 제품이나 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등과 관련된 모든 경험을 말합니다.

UX는 UI를 포함하고 있으며, 둘은 서로 뗼 수 없는 관계로 서로를 보완하는 역할을 합니다. 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않습니다. 하지만 나쁜 UI는 보통 나쁜 UX를 유발합니다.

 

𝟯. Custom Component

Q. Styled Components를 사용해보면서 느낀 장점을 이야기해주세요.

A. 첫번째로, Styled Components는 js파일에 CSS를 작성할 수 있게 함으로써 불필요한 파일 생성을 막아줍니다. 때문에 CSS을 따로 관리할 필요가 없습니다.

두번째로, id나 class이름을 직접 작성할 필요가 없기 때문에 id나 class명이 겹치거나 오타가 나는 상황도 사전에 방지할 수 있습니다.

세번째로, react에서는 props를 활용해서 동적 스타일링을 편하게 구현할 수 있습니다.

 

Q. useRef가 필요한 상황을 예시를 들어 설명해주세요.

A. useRef가 필요한 상황은 크게 2가지가 있습니다. 첫번째는 저장공간으로 사용하는 경우입니다. useState는 리렌더링이 일어나기 때문에 변수 값이 초기화되는 반면, useRef는 리렌더링을 하지 않기 때문에 변수의 값이 유지됩니다. 예를 들어 새로운 데이터를 추가하고 싶을 때 key값을 id로 준다면, id 변수는 리렌더링이 되어도 초기화되지 않고 데이터가 추가될 때 마다 1씩 증가해야 합니다. 이럴 때 id를 useRef를 사용해서 선언합니다.

두번째는 DOM 요소에 접근해야 하는 경우입니다. React에서는 querySelector를 사용해서 DOM 요소에 직접적으로 접근하는 것이 불가능하기 때문에 useRef를 사용해야 합니다. 예를 들어 input 엘리먼트에 focus를 주고 싶을 때 useRef에 변수를 선언하고, input요소에 ref 값을 준다면 current.focus() 메서드를 통해 구현할 수 있습니다.

 

𝟰. Redux

Q. 상태관리 라이브러리의 필요성에 대해서 설명해주세요.

A. 리액트에서 상태는 state를 의미하며, state는 오로지 자식 컴포넌트에게만 전달해줄 수 있습니다. 자식의 자식의 자식 이렇게 계속 이어서 state를 전달해주게 되면 상태 관리가 굉장히 복잡해집니다. 또한 그 state가 필요없는 컴포넌트에게도 전달하게 되는 문제가 발생하며, 이를 props Drilling Issue라고 합니다. 이 문제를 해결하기 위해서 상태관리 라이브러리가 등장했으며, state를 전역 변수처럼 만들어서 어떤 컴포넌트든지 바로 필요한 state에 접근이 가능하게 됩니다. 리액트의 대표적인 상태관리 라이브러리에는 Redux가 있습니다.

 

Q. Redux의 주요 개념들과 연결 관계를 설명해주세요.

A. Redux의 주요 개념에는 Action, Dispatch, Reducer, Store가 있으며 Action -> Dispatch -> Reducer -> Store 순서로 데이터가 단방향으로 흐르게 됩니다.

Action은 어떤 액션을 취할 것인지 정의해 놓은 객체로, 해당 Action 객체가 어떤 동작을 하는지 명시해주는 type 속성을 가집니다.

Dispatch는 Reducer로 Action을 전달해주는 함수입니다. Action 객체를 전달받은 Dispatch는 Reducer를 호출합니다.

Reducer는 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수로, Reducer가 반환하는 값이 상태의 새로운 값이 됩니다.

이때, Reducer는 순수함수여야 합니다.

Store는 전역 저장소로, state가 저장되어 있는 저장소 역할을 합니다.

 

𝟱. 웹 표준 & 웹 접근성

Q. Semantic HTML의 필요성을 예시를 들어 설명해주세요.

A. Semantic HTML은 구조를 만드는 것을 넘어서 의미를 가지고 있습니다. 시맨틱 요소에는 header, main, nav, footer, section 등이 있으며 각자가 의미하는 것이 다릅니다. 화면의 구조를 담당하는 div와 span 태그는 이름에 의미가 따로 없기 때문에 요소만 봤을 때는 어떤 역할을 하는지 알 수 없습니다. 하지만 시맨틱 태그를 사용한다면 요소의 이름만 보고도 어떤 역할을 하는 지 알 수 있습니다. 예를 들어, 각 탭을 누르면 특정 페이지로 가게 하는 요소가 있을때, 이 요소의 태그를 nav로 준다면 이 서비스를 개발하지 않은 제3의 개발자가 봤을때 이름만 보고도 요소가 메뉴를 의미하는 것을 알 수 있습니다. 이처럼 시맨틱 HTML을 작성하면 개발자간 소통을 원활하게 해줍니다.

또한 검색 엔진은 HTML 코드를 보고 문서의 구조를 파악하기 때문에 시맨틱 요소를 사용해서 HTML에 의미를 부여하는 것만으로도 검색 효율성을 높일 수 있습니다. 

 

𝟲. 네트워크 심화

Q. IP 프로토콜의 한계에 대해서 설명해주세요.

A. IP 프로토콜은 지정한 IP 주소에 패킷이라는 통신단위로 데이터를 전달하는 통신 규약을 말하며,  IP프로토콜의 한계에는 크게 비연결성과 비신뢰성이 있습니다. 

첫번째로 비연결성은 패킷을 받을 대상이 없거나, 불능 상태여도 클라이언트가 서버의 상태를 파악할 수 없기 때문에 패킷을 그대로 전송하는 것을 말합니다.

두번째로 비신뢰성은 중간에 패킷이 사라져도 클라이언트가 이를 파악할 방법이 없으며, 패킷들이 중간에 서로 다른 노드를 통해 전달될 수 있기 때문에 패킷의 순서를 보장할 수 없는 것을 말합니다.

 

Q. HTTP 프로토콜의 특징에 대해 설명해주세요.

A. HTTP는 인터넷에서 데이터를 주고 받을 수 있는 프로토콜로, 크게 4가지 특징을 가지고 있습니다. 첫번째는 클라이언트와 서버 구조로 이루어져 있다는 것이고, 두번째는 무상태성, 세번째는 비연결성입니다. 마지막으로는 단순하고 확장이 가능하다는 것입니다.

HTTP의 클라이언트와 서버 구조에서 서버와 클라이언트는 각각 독립되어 있으며, 클라이언트는 서버에게 요청을 보내고 서버는 요청에 대한 결과를 만들어 응답합니다. 

이때, 서버가 클라이언트의 상태를 저장하지 않으며, 요청에 대한 응답을 받으면 바로 연결을 종료합니다. 이를 각각 무상태성과 비연결성이라고 합니다.

HTTP 프로토콜은 이렇게 단순한 과정을 거치면서도 확장이 가능하기 때문에 지금의 수준까지 성장할 수 있었습니다.

 

𝟳. 인증 / 보안

Q. Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.

A. Cookie는 HTTP 프로토콜의 비상태성을 보완하기 위한 수단으로, 브라우저에 데이터를 저장할 때 사용합니다. MaxAge와 Expires 옵션은 모두 쿠키의 생명주기를 설정하는 옵션으로, MaxAge 옵션은 쿠키를 얼마나 유지할 것인지, Expires 옵션은 쿠키를 언제 폐기할 것인지 설정하는 옵션입니다. MaxAge는 쿠기가 삭제되는 시간을 초 단위로 설정하고, Expires는 만료 일자로 설정합니다. 두 옵션을 동시에 설정하면 MaxAge가 더 높은 우선순위로 적용되며, 두 옵션을 모두 설정하지 않으면 그 쿠키는 브라우저가 종료될 때 폐기 됩니다. 때문에 쿠키를 계속 사용하고 싶다면 두 옵션 중 하나라도 설정해주는 것이 좋습니다.

브라우저를 종료하면 삭제되는 임시 쿠키를 세션 쿠키라고 하고, 설정한 옵션만큼 사용가능한 쿠키를 영속성 쿠키라고 부릅니다.

 

HTTP 프로토콜의 비상태성 : 이전에 보냈던 요청을 기억하지 못하는 것