[Section 3] 모의 기술면접 준비 자료

재귀

• 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요.
• 재귀 함수는 자기 자신을 호출하는 함수로서, 
  1. 주어진 문제를 비슷한 구조나 동일한 구조의 더 작은 문제로 나눌 수 있는 경우,
  2. 반복문이 중첩되는 횟수가 많거나 반복문의 중첩 횟수(number of loops)를 예측하기 어려운 경우에 사용하면 좋다.

 

UI/UX

• UI, UX의 개념과 두 개념의 관계에 대해서 설명해주세요.
  • UI : user interface의 약자로서, 사용자 인터페이스를 의미한다. 다시 말해, 사람과 컴퓨터가 상호작용하는 시스템을 일컫는 것으로서, 물리적 요소(스마트폰의 전원 및 볼륨 버튼)와 그래픽 요소(터치스크린, 애플리케이션 화면 등)를 모두 포괄하는 개념이다.
  • UX : user experience의 약자로서, 사용자 경험을 의미한다. 사용자가 어떠한 시스템이나 제품, 서비스를 직간접적으로 이용하면서 느끼는 총체적인 경험을 의미한다. 여기서 총제적이라 함은, 제품과 서비스 그 자체의 경험을 넘어서서 홍보나 접근성, 사후관리 등의 경험까지 모두 총괄하기 때문이다.
  • UX와 UI의 관계 : UX가 UI를 포함하는 관계라고 보면 된다. 하지만 UX가 좋다고해서 UI가 항상 나쁜 것은 아니며, 그 반대의 경우도 마찬가지다. 하지만 일반적으로 UI가 나쁘면 나쁜 UX를 유발하게 된다. 결론적으로 UI와 UX는 항상 같이 가는 관계이며, 서로를 보완하는 역할을 한다.

 

Custom Component

• Styled Components를 사용해보면서 느낀 장점을 이야기해주세요.
• HTML + JS + CSS를 묶어서 하나의 JS 파일에서 컴포넌트화시켜 처리할 수 있으므로, 파일 이동 코딩이 불필요하며 CSS 파일에서 따로 원하는 부분을 찾지 않아도 되고 그 때 그 때 같은 JS 파일 내에서 처리할 수 있어 편리하다. class나 id 이름을 지을 필요가 없어 시간을 절약해준다. 컴포넌트 재활용이 가능하고, Props로 내려줘서 사용이 가능하다.

 

• useRef가 필요한 상황을 예시를 들어 설명해주세요.
• React에서 DOM을 직접 조작하는 것은 지양해하지만, 불가피하게 DOM을 직접 건드려야할 경우 사용한다. DOM 엘리먼트의 주소값을 활용해야 하는 경우에 useRef를 사용할 수가 있다. ex) focus, text selection, media playback, 애니메이션, DOM 기반 라이브러리 등

 

Redux

• 상태관리 라이브러리의 필요성에 대해서 설명해주세요.
• 예를 들어, 자식의 자식 쉽게 말해 ‘A’라는 손자(후손) 컴포넌트에서 사용하는 상태가 있다고 하자. 같은 항렬의 ‘B’라는 다른 손자(후손) 컴포넌트에서도 동일한 상태를 사용해야 한다. 이럴 경우, 최상위 컴포넌트까지 상태를 끌어올려주었다가 props 내려주기를 통해서 B에 상태를 전달해주어야 하는데, 이럴 경우 데이터 흐름이 복잡해지고 비효율적이다. 따라서 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 출처는 전역 공간이어야 한다. 이 때, 상태관리 라이브러리를 사용하면, 전역 상태를 관리하는 저장소인 store에 상태 저장이 가능하며 바로 필요한 컴포넌트에 상태 전달이 가능해진다.

 

• Redux의 주요 개념들과 연결 관계를 설명해주세요.
  1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다.
  2. 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다.
  3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해줍니다.
  4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
  5. 상태가 변경되면, React는 화면을 다시 렌더링 합니다.
• Action → Dispatch → Reducer → Store

 

웹 표준 & 웹 접근성

