학습 목표

질문을 잘 이해하고, 질문의 요지에 정확하게 답변합니다.
질문에 해당하는 개념 설명을 간단 명료하게할 수 있습니다.
개념 응용 사례를 구체적으로 설명할 수 있습니다.
단순히 암기가 아닌 자신만의 언어로 잘 풀어서 설명할 수 있습니다.
모르는 개념에 대해서 불명확하게 이야기 하지 않습니다.
확실하게 몰라도 아는 부분까지는 최선을 다해 설명할 수 있습니다.

---

재귀

• 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요.
  • 1. 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우
    2. 중첩된 반복문이 많거나 반복문의 중첩 횟수를 예측하기 어려운 경우

---

UI/UX

• UI, UX의 개념과 두 개념의 관계에 대해서 설명해주세요.
  • UI : 사람들이 컴퓨터와 상호 작용하는 시스템 / UX : 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험
    UX는 UI를 포함합니다.또한 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않습니다.
    (서로를 보완하는 역할을 합니다.)

---

Custom Component

• Styled Components를 사용해보면서 느낀 장점을 이야기해주세요.
  • CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있습니다.
• useRef가 필요한 상황을 예시를 들어 설명해주세요.
  • • focus
      text selection
      media playback
      애니메이션 적용
      d3.js, greensock 등 DOM 기반 라이브러리 활용
    • React는 이런 예외적인 상황에서 useRef 로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있습니다.
  • state처럼 변경되고 유지가 되는 변수가 필요하지만 변경시에 리렌더링을 하고 싶지 않을때 useRef가 유용합니다.

---

Redux

• 상태관리 라이브러리의 필요성에 대해서 설명해주세요.
  • Props 내려주기를 여러 번 거쳐야 하는 것을 Props Drilling 이라고 하는데 이 것을 방지하기 위해 필요합니다.
• Redux의 주요 개념들과 연결 관계를 설명해주세요.
  1. Action : 어떤 액션을 취할 것인지 정의해 놓은 객체
     (type은 필수 지정 대문자와 Snake Case로 작성 필요에 따라 payload 를 작성해 구체적인 값을 전달)
  2. Dispatch : Reducer로 Action을 전달 해주는 함수
  3. Store : 상태가 관리되는 하나뿐인 저장소
  4. Reducer : Dispatch에서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수 (순수함수)
  • Action -> Dispatch -> Reducer -> Store 순서로 데이터가 단방향으로 흐르게 됩니다.
  • useDispatch() 는 Action 객체를 Reducer로 전달해 주는 Dispatch 함수를 반환하는 메서드입니다.
  • useSelector() 는 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드입니다.

---

웹 표준 & 웹 접근성

• Semantic HTML의 필요성을 예시를 들어 설명해주세요.
  • semantic : 의미가 있는 , HTML : 화면의 구조를 만드는 마크업 언어
  • 시맨틱 HTML 쓰게되면 개발자간의 소통이 원활하다.
  • 화면이 안 보이거나 소리가 들리지 않을 때 HTML이 시맨틱 요소로 구성되어있다면 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어서 콘텐츠를 좀 더 정확하게 전달할 수 있게됩니다. 시맨틱 요소만 잘 사용해도 웹 접근성을 향상시킬 수 있습니다.(웹 접근성 : 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없게하여 항상 동등한 수준의 정보를 제공받도록 보장합니다.)

---

네트워크 심화

• IP 프로토콜의 한계에 대해서 설명해주세요.
  • 비연결성 : 패킷을 받을 대상이 없거나 서비스 불능 상태여도 서버의 상태를 파악할 방법이 없기 때문에 패킷을 그대로 전송합니다.
    비신뢰성 : 패킷이 중간에 소실될 수 있습니다.또한 전달 데이터의 용량이 경우 패킷 단위로 나눠 데이터를 전달하게 되는데 패킷이 순서대로 도착하지 않을 수 있습니다.
• HTTP 프로토콜의 특징에 대해 설명해주세요.
  • 요청과 응답인 구조로 이루어져 있습니다.
    무상태성 : 상태를 보존하지 않습니다.(쿠키,세션,토큰으로 상태를 기억하는 방법이 있습니다)
    (장점 : 무상태는 응답 서버를 쉽게 바꿀 수 있어서 무한한 서버 증설이 가능합니다.
    단점 : 클라이언트가 추가 데이터 전송)
    비연결성 : 클라이언트와 서버가 한 번 연결을 맺은 후, 클라이언트 요청에 대해 서버가 응답을 마치면 연결을 끊어버리는 성질
    (장점 : 트래픽이 많지 않고, 빠른 응답을 제공
    단점 : 트래픽이 많고 큰 규모의 서비스를 운영할 때 한계가 있다.)

---

인증 / 보안

• Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.
  • 쿠키가 유효한 기간을 정하는 옵션입니다.(MaxAge : 초 단위 / Expires : 시간, 날짜)
    설정하지 않고 쿠키가 영원히 남아있다면 탈취가 쉽기에 보안 측면에서 유효기간을 설정하는 것이 중요합니다.