재귀
Q. 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요.
A.
주어진 문제를 비슷한 구조의 더 작은 문제로 나누는 경우나, 중첩된 반복문이 많거나 그 중첩횟수를 예측하기 어려운 경우에 사용합니다. 예를들면 마트료시카인형처럼 객체안에 객체 패턴이 얼마나 많은지 알기 위해 사용할 수 있습니다.
UI/UX
Q. UI, UX의 개념과 두 개념의 관계에 대해서 설명해주세요.
A. UI는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미합니다. 모니터 스크린속 그래픽요소들 뿐만 아니라 마우스와 키보드같은 물리적 요소도 포함됩니다. UX는 사용자가 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험입니다. 총체적 경험은 서비스에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을 의미합니다. UX는 UI를 포함합니다. 또한 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않습니다. 하지만, 나쁜 UI는 보통 나쁜 UX를 유발합니다.
Custom Component
Q. Styled Components를 사용해보면서 느낀 장점을 이야기해주세요.
A. 클래스 네임을 중복해서 사용 시 생기는 버그 방지, 구조적으로 컴포넌트와 스타일이 묶여 있어 관리하기 용이합니다.
더 나아가 React를 이용한 웹 개발은 통상적으로 컴포넌트들을 만들고 그것들을 조합하여 하나의 웹 페이지를 구상하는데, 일반적으로 CSS파일을 따로 만들어서 import하는 개발 방법이 말씀드린 Component 방식으로 개발하는 것과는 어울리지 않다라는 생각이 들었습니다. Styled-components를 이용해서 리액트 친화적인 개발을 할 수 있는게 큰 장점이라 생각합니다.
Q. useRef가 필요한 상황을 예시를 들어 설명해주세요.
A. 인풋박스에서 이벤트가 발생하여 focus를 사용할 때 useRef hook을 사용하여 이벤트의 근원지 DOM주소를 조작할 수 있습니다.
Redux
Q. 상태관리 라이브러리의 필요성에 대해서 설명해주세요.
A. 컴포넌트간 데이터를 전달시켜줄 때 props를 사용하여 보냈지만, 전달하는 용도로만 사용하는 컴포넌트들을 거치면서, 코드 가독성이 심하게 떨어지고 유지보수 또한 어려워집니다. 이를 해결하기 위해 상태관리 라이브러리를 사용하여, 전역 상태를 관리하여 해결할 수 있습니다.
Q. Redux의 주요 개념들과 연결 관계를 설명해주세요.
A. Redux는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 된다.
- 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다.
- 이 Action 객체는 Dispatch 함수의 인자로 전달된다.
- Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다.
- Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경한다.
- 상태가 변경되면, React는 화면을 다시 렌더링 한다.
웹 표준 & 웹 접근성
Q. Semantic HTML의 필요성을 예시를 들어 설명해주세요.
A. 의미있는 html tag를 사용하면 개발자간 소통이 보다 원활해집니다. semantic하게 작성된 html을 읽을 때 그렇지 않은 html보다 훨씬 더 이해가 빠르고, id와 class를 사용해서 일일히 표기하면, 각 요소의 기능을 정의하느라 비용(시간)이 든다.
네트워크 심화
Q. IP 프로토콜의 한계에 대해서 설명해주세요.
A. IP의 한계로는 비연결성과 비신뢰성이 있습니다.
패킷을 받을 대상이 없어도 이를 인지하지 못하여 그대로 패킷을 전송합니다. 그리고 중간에 패킷이 사라져도 클라이언트는 확인할 방법이 없습니다. 쪼개진 패킷으로 전달하게 될 경우 서로 다른 노드를 통해 전달될 수 있어, 의도와 다른 순서대로 도착할 수 있습니다.
Q. HTTP 프로토콜의 특징에 대해 설명해주세요.
A. 서버에 대한 요청과 서버가 클라이언트에게 하는 응답이 있습니다. 비상태성이라 요청이 증가해도 서버를 투입하여 처리할 수 있습니다. 하지만 상태정보를 요구하는 기능을 활용할 수 없어 이는 쿠키나 세션을 통해서 처리합니다. 비연결성이라 최소한의 작업으로 요청을 처리합니다. 하지만 큰 규모의 서비스를 운영할 때에는 연결을 반복하는 게 비효율적이라, 헤더에 keep-alive라는 옵션을 추가하여 연결을 지속시킬 수 있습니다.
인증 / 보안
Q. Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.
A. expires/max-age 는 쿠키의 만료 시간을 정해줍니다. 이 옵션이 없으면 브라우저가 닫힐 때 쿠키도 같이 삭제되는데 이런 쿠키를 세션 쿠키라고 하고, 옵션이 설정되어 브라우저가 닫혀도 옵션만큼 사용가능한 쿠키를 영속성 쿠키라고 합니다.