• Semantic HTML의 필요성을 예시를 들어 설명해주세요.
• 시맨틱(Semantic)이란 ‘의미가 있는'이라는 뜻으로서, HTML을 씨맨틱하게 작성하는 것을 의미한다. 예를 들어 <div>나 <span> 요소만으로도 사실 충분히 화면 구성이 가능하지만, 시맨틱 요소(header, nav, main, aside, footer, article, section 등)를 사용해서 화면을 구성하면 요소를 보고 해당 요소가 어떤 내용을 담고 있는지, 어떠한 역할과 기능을 하는지 알기가 쉽다.
• 이렇게 시맨틱 요소를 사용해서 시맨틱 HTML을 만든다면 :
  • 개발자 간에 편리하고 효율적인 의사소통이 가능해진다.
  • 검색의 효율성도 증대된다 : 검색 엔진은 HTML의 코드를 보고 문서의 구조를 파악하기 때문에 검색 엔진이 요소의 우선순위 파악이 가능하여 검색 결과를 상단에 표시해주기 때문이다.
  • 웹 접근성이 좋아진다 : 예를 들어 시각 장애인이 스크린리더 사용 시, 시맨틱하게 구성된 홈페이지에서는 콘텐츠를 좀 더 명확하고 구조적으로 전달할 수 있다.

 

네트워크 심화

• IP 프로토콜의 한계에 대해서 설명해주세요.
• IP 프로토콜의 한계는 비연결성과 비신뢰성이라고 할 수 있다: 
  • 비연결성 : 클라이언트에서 서버로 데이터 전송 시, 패킷(데이터를 전송 시 사용하는 통신 단위)을 받을 대상이 없거나 서비스 불능 상태여도 전송하게 된다. 클라이언트는 이를 확인할 방법이 없다.
  • 비신뢰성 : 데이터 전달 중 장애로 인해 패킷이 중간에 사라져도 클라이언트는 파악할 방법이 없다. 또한, 패킷은 중간에 서로 다른 노드를 통해 전송이 되기 때문에 전송한 순서대로 서버에 도달하지 않을 수 있다.

 

• HTTP 프로토콜의 특징에 대해 설명해주세요.
  • 클라이언트-서버 구조 : 클라이언트가 서버에 요청을 보내면 서버가 이에 응답하는 구조로 이루어져 있다.
  • 무상태성(stateless) : 서버가 클라이언트의 상태를 보존하지 않는다.
  • 비연결성(connectionless) : 요청을 주고받을 때만 연결을 유지하고, 서버 측에서 응답을 주고나면 연결을 종료한다.

 

• 캐시 검증 헤더의 종류와 사용법에 대해서 설명해주세요.
  • Last Modified :
    • 이름에서 알 수 있듯이, ‘데이터의 마지막 수정 시간'을 헤더에 포함시키는 방식이다. 응답 결과를 캐시에 저장할 때 데이터의 최종 수정일도 함께 저장된다.
    • If-Modified-Since : Last Modified와 함께 쓰이는 조건부 요청 헤더이다. 캐시 유효기간이 초과되어도 If-Modified-Since를 이용해서 조건부 요청을 할 수 있다. 데이터가 수정되었는지 마지막 수정 시간을 비교함으로써 검증해서, 수정되지 않았을 경우 바디를 제외한 HTTP 헤더만 응답으로 전송하고, 브라우저 캐시에서 응답 결과를 재사용한다.
  • Etag :
    • 캐시용 데이터에 임의의 고유 이름을 달아준다 → 데이터가 변경되면 이름도 변경된다
    • If-None-Match : Etag와 함께 쓰이는 조건부 요청 헤더이다. 데이터가 수정되었는지 Etag로 검증하고, 변경되지 않았을 시, false 처리 되며, 기존의 브라우저 캐시에서 응답 결과를 재사용한다.

 

인증 / 보안

• Hashing에 대해서 설명해주세요.
• 어떠한 문자열에 ‘임의의 연산'을 적용하여 다른 문자열로 변환시키는 것으로서, 데이터를 암호화할 때 사용한다. 
  • 규칙
    • 모든 값에 대해 해시 값을 계산하는데 오래걸려서는 안된다.
    • 모든 값은 고유한 해시값을 가진다.
    • 아주 작은 단위라도 변경되면 완전히 다른 해시 값을 가져야 한다.

 

• Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.
  • MaxAge : 쿠키의 유효 시간을 정하는 옵션 (초 단위)
  • Expires : 쿠키의 유효 날짜. 지정된 시간 및 날짜가 지나면 쿠키는 자동 파괴된다.
  • MaxAge 및 Expires에 따른 쿠키 종류 :
    • Session cookie : MaxAge와 Expires가 없는 쿠키로서, 브라우저가 실행 중일 때 사용가능한 임시 쿠키이며, 브라우저 종료 시 삭제된다
    • Persistent cookie : 브라우저의 종료 여부와 상관 없이 MaxAge 또는 Expires에 지정된 유효시간만큼 사용이 가능하다.