Section 3 기술면접

• 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요.
  재귀함수란 자기 자신을 호출하는 함수입니다.
  재귀함수는 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우나
  중첩된 반복문이 많거나 반복문의 중첩 횟수를 예측하기 어려운 경우에 사용할수 있습니다.
  재귀함수를 이요한 문제 해결 방법은 문제를 분석하고 base case(탈출 조건)와 recursive case(반복적인 작업)를 작성하고, 탈출 조건에 도달했을 때 값을 리턴하면서 중첩되어있던 반복적인 작업도 값을 리턴하면서 문제를 해결합니다.

• Styled Components를 사용해보면서 느낀 장점을 이야기해주세요.
  우선 간단히 Styled Components에 대해 설명드리겠습니다.
  Styled Components는 React 환경에서 사용할 수 있는 CSS 라이브러리입니다.
  먼저 React를 통해 HTML과 JS를 한 파일 내에서 작성할 수 있고, Styled Components를 사용하면 자바 스크립트 파일 내에서 CSS를 작성할 수 있습니다.
  Styled Components를 사용해보면서 느낀 장점은
  첫번째, 기존 css를 따로 개발하던 방법에서 html, css, 자바스크립트를 묶어 하나의 js 파일 안에서 컴포넌트 단위로 개발할 수 있었다는 것
  두번째, 이 덕분에 css가 한 페이지내에서 파일 이동 없이 작성 및 수정할 수 있게 됐었다는 것
  세번째, id나 class를 따로 지정하지 않아도 된다는 것
  네번쨰, props를 받을 수 있어 재활용 가능하다는 것 입니다.
• useRef가 필요한 상황을 예시를 들어 설명해주세요.
  useRef는 특정 요소의 DOM 주소값을 가져오는 React Hook입니다.
  React는 기본적으로 DOM에 직접 접근하는 것을 금지하고 있습니다.
  React는 가상 DOM을 사용해서 SPA를 구현하기 때문에, DOM을 직접 조작하는 것은 React의 작동 방식과도 맞지 않고, 원하는 결과가 나오지 않을 수도 있기 때문입니다.
  그럼에도 DOM에 직접 접근해야하는 예외 상황들이 있습니다. 바로 DOM 엘리먼트의 주소값을 활용해야 하는 경우로, 가장 대표적인 예시는 특정 요소에 포커스를 설정해야하는 상황이 있습니다.
  이럴 때 useRef를 사용해서 DOM 주소 값을 받아와 사용할 수 있습니다.
  예시로는 특정 DOM 엘리먼트의 주소값에 focus를 이동한다거나 focus를 잃었을 때 특정 주소값의 DOM 엘리먼트에 이벤트가 실행되도록 하고 싶을 때 사용할 수 있습니다.
  하지만 앞서 말했듯 DOM에 직접 접근하는 것은 React의 작동 방식과 맞지 않기 때문에, 이런 예외적인 상황을 제외하고는 useRef를 사용하거나 DOM에 직접 접근해서는 안 됩니다.

웹 표준 & 웹 접근성

• Semantic HTML의 필요성을 예시를 들어 설명해주세요
  Semantic HTML를 사용하면 첫째,개발자간 소통을 원활하게 합니다.
  여러 명의 개발자가 웹 페이지를 개발하면서 <div> 와 <span> 으로만 HTML 코드를 작성한다면, 각 요소가 어떤 기능을 하는지 파악하기 힘들지만, 시멘틱한 요소를 사용하면 각 요소의 기능을 정의하느라 시간낭비를 하지 않을수 있습니다.
  두번째, Semantic HTML를 사용하면 검색효율성을 향상시킬수 있습니다.
  검색엔진은 HTML 코드를 보고 문서의 구조를 파악합니다. 시맨틱 요소를 사용하면, 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시되게 할수 있습니다.
  세번째, Semantic HTML를 사용하면 웹접근성을 높일수 있습니다.
  고령자나 시각장애인의 경우에는 스크린리더를 이용하게 돼는데, 이때,HTML이 시맨틱 요소로 구성되어 있다면 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어 콘텐츠를 좀 더 정확하게 전달할 수 있게 됩니다.

인증 / 보안

• Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.
  Cookie는 HTTP 프로토콜의 비상태성을 보완하기 위한 수단으로, 브라우저에 데이터를 저장할 때 사용합니다.
  Cookie의 MaxAge 옵션은 쿠키를 얼마나 유지할 것인지, Expires 옵션은 언제 폐기할 것인지 지정하는 옵션입니다.
  두 옵션을 동시에 설정하면 MaxAge가 더 높은 우선 순위로 적용됩니다.
  이 두 옵션중 하나라도 설정하지 않으면, 해당 쿠키는 브라우저가 닫힐 때 폐기 됩니다. 따라서 쿠키를 빠르게 폐기하고 싶다면 옵션을 설정하지 않는 것이 좋고, 쿠키를 계속 사용하고 싶다면 두 옵션 중에 하나라도 설정해주는 것이 좋습니다.
  이 때, 브라우저를 종료하면 삭제되는 임시 쿠키를 세션 쿠키(Session Cookie)라고 하고, 설정한 옵션만큼 사용가능한 쿠키를 영속성 쿠키(Persistent Cookie)라고 합니다.