재귀
재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요.
=> 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있을 때도 재귀를 활용하기 좋습니다. (탈출조건)
반복문이 많이 중첩되었을 때 코드를 예측하기 어려워지기 때문에 재귀를 활용하기 좋다(재귀적 구현)
UI/UX
UI, UX의 개념과 두 개념의 관계에 대해서 설명해주세요.
- UI는 User Interface로, 사람과 컴퓨터가 상호 작용하는 시스템을 의미하고, 예를 들어 화면상의 그래픽 요소, 키보드, 마우스등의 물리적 요소가 있습니다.
- UX는 User Experience로, 사용자의 경험을 의미하는데요, 사용자가 제품과 서비스를 이용하면서 느끼고 생각하는 총체적 경험 모두를 포함합니다.
- 두 개념의 관계는~ ux가 ui를 포함하지만, 좋은 ux가 좋은 ui를 , 좋은 ui가 좋은 ux를 보장하지는 않습니다.
Custom Component
Styled Components를 사용해보면서 느낀 장점을 이야기해주세요.
기존 css를 따로 개발하던 방법에서 Styled Components를 통해 html, css, 자바스크립트를 묶어 하나의 js 파일 안에서 컴포넌트 단위로 개발할 수 있다. 이 덕분에 css가 한 페이지에서 파일 이동 없이 작성, 수정할 수 있게 됐고, id나 class를 따로 지정하지 않아도 되고, props를 받을 수 있어 재활용 가능합니다.
useRef가 필요한 상황을 예시를 들어 설명해주세요.
DOM노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조해야할 때
예를들어 focus, text selection, media playback, 애니메이션 적용
=> 어떤 버튼을 클릭하거나 엔터키를 누를 때 다른 dom 엘리먼트로 focus를 이동시킬 때 사용해봤다.
Redux
상태관리 라이브러리의 필요성에 대해서 설명해주세요.
해당 상태를 직접 사용하지 않는 최상위컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가집니다.
이때문에 상태 끌어올리기, props 내려주기를 여러 번 거쳐야 하는 불편함이 있고
이에 따라 애플리케이션이 복잡해지면서 데이터 흐름도 복잡해집니다.
수정이 필요해 컴포넌트 구조를 바꿔야 할 때 지금의 데이터흐름을 완전히 바꿔야 할 수도 있습니다.
Redux의 주요 개념들과 연결 관계를 설명해주세요.
- 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다.
- 이 Action 객체는 Dispatch 함수의 인자로 전달되고
- 이 Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다.
- 이 Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
- 상태가 변경되면, React는 화면을 다시 렌더링 합니다.
웹 표준 & 웹 접근성
Semantic HTML의 필요성을 예시를 들어 설명해주세요.
개발자간 소통을 원활하게하고, semantic html은 검색엔진이 읽기 때문에 검색 효율성을 향상시킵니다. 또 스크린 리더가 semantic 태그를 장애인, 고령자에게 읽어줌으로써 웹 접근성을 높일 수 있습니다.
네트워크 심화
IP 프로토콜의 한계에 대해서 설명해주세요.
만약 패킷을 받을 대상이 없거나 서비스 불능 상태여도, 클라이언트는 서버의 상태를 파악할 방법이 없기 때문에 패킷을 그대로 전송하는 비연결성의 한계와
중간에 있는 서버가 데이터를 전달하던 중 장애가 생겨 패킷이 중간에 소실되더라도 클라이언트는 이를 파악할 수 없는 비신뢰성의 한계가 있습니다.
또, 전달 데이터의 용량이 클 경우 이를 패킷 단위로 나눠 데이터를 전달하게 되는데 이때 패킷들은 중간에 서로 다른 노드를 통해 전달될 수 있습니다. 클라이언트가 의도하지 않은 순서로 서버에 패킷이 도착하는 한계도 있습니다!
HTTP 프로토콜의 특징에 대해 설명해주세요.
- 클라이언트 - 서버 구조
- 요청-응답 구조
- 클라이언트는 서버에 요청을 보내고, 응답을 대기
- 서버가 요청에 대한 결과를 만들어 응답
2.무상태 프로토콜, 비연결성
무상태 : 서버가 클라이언트의 상태를 보존하지 않음 - 장점 : 서버 확장성 높음
- 단점 : 클라이언트가 추가 데이터 전송
- 예외 : 브라우저 쿠키, 서버 세션, 토큰 등을 이용해 상태를 유지
비연결성 : HTTP에서는 실제로 요청을 주고받을 때만 연결을 유지하고 응답을 주고 나면 TCP/IP 연결을 끊는다(최소한의 자원 사용)
인증 / 보안
Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.
쿠키가 유효한 기간을 정하는 옵션이고요~
MaxAge는 쿠키가 유효한 시간을 초 단위로 설정하는 옵션입니다.
Expires는 언제까지 쿠키가 유효한지 지정할 수 있습니다.
이 옵션에 따라 Session Cookie와 Persistent Cookie로 나뉩니다.
세션쿠키는 Maxage 또는 Expires 옵션이 없는 쿠키로, 브라우저가 실행 중일 때 사용할 수 있는 임시 쿠키입니다.
persistent 쿠키는 브라우저의 종료 여부와 상관없이 유효시간만큼 사용가능한 쿠키입니다.
