기술면접
재귀
Q. 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요.
A. 첫 번째는 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우입니다. 예시로는 피보나치 수열의 n번째 수는 n-1번째 수와 n-2번 째 수를 합한 값입니다. 몇 번째 수를 구하든 동일한 구조의 작은 문제로 나눌 수 있는 구조인 경우 재귀를 활용하면 간결한 코드로 문제를 해결할 수 있습니다.
두 번째는 중첩된 반복문이 많거나 반복문의 중첩 횟수를 예측하기 어려운 경우입니다. 예시로는 객체를 문자열로 바꾸는 함수가 있습니다. 객체는 배열이나 객체도 담을 수 있으며, 얼마나 중첩되어 있을지 예측하기 어렵기 때문에 반복문을 사용하기에는 적합하지 않습니다. 이럴 때 재귀를 활용하면 가장 깊은곳에 있는 배열이나 객체까지 확인할 수 있습니다.
UI/UX
Q. UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요.
A. UI는 사용자 인터페이스, 즉 사람들이 컴퓨터와 상호 작용하는 시스템을 의미합니다. 보통 UI라고 하면 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있지만 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미합니다.
UX는 사용자 경험으로 사용자가 어떤 시스템, 제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험입니다.
UX와 UI(User Interface) 디자인 모두 사용자를 위한 최상의 최종 제품을 제공하기 위함이라는 공통점이 있습니다. UX가 UI를 포함하는 개념이지만 그렇다고 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않습니다. UI와 UX는 서로 떼려야 뗄 수 없는 관계이며, 서로를 보완하는 역할을 한다.
Custom Component
Q. Styled Components를 사용해 보면서 느낀 장점을 이야기해 주세요.
A. Styled Components는 CSS 파일을 따로 작성할 필요 없이 컴포넌트 단위로 스타일 속성을 작성할 수 있게 해주는 라이브러리입니다.
장점으로는 첫째, CSS 파일을 쪼개서 관리할 필요가 없습니다. 앞서 말했듯 Styled Components를 사용하면 애초에 CSS 파일을 작
성할 필요가 없기 때문에 CSS 파일을 따로 분리해서 관리할 필요도 없습니다.
둘째, Styled Components는 컴포넌트 단위로 스타일 속성을 작성하기 때문에 다른 컴포넌트에 작성한 CSS와 속성이 겹치지 않습니다.
셋째, class, id 이름을 크게 고민하지 않아도 됩니다. CSS 파일을 따로 작성해야 할 때에는 스타일을 적용할 요소를 특정하기 위해서 class와 id를 작성해야 했지만 Styled Components를 사용하면 CSS 코드가 작성된 컴포넌트가 곧 스타일을 적용할 컴포넌트이기 때문에 class와 id를 사용해서 요소를 특정하지 않아도 됩니다.
Q. useRef가 필요한 상황을 예시를 들어 설명해 주세요.
A. useRef는 특정 요소의 DOM 주소값을 가져오는 React Hook입니다. React는 DOM에 직접 접근하는 것을 금지하고 있는데요. React는 가상 DOM을 사용해서 SPA를 구현하기 때문에, DOM을 직접 조작하는 것은 React의 작동 방식과도 맞지 않습니다.
그럼에도 DOM에 직접 접근해야하는 예외 상황들이 있습니다. 바로 DOM 엘리먼트의 주소값을 활용해야 하는 경우로, 대표적인 예로 컴포넌트에 focus를 위치시킬 필요가 있는 상황이 있습니다. useRef로 객체를 생성하고 원하는 DOM에 ref객체를 넣어주면 ref.current가 해당 DOM을 가리키게되고 current를 사용해 DOM을 직접 조작 하는 것 입니다.
Redux
상태관리 라이브러리의 필요성에 대해서 설명해 주세요.
A. Redux와 같은 상태관리 라이브러리는 전역에서 상태 저장소를 제공해줍니다.
기존의 React는 단반향적 데이터 흐름을 갖고 있어 자식 컴포넌트에 props를 내려줘서 상태를 전달합니다. 이 경우 원하는 하위 컴포넌트에 상태를 전달하기 위해선 그 사이에 있는 해당 상태를 필요치 않는 컴포넌트들도 상태를 받아야하고 이를 props drilling이라고 합니다.
상태 관리 라이브러리는 전역 상태 저장소를 제공해줌으로써 props를 내려줄 필요 없이 전역에서 상태에 접근이 가능하기 때문에 props drilling문제를 해결해 줍니다.
Redux의 주요 개념들과 연결 관계를 설명해 주세요.
A. Redux의 주요 개념으로는 Action, Dispatch, Reducer, Store가 있으며, Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다.
Action은 말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체로 어떤 동작을 하는지 명시해주는 type 속성을 가집니다.
Dispatch는 Reducer로 Action을 전달해주는 함수입니다. Dispatch의 전달인자로 Action 객체가 전달되며 Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출합니다.
Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수로, Reducer가 리턴하는 값이 새로운 상태가 됩니다. 이 때, Reducer는 순수함수여야 합니다. 외부 요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야하기 때문입니다.
Store는 Redux의 전역 저장소로, Redux 앱의 state가 저장되어 있는 오직 하나뿐인 저장소의 역할을 합니다.
웹 표준 & 웹 접근성
Semantic HTML의 필요성을 예시를 들어 설명해 주세요.
A. 시맨틱 HTML은 웹 페이지에 의미와 구조를 전달하기 위해 HTML 마크업을 사용하는 것을 말합니다. 단순히 디자인과 레이아웃 목적으로만 HTML을 사용하는 것이 아니라, 의미와 목적을 반영하는 HTML 요소를 사용하는 것을 의미합니다.
div와 span 태그 두 가지 요소만 알아도 충분히 화면의 구조를 만들 수 있지만, 두 요소의 이름에는 의미가 없기 때문에 각 요소가 어떤 역할을 하는지 알 수 없습니다. 시맨틱 요소를 사용하면 직관적으로 해당 요소가 어떤 역할을 하는지, 요소가 가진 의미를 통해 파악할 수 있습니다.
이는 웹 접근성에도 큰 도움을 주는데요. 예로, 시각 장애인이 사용하는 스크린 리더가 있습니다. 스크린 리더는 HTML 문서를 읽어내려가며, 각 요소들의 내용을 음성으로 알려줘 시각 장애인도 문제없이 모든 정보에 접근할 수 있도록 도와줍니다.
그외에도 시맨틱한 HTML을 작성하면 유지보수가 용이하고, 검색 효율성 증가 효과를 볼 수 있습니다.
네트워크 심화
IP 프로토콜의 한계에 대해서 설명해 주세요.
A. IP 프로토콜은 두 사용자가 패킷 교환 방식으로 정보를 주고 받을 때 사용하는 통신 규약입니다.
IP 프로토콜의 한계로는 비연결성, 비신뢰성이 있습니다. 인터넷 프로토콜(IP)는 패킷 단위로 통신하며, IP 패킷은 소포처럼 출발지 IP 주소, 목적지 IP 주소 정보를 포함하고 있습니다. 패킷은 한 번 전송되면 목적지에 도착할 때까지 인터넷 망의 수 많은 노드를 지나게 됩니다. 이 때, 패킷을 받을 대상이 없거나 서비스 불능 상태여도 클라이언트는 서버의 상태를 파악할 방법이 없기 때문에 패킷을 그대로 전송하게 됩니다. 이걸 비연결성이라고 합니다. 또한 데이터를 전달하던 중 장애가 생겨 패킷이 중간에 소실되더라도 클라이언트는 이를 파악할 방법이 없습니다. 목적지에서도 패킷의 순서가 바뀌거나 소실된 상태로 도착할 수 있습니다. 이걸 비신뢰성이라고 합니다.
HTTP 프로토콜의 특징에 대해 설명해 주세요.
A. HTTP는 클라이언트가 서버에 요청을 보내면 서버는 그에 대한 응답을 보내는 클라이언트 서버 구조로 이루어져 있으며, 무상태성, 비연결성이라는 특징을 갖습니다.
무상태성은 서버가 클라이언트의 상태를 기억하지 않는다는 뜻입니다. 즉, 상태 기억의 주체가 클라이언트가 된다는 말이며, 중간에 요청을 처리하는 서버가 바뀌어도 클라이언트가 상태를 잘 담아서 요청을 보내면 응답을 제대로 받을 수 있습니다. 서버가 바뀌어도 응답에 문제가 없다는 뜻은, 필요에 따라 서버를 무한히 증설할 수 있다는 의미입니다. 즉, 무상태성이라는 특성 덕에 서버의 무한한 증설이 가능해집니다.
비연결성은 요청과 응답을 주고 받은 후에 서버와의 연결을 끊는 것을 의미합니다. 서버와의 연결을 지속하지 않고 필요할 때에만 연결하기 때문에 최소한의 자원만 사용하게 된다는 장점이 있습니다. 하지만 HTTP 1.0 버전은 여러 요청을 보내야 할 때에도 매 요청마다 서버 연결과 종료를 반복하는 비효율성이 발생한다는 한계가 있습니다. 이러한 한계점을 HTTP 1.1 버전에서는 지속 연결을 활용해서 해결합니다.
인증 / 보안
Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해 주세요.
A. Cookie는 HTTP 프로토콜의 비상태성을 보완하기 위한 수단으로,
브라우저에 데이터를 저장할 때 사용합니다. MaxAge, Expires는 이런 쿠키의 생명주기를 결정하는 옵션입니다. MaxAge는 얼마동안 유지할 것 인지 하고, Expires는 만료되는 시간 설정합니다.
MaxAge, Expires 옵션이 지정되어있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 삭제됩니다. 이런 쿠키를 "세션 쿠키(session cookie)"라고 부르고, MaxAge나 Expires 옵션을 통해 설정한 기간만큼 사용가능한 쿠키를 Persistent Cookie(영속성 쿠키)라고 합니다.
