3/13 일일 정리 기술면접준비

Section 3에서 배운 내용을 정리하여 기술 면접 준비를 진행하였다.

 

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

재귀는 주어진 문제를 비슷한 구조의 더 작은 문제로 나누어 풀 수 있을 때 사용할 수 있습니다.

예를 들어 피보나치 수열같은 경우 현재 순서의 값 = 전 순서의 값 + 전전 순서의 값 으로 계속해서 나타낼 수 있습니다. 이러한 경우 재귀를 사용하여 간단하게 코드로 표현할 수 있습니다.

그리고 중첩된 반복문이 많거나 몇번 반복할지 예측이 힘들경우 재귀를 사용하면 코드를 간단하게 나타낼 수 있고 몇번 반복되는지 굳이 알지 않아도 됩니다.

 

피드백 - 예시를 실습한걸로 해보기

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

UI란 User interface. 사용자가 컴퓨터와 상호작용하는 시스템을 말합니다. 우리가 웹사이트를 사용할 때 보이는 모든 것이 UI 입니다. 디자인이나 레이아웃부터 버튼, input박스, 이벤트 등 모든것을 포함하는 개념입니다. UI는 사용자와 웹사이트의 상호작용과 의사소통을 원활하게 해주는 접점에 존재하는 것이라고 할 수 있습니다. 

 

UX는 User Experience, 사용자 경험입니다. 사용자가 웹페이지를 사용하면서 느끼는 총체적인 경험을 말합니다. 웹페이지를 사용하면서 느끼는 불편함이나 만족감등은 물론이고 홍보, 접근성, 사후처리등 직, 간접적으로 관련된 모든것을 포함하는 개념입니다.

 

좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않습니다. 하지만 UX가 좋지 않은 곳을 찾아냄으로써 UI 개선점을 찾아낼 수 있고, UI를 개선함으로써 UX가 좋아지기도 하는 상호보완관계를 가지고 있습니다.

 

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

Styled-Component 를 사용하면 하나의 파일 안에 html, css, javascript를 모두 작성하여 한눈에 볼 수 있기 때문에 컴포넌트 단위로 개발 할 때 편리합니다. 그리고 컴포넌트 단위로 css가 적용되기 때문에 전역 css 파일을 사용할 때 혹시나 스타일이 겹치는 경우를 방지할 수 있습니다.

 

피드백 - 재사용하기 좋음 넣기

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

React를 사용하면서 DOM요소를 사용하는 경우가 거의 없긴 하지만, 필요한 경우가 가끔씩 있습니다. 리렌더링없이 요소를 사용해야 하는경우, 상태변수를 사용하면 리렌더링이 일어나기 때문에 useRef를 사용합니다. 예를 들면 focus를 적용해야 한다거나, 동영상이나 애니메이션을 재생해야 하는 등의 경우 입니다. 이럴때는 useRef를 사용하여 처리를 해주면 리렌더링없이 요소를 변경해줄 수 있습니다.

 

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

웹페이지가 커질수록 관리해야하는 수많은 상태들이 생겨나는데, 하나의 상태가 하나의 컴포넌트에서만 사용되는 것이 아니라 여러개의 컴포넌트에서 사용되는 경우가 많습니다. 이럴 때는 여러 컴포넌트의 공통 부모 컴포넌트에 상태를 선언하여 사용합니다.

그런데 이렇게 상태를 직접 쓰는 곳이 아니라 다른곳에 선언하고 프로젝트 규모가 커지다 보니 상태가 어디에 있고 누가 쓰는지 직관적으로 알기 힘든 경우가 생깁니다. 또한 부모 컴포넌트에서 자손 컴포넌트로 prop를 내려줄 때 자손이 몇대에 걸쳐서 멀리 있으면 자식, 자식의 자식, 자식의 자식의 자식으로 계속해서 props를 내려줘야하는 props drilling 문제도 생기게 됩니다.

이렇게 하나의 상태를 여러 컴포넌트가 사용하거나 거리가 멀리있는 컴포넌트들이 사용하는 경우 useState같은 hook을 사용하는 것이 아니라 전역 상태 관리를 할 수 있는 라이브러리를 사용하는 것이 편리하고 효율적입니다.

 

피드백 - props drilling 꼬리질문    두괄식으로 정리해서 먼저 말하기

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

Redux의 사용 흐름으로 설명해보겠습니다.

사용화면 UI에서 상태를 변경하면

