재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요.
- 재귀란 특정 조건을 만족하면 자기 자신을 호출하는 함수를 의미합니다.
JSON 형식의 데이터를 파싱하거나 분할정복과 같은 알고리즘을 구현할때 반복문을 사용한다면 얼마나 반복하게 될지 알 수 없고, 코드가 굉장히 복잡해질 수 있습니다. 따라서 이러한 경우에 재귀를 사용한다면 효율적으로 연산을 할 수 있게 됩니다.
반대로 재귀는 메모리를 많이 차지하여 스택오버플로우가 발생할 수 있고, 재귀의 흐름을 파악하기 어려워 코드의 가독성이 떨어진다는 단점도 있습니다.
UI, UX의 개념과 두 개념의 관계에 대해서 설명해주세요.
- UI는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미하고, UX는 사용자가 어떠한 서비스를 이용하면서 느끼고 생각하는 총체적 경험을 의미합니다.
UI는 UX에 포함되는 개념이긴 하지만, 좋은 UX가 좋은 UI를 보장하지는 않습니다.
하지만 UX를 보완하다가 UI의 개선점을 찾아낼 수 있고, 반대로 UI를 개션함으로써 UX가 좋아지기도 합니다.
따라서 UI와 UX는 서로를 보완하는 역할을 하는 관계라고 볼 수 있습니다.
Styled Components를 사용해보면서 느낀 장점을 이야기해주세요.
- 리액트의 컴포넌트 단위로 개발하는 방식처럼 CSS도 컴포넌트화를 시켜줄 수 있다는 점이 가장 큰 장점이라고 생각합니다. 해당되는 컴포넌트에만 스타일이 지정되기 때문에 className 이나 style이 중복될 걱정을 하지 않아도 되고 props에 접근하여 동적으로 스타일링을 할 수 있었습니다.
useRef가 필요한 상황을 예시를 들어 설명해주세요.
- useRef는 바닐라 자바스크립트의 document.querySelector 처럼 해당 엘리먼트의 주소값을 참조할 수 있도록 하는 hook 입니다.
focus, media playback 등과 같이 엘리먼트의 주소값을 활용해야 하는 경우에 사용됩니다.
하지만 useRef를 남용하는 것은 React의 특징인 선언형 프로그래밍 원칙과 맞지 않기 때문에 지양해야 합니다.
상태관리 라이브러리의 필요성에 대해서 설명해주세요.
- 리액트의 컴포넌트는 state가 변경되면 리렌더링이 됩니다. 현재 컴포넌트의 state를 자식 컴포넌트에서도 사용해야 한다면 props로 내려주게 됩니다. 또한 자식 컴포넌트에서 props로 내려준 state를 변경하기 위해서는 state 변경 함수도 같이 내려주어야 합니다.
이러한 방식은 프로젝트의 규모가 커질수록 prop drilling이 심해지고 그에 따라 state가 어디서 어떻게 변하는지, 그리고 이 업데이트가 어떤 작업으로 인해 발생했는지 파악하기가 어려워 집니다.
이러한 문제들을 상태관리 라이브러리의 전역상태라는 개념으로 해결할 수 있습니다.
Redux의 주요 개념들과 연결 관계를 설명해주세요.
- Redux는 크게 Store, Action, Dispatch, Reducer 총 네 가지의 개념이 있습니다.
Store는 상태가 관리되는 저장소의 역할을 합니다. 리액트에서 전역으로 관리되는 상태는 Store에 저장됩니다.
Action은 어떠한 액션을 취할 것인지 정의해 놓은 객체입니다. 액션에 대한 정의는 type 속성으로, 동적으로 전달해줄 값은 payload 속성으로 지정합니다.
Dispatch는 Reducer로 Action을 전달하는 함수입니다.
Reducer는 Dispatch에게 전달받은 Action의 type과 payload에 따라 상태를 변경시키는 함수입니다.
여기서 Reducer는 state를 직접 변경해서는 안됩니다. Redux는 state를 변경할 때 주소값을 비교하기 때문입니다.
Semantic HTML의 필요성을 예시를 들어 설명해주세요.
- Semantic HTML 이란 요소의 의미에 맞게 마크업 하는 것을 의미합니다.
Semantic 하게 HTML을 작성하게 되면 태그만 보고도 해당 요소가 어떠한 기능을 하게될지 예측이 가능합니다.
또한 SEO 향상에 도움이 됩니다. 검색 엔진은 HTML 코드를 보고 문서의 구조를 파악하는데, 시맨틱 요소를 통해 중요 순위가 높은 요소들을 검색 엔진에 노출시킬 수 있습니다.
다음으로 웹 접근성을 향상시킬 수 있습니다. 시각장애인의 경우 웹 페이지를 음성으로 읽는데 이 때 시맨특 요소를 통해 화면 구조에 대한 정보까지 추가로 전달해줄 수 있습니다.
IP 프로토콜의 한계에 대해서 설명해주세요.
- IP 프로토콜이란 지정한 IP주소에 패킷이라는 통신 단위로 데이터 전달을 하는 방식을 의미합니다.
이러한 방식은 두가지의 단점이 있습니다.
첫번째는 비연결성 입니다. 만약 패킷을 받을 대상이 없거나 서비스 불능 상태여도 서버의 상태를 파악할 방법이 없기 때문에 패킷을 그대로 전송하게 됩니다.
두번째는 비신뢰성 입니다. 패킷을 전달하던 중 장애가 생겨 패킷이 중간에 소실되더라도 이를 파악할 방법이 없습니다. 또한 데이터의 용량이 클 경우 패킷들이 서로 다른 노드를 통해 전달될 수 있는데, 이렇게 되면 의도하지 않은 순서로 패킷이 도착할 수 있습니다.
이러한 문제점들을 보완하기 위해 TCP / UDP 기반의 프로토콜인 HTTP가 등장하게 되었습니다.
HTTP 프로토콜의 특징에 대해 설명해주세요.
- 첫번째로 HTTP는 Request와 Response의 구조로 이루어져 있습니다. 클라이언트가 서버로 요청을 보내면 서버는 결과를 만들어 응답으로 보냅니다.
두번째는 무상태성 입니다. 서버는 클라이언트의 상태를 보존하지 않음으로써 서버 확장성을 높일 수 있습니다.
세번째는 비연결성 입니다. 클라이언트와 서버는 실제로 요청을 주고 받을 때만 연결을 유지하고 응답을 주고나면 연결을 끊습니다. 이를 통해 최소한의 자원으로 서버를 유지할 수 있습니다.
캐시 검증 헤더의 종류와 사용법에 대해서 설명해주세요.
- 먼저 캐시란 데이터나 값을 미리 복사해 놓는 임시 장소를 의미합니다. 캐시 검증 헤더를 사용하면 캐시의 유효시간이 지나도 변경이 없다면 캐시의 값을 사용할 수 있습니다.
Last-Modified 와 if-Modified-Since 를 사용하여 날짜 기반으로 캐시의 수정시간을 알 수 있고,
ETag 와 If-None-Match 를 사용하여 데이터의 변경사항이 있는지 검증할 수 있습니다.
Hashing에 대해서 설명해주세요.
- Hashing 이란 어떠한 수학적 연산이나 알고리즘을 이용하여 원본 데이터를 매핑시켜 암호화된 데이터로 변환시키는 것을 의미합니다.
Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.
- Cookie란 서버에서 클라이언트에 데이터를 저장하는 방법을 의미합니다.
MaxAge, Expires 옵션은 쿠키의 유효기간을 정하는 옵션입니다.
MaxAge 는 쿠키의 유효기간을 초 단위로 설정하고,
Expires 옵션은 클라이언트의 시간, 날짜를 기준으로 유효기간을 설정합니다.
만약 이러한 옵션을 설정하지 않으면 쿠키가 영원히 남아있기 때문에 보안에 취약할 수 있습니다.
Developer