기술면접 대비3

재귀

• 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요.
  • 재귀는 자기 자신을 호출하는 함수로서 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우나
    중첩된 반복문이 많은 경우 재귀함수를 사용하기 적합합니다.

UI/UX

• UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요.
  • UI는 User Interface의 약자로서 사람들이 컴퓨터와 상호 작용하는 시스템을 의미하고,
    UX는 User Experience의 약자로서 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험을 의미합니다. 
    UX는 UI를 포함하는 개념으로, 서로를 보완하는 역할을 합니다.
    UX가 좋지 않은 곳을 찾아냄으로써 UI개선점을 찾아낼 수 있고, UI를 개선함으로써 UX가 좋아지기도 합니다.
  • UI 예시 : 화면상의 그래픽 요소, 키보드, 마우스

Custom Component

• Styled Components를 사용해 보면서 느낀 장점을 이야기해 주세요.
  • Styled Components는 CSS를 컴포넌트화해서 사용하는 라이브러리입니다.
    제가 느낀 가장 큰 장점으로는 class, id 이름을 짓느라 큰 고민을 하지 않아도 되고, 재사용·재활용할 수 있다는 점에서 장점이라고 생각합니다.
• useRef가 필요한 상황을 예시를 들어 설명해 주세요.
  
  • useRef는 특정 요소의 DOM 주소값을 가져오는 React Hook입니다.
    React는 기본적으로 DOM에 직접 접근하는 것을 금지하고 있습니다.
    ( React는 가상 DOM을 사용해서 SPA를 구현하기 때문에, DOM을 직접 조작하는 것은 React의 작동 방식과도 맞지 않고,
    원하는 결과가 나오지 않을 수도 있기 때문입니다.)
    그럼에도 DOM에 직접 접근해야하는 예외 상황들이 있습니다. 바로 DOM 엘리먼트의 주소값을 활용해야 하는 경우로, 가장 대표적인 예시는 특정 요소에 포커스를 설정해야하는 상황이 있습니다.
    이럴 때 useRef를 사용해서 DOM 주소 값을 받아와 사용할 수 있습니다.
    하지만 앞서 말했듯 DOM에 직접 접근하는 것은 React의 작동 방식과 맞지 않기 때문에, 이런 예외적인 상황을 제외하고는 useRef를 사용하거나 DOM에 직접 접근해서는 안 됩니다. 
    
    

Redux

• 상태관리 라이브러리의 필요성에 대해서 설명해 주세요.
  • Redux와 같은 상태관리 라이브러리는 전역 상태 저장소를 제공해줍니다.
    기존의 React에서는 자식 컴포넌트에 props를 내려줘서 상태를 전달해줬습니다.
    이 경우에는 해당 상태를 사용하지 않는 컴포넌트들도
    오로지 상태를 전달해주기 위해서props를 받아야 했고,
    이를 props drilling이라고 합니다.
    상태 관리 라이브러리는 전역 상태 저장소를 제공해줌으로써 이 props drilling 문제를 해결해줍니다.
    전역 상태 저장소가 있다면 props를 내려줄 필요없이
    바로 이 저장소에 접근해서 필요한 상태를 가져다 사용하면 되기 때문입니다.
• Redux의 주요 개념들과 연결 관계를 설명해 주세요.
  • Redux의 주요 개념으로는 Action, Dispatch, Reducer, Store가 있으며,
    Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다.
    Action은 말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체입니다.
    해당 Action 객체가 어떤 동작을 하는지 명시해주는 type 속성을 가집니다.
    Dispatch는 Reducer로 Action을 전달해주는 함수입니다.
    Dispatch의 전달인자로 Action 객체가 전달되며. Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출합니다.
    Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수로,
    Reducer가 리턴하는 값이 새로운 상태가 됩니다. 이 때, Reducer는 순수함수여야 합니다.
    외부 요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야하기 때문입니다.
    Store는 Redux의 전역 저장소로, Redux 앱의 state가 저장되어 있는 오직 하나뿐인 저장소의 역할을 합니다.

웹 표준 & 웹 접근성

• Semantic HTML의 필요성을 예시를 들어 설명해 주세요.
  • 각 요소의 의미를 명확히 알 수 있습니다.
    div와 span으로만 화면을 구성한다면 각 요소들이 어떤 역할을 의미하는지 명확히 알 수 없습니다.
    시맨틱 요소를 사용해 화면을 구성한다면 각 요소가 어떤 기능을 하게될지 확실하게 알 수 있기에 개발자 간 소통에 용이합니다.
  • 검색 효율성을 높일 수 있습니다.
    시맨틱 요소를 사용해서 화면을 구성한다면 어떤 요소에 더 중요한 내용이 들어있을지 우선순위를 정할 수 있고
    우선순위가 높다고 파악된 페이지를 검색 결과 상단에 표시하게 됩니다.
    웹 페이지를 검색 엔진에 더 자주 뜨게 만들고 싶을 때, 시맨틱 HTML을 잘 짜는 것만으로도 어느 정도 효과를 볼 수 있습니다.

네트워크 심화

• IP 프로토콜의 한계에 대해서 설명해 주세요.
  
  • IP 프로토콜의 한계는 비연결성과, 비신뢰성입니다.
    비연결성은 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷을 전송하고,
    비신뢰성은 데이터를 전달하던 중 패킷이 소실되더라도 클라이언트가 파악할 수 없습니다.
  • 인터넷 프로토콜(IP)는 패킷 단위로 통신하며, IP 패킷은 소포처럼 출발지 IP 주소, 목적지 IP 주소 정보를 포함하고 있습니다.
    패킷은 한 번 전송되면 목적지에 도착할 때까지 인터넷 망의 수 많은 노드를 지나게 됩니다.
• HTTP 프로토콜의 특징에 대해 설명해 주세요.
  
  • HTTP 프로토콜의 특징으로는 
    클라이언트 서버 구조, 무상태 프로토콜, 비연결성이 있습니다.
    무상태 프로토콜은 서버가 클라이언트의 이전 요청에 대한 정보를 기억하지 않는다는 것을 의미합니다.
    이로 인해 서버 확장성이 높다는 장점이있습니다.(단점, 클라이언트가 추가 데이터 전송)
    비연결성은 요청과 응답을 주고 받은 후에 서버와의 연결을 끊는 것을 의미합니다.
    서버와의 연결을 지속하지 않고 필요할 때에만 연결하기 때문에 최소한의 자원만 사용하게 된다는 장점이 있습니다.
    하지만 HTTP 1.0 버전은 여러 요청을 보내야 할 때에도 매 요청마다 서버 연결과 종료를 반복하는 비효율성이 발생한다는 한계가 있습니다. 이러한 한계점을 HTTP 1.1 버전에서는 지속 연결을 활용해서 해결합니다.
    
    

인증 / 보안

• Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해 주세요.
  • MaxAge, Expires는 HTTP 쿠키의 수명을 지정하는 옵션입니다.
    MaxAge는 쿠키의 유효 기간을 초 단위로 설정하는 방식이고, 
    Expires는 쿠키의 만료 일자를 설정합니다.
    MaxAge 또는 Expires 를 설정하지 않으면 브라우저가 세션 쿠키로 취급하여 쿠키를 메모리에만 저장합니다.
    따라서 브라우저 세션이 종료되면 쿠키도 함께 삭제됩니다.