Action이라는 객체가 생성된다. Action 객체는 변경할 상태에 대한 정보가 담겨있습니다.

Dispatch라는 함수를 통해 Action객체가 Reducer라는 함수로 운반됩니다.

Reducer함수는 상태를 저장해두는 Store 공간 내부에 등록되어 있는 함수로 상태를 변경해주는 함수입니다. 

Reducer함수에 action객체가 전달되어 상태가 변경이 되고 그 상태는 Store에 저장됩니다.

상태가 바뀌면 React가 상태변경을 감지하여 해당 컴포넌트를 리렌더링합니다.

 

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

시멘틱 요소를 사용하면 여러 개발자가 협업하여 웹페이지를 개발할 때 마크업만 보고도 대략적인 구성이 파악이 가능하기 때문에 좀 더 원활한 소통을 가능하게 합니다.

또한 검색 엔진(SE)은 검색을 할 때 시멘틱 요소에 따라 우선순위를 파악하여 중점적으로 검색할 요소를 판단하는것이 가능하기 때문에 중요한 정보가 있는 요소는 우선순위가 높은 시멘틱 요소를 사용하면 검색 효율을 증가시킬 수 있습니다.

그리고 시멘틱 요소를 사용하면 웹 접근성을 향상 시킬 수 있다. 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 시멘틱 마크업을 푯말로 사용할 수도 있습니다.

 

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

IP 프로토콜은 비연결성과 비신뢰성이 특징이자 단점입니다.

비연결성은 송신자와 수신자가 연결되어 있지 않은 특성을 말합니다. 수신자가 데이터를 받는 것이 불가능한 상태여도 송신자는 데이터를 보낼 수 있습니다. 그러나 이 경우 응답을 받을 수 없습니다.

비신뢰성은 데이터 흐름에 관여하지 않기 때문에 보낸 정보가 제대로 갔는지 보장하지 않는다는 것을 말합니다. 패킷은 여러 노드들을 거쳐 가는데 중간에 노드 서버 하나가 다운되어서 패킷이 소멸하는 경우도 있고, 먼저 보낸 데이터가 먼저 도착할 것이라는 보장도 없습니다.

 

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

HTTP 프로토콜이란 클라이언트와 서버간에 어떻게 메시지를 교환할지 정해놓은 규약입니다.

HTTP 프로토콜의 특징으로 무상태성과 비연결성이 있습니다.

상태를 기억하지 않기 때문에 서버를 확장하는데는 유리하지만 클라이언트가 요청을 보낼 때 추가 데이터를 계속 보내야 한다는 단점이 있습니다.

HTTP 에서는 실제 요청을 보내고 응답을 받을때만 연결을 유지하고 이후에는 연결을 끊습니다. 그렇기 때문에 최소한의 자원으로 서버를 유지할 수 있습니다. 그러나 수많은 요청과 응답이 오고가기 때문에 요청을 시작할 때 마다 연결을 다시 하는것은 비효율적이기 때문에 최근에는 지속연결을 사용하여 이러한 문제를 해결합니다.

 

*지속 연결 - 연결이 이루어지고 난 뒤 각각의 자원들을 요청하고 모든 자원에 대한 응답이 돌아온 후에 연결을 종료합니다.  

 

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

MaxAge 옵션은 쿠키의 최대 지속 시간을 설정하는 옵션입니다. 예를 들어 30분을 설정하면 브라우저를 종료해도 쿠키가 30분이 될때까지는 지속적으로 남아있습니다. 30분이 지나면 자동으로 파기됩니다.

Expires옵션은 쿠키의 유효 시간을 설정하는 것입니다. 예를 들어 2023년 3월 13일 11시 30분이라고 설정하면 현재시각부터 그 시각까지는 쿠키가 유효하고, 그 시간이 되면 쿠키가 자동적으로 파기됩니다. 

쿠키에 MaxAge나 Expires 옵션을 적용하지 않으면 세션쿠키로 설정이되고 이 세션쿠키는 브라우저를 종료하면 자동으로 파기됩니다.

 

피드백 - 세션 vs 영속성 쿠키 설명해보기 , 옵션 설정 방법도 설명해보기

 

피드백

- 예시 들수 있으면 좋을듯

- 질문에만 답변하기, 나머지는 꼬리질문 들어오면 답변하기

- 같은 이야기 반복은 최대한 피하기

- 적절한 속도로 이야기하기