[Section3] 기술면접준비

재귀

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

  재귀를 활용하기 좋은 상황은
  첫번째, 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우가 있습니다. 예시로는 , 피보나치 수열의 n번째 수를 구하는 문제가 있습니다. 피보나치 수열의 n번째 수는 (n-1)번째 수와 (n-2)번째 수를 합한 값이기 때문에, 몇번째 수를 구하든 동일한 구조의 더 작은 구조로 나누어 n번째 수를 구할 수 있습니다.
  두번째는, 중첩된 반복문이 많거나, 반복문의 중첩 횟수를 예측하기 어려운 경우입니다. 예시로는, 객체를 문자열로 바꾸는 함수가 있습니다. 객체에는 배열이나 객체 또한 담을 수 있으며 얼마나 중첩되어 있는지 예측하기 어렵기 때문에 재귀를 사용하여 문제를 해결하면 중첩되어있는 객체를 파악할 수 있습니다.

UI/UX

• UI/UX의 개념과 두 개념의 관계에 대해서 설명해주세요

먼저 UI란 사람들이 컴퓨터와 상호작용하는 시스템을 말하며,
UX란 사용자가 어떤 시스템, 제품, 서비스를 직/간접적으로 이용하면서 느끼고 생각하는 총체적 경험을 말합니다.
UX는 UI를 포함하는 개념이며, 항상 좋은 UI가 좋은 UX를 보장해주지는 않습니다. 하지만 나쁜 UI는 나쁜 UX를 유발할 수 있습니다. 따라서 UX를 통하여 문제점을 찾아 UI의 개선점을 찾아낼 수 있으며 , 그에 따라 UX 또한 발전시킬 수 있습니다.

• 꼬리질문
  • UI : 키보드, 마우스 등 물리적 요소도 UI로 볼 수 있지만 FM개발자로서의 UI는 보통 화면상 그래픽 요소인 GUI를 의미합니다.
  • UX : 제품, 서비스 그자체에 대한 경험은 물론, 홍보,접근성, 사후처리 등 관련된 모든 사용자의 경험

Custom Component

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

  먼저 Styled Component란 CSS 파일을 따로 작성할 필요 없이 컴포넌트 단위로 스타일 속성을 작성할 수 있게 해주는 라이브러리 입니다.
  styled Component를 이용하며 느낀 장점들은
  첫번째, CSS를 전역적으로 관리하지 않고, 컴포넌트 단위로 스타일 속성을 작성하기 때문에 다른 속성들과 겹치는 일이 없어져 스타일을 주기 한층 편리했습니다.
  두번째로는, CSS코드가 작성된 컴포넌트가 곧 스타일을 적용할 컴포넌트이기 때문에 className이나 id를 작성할 필요가 없어져 이름구상에 대해 고민하는 시간도 감소했습니다.
  세번째로는, 간결한 코드입니다. CSS에서 수정을 할 때 내가 원하는 부분을 찾기 위해 많은 시간을 소요하지 않아도 편하게 코드를 수정할 수 있습니다.

• 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이라고 합니다.
  Redux는 전역 상태 저장소를 제공해줌으로써 props를 내려줄 필요 없이 전역에서 상태에 접근이 가능하기 때문에 props drilling문제를 해결해 줍니다.

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

  네 먼저,
  Redux의 주요 개념으로는 Action, Dispatch, Reducer, Store가 있으며
  Action ➡️ Dispatch ➡️ Reducer ➡️ Store 순으로 데이터가 단방향으로 흐르게 됩니다.
  Action은 어떤 액션을 취할 것인지 정해놓은 객체로, 해당 Action객체가 어떤 동작을 하는지 명시해주는 type 속성을 가집니다.
  Dispatch는 Reducer로 Action을 전달해주는 함수로, 전달인자로 Action객체가 전달되며, 객체를 받은 Dispatch함수는 Reducer를 호출합니다.
  Reducer는 Dispatch에서 전달받은 Action객체의 type 값에 따라 상태를 변경시키는 함수입니다. 즉, Reducer가 리턴하는 값이 새로운 상태가 됩니다. 여기서 주의할 점은 Reducer는 "순수함수"여야 합니다. 외부 요인으로 인해 엉뚱한 값으로 변경되는 일이 없어야 하기 때문입니다.
  마지막으로 Store는 Redux의 전역 저장소로, state가 저장되어 있는 오직 하나 뿐인 저장소의 역할을 합니다.

웹 표준 & 웹 접근성

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

  Semantic HTML는 의미있는 태그를 말합니다.
  <div>태그와 <span> 태그만으로도 충분히 화면의 구조를 만들 수 있습니다.
  하지만 이 두 코드만으로 작성할 경우 끝없는 탐색을 통해 각 태그가 어떤의미를 갖는지 찾아야 합니다.
  하지만 시맨틱 태그를 사용한다면, 태그의 이름만 보고도 해당 요소가 어떤 역할을 하는지 파악할 수 있습니다.
  또한 역할파악 뿐만 아니라, 개발자들간의 소통, 검색 효율성, 웹 접근성에서도 효과를 볼 수 있습니다.

• 요소의 이름만 봐도 의미를 파악할 수 있기 때문에
  그만큼 의미를 전달하기 위한 시간과 id, class 작성에 필요한 시간 소모도 줄어들고 개발자간 소통이 원활해집니다.

• 검색 엔진은 HTML 코드를 보고 문서의 구조를 파악하기 때문에 시맨틱 요소를 사용함으로써 HTML에 의미를 부여하는 것만으로도 검색 효율성을 높일 수 있습니다.

• 시맨틱 요소를 사용하면 화면의 구조를 짜는 것을 넘어 구조에 대한 정보를 전달할 수 있어 요소에 담긴 콘텐츠도 더 명확하게 전달할 수 있으므로 웹 접근성을 향상시킬 수 있습니다.

네트워크 심화

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