재귀
재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요.
재귀를 사용하는 이유는 코드의 가독성을 높이고, 변수의 사용을 줄임으로써 생길수 있는 오류를 방지할수있는 점이다.
사용하기 좋은 상황은 알고리즘 자체가 재귀적인 표현이 자연스러운 경우에는 재귀 함수를 쓰는 것이 큰 도움이 됩니다. 예를 들어 피보나치 수열이 있습니다.
UI/UX
UI, UX의 개념과 두 개념의 관계에 대해서 설명해주세요.
UX(사용자 경험, User eXperience)
UI(사용자 인터페이스, User Interface)
인터넷 쇼핑으로 예를 들자면, UX는 상품 검색이라는 행위 전체를 관통하는 사용자 경험에 대한 것이고, UI는 사용자가 경험하는 검색창이나 검색 결과 페이지 같은 이용 수단이나 대상에 대한 부분에 해당한다고 생각하면 이해가 쉽다.
Custom Component
Styled Components를 사용해보면서 느낀 장점을 이야기해주세요.
- CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일을 넣을 수 있습니다.
- 클래스명 고민 안해두 되고 해당 컴포넌트에만 적용되어 다른 js파일에 오염이 되지 않아 편합니다.
useRef가 필요한 상황을 예시를 들어 설명해주세요.
리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다
특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지
그럴 때, 리액트에서 ref 라는 것을 사용합니다.
함수형 컴포넌트에서 저장공간(변수 관리), DOM 요소에 접근을 위해 useRef 라는 Hook 함수를 이용합니다.
Redux
1. 상태관리 라이브러리의 필요성에 대해서 설명해주세요.
리액트에서의 상태는 즉 state인데, 말 그대로 이를 관리해주는 라이브러리가 바로 상태 관리 라이브러리입니다.
리액트는 이 state에 변동이 생길 시에 re-rendering 되어 페이지에 변동이 일어나게 되는데, 이 state는 오로지 자식 컴포넌트에게만 전달해줄 수 있습니다. 밑으로만 쭉쭉
중간과정을 생략못하기 때문에 걸쳐가는 컴포넌트 모두 프롭을 해줘야 하는 번거로움이 있습니다.
해결방법은 상태관리 라이브러리를 사용하는 것. 라이브러리를 사용하면 state를 전역 변수처럼 만들어 사이에 있는 모든 컴포넌트에 상태를 전달해주지 않고도 어떤 컴포넌트에서든 바로 state에 접근이 가능하게 됩니다.
2. Redux의 주요 개념들과 연결 관계를 설명해주세요.
- Store
Store(스토어)는 상태가 관리되는 오직 하나의 공간이다.
컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담으며
컴포넌트에서 상태정보가 필요할때 스토어에 접근한다.- Action
Action(액션)은 앱에서 스토어에 운반할 데이터를 말한다.
Action(액션)은 자바스크립트 객체 형식으로 되어있다.- Reducer
Action(액션)을 Store(스토어)에 바로 전달하는 것이 아니고, Action(액션)을 Reducer(리듀서)에 전달해야합니다.
Reducer(리듀서)가 액션을 전달받고 Store(스토어)의 상태를 업데이트하는 것입니다.
그리고 Action(액션)을 Reducer(리듀서)에 전달하기 위해서는 dispatch() 메소드를 사용해야한다.
웹 표준 & 웹 접근성
Semantic HTML의 필요성을 예시를 들어 설명해주세요.
시맨틱한 HTML을 작성하면 개발자간 소통, 검색 효율성, 웹 접근성에 효과를 볼 수 있습니다. 요소의 이름만 봐도 의미를 파악할 수 있기 때문에 그만큼 의미를 전달하기 위한 시간과 id, class 작성에 필요한 시간 소모도 줄어들고 개발자간 소통이 원활해집니다.
네트워크 심화
1. IP 프로토콜의 한계에 대해서 설명해주세요.
- 비연결성
클라이언트는 서버가 존재하는지, 서비스 가능 상태인지 모르는 것.- 비신뢰성
패킷 소실 : 결국 여러 서버를 거쳐서 전달되는 것. 중간 노드가 여러가지 이유로 작동하지 않는다면 내가 전달한 패킷 소실
패킷 전달 순서 뒤죽박죽!: 1500 바이트가 넘으면 패킷 단위를 쪼개서 보내기때문에, 나뉜 패킷들이 모두 동일한 경로로 가지 않아서 최종적으로 두번째 순서의 패킷이 먼저 도착할 수도 있음
이런 문제를 해결해주는게 바로 TCP 프로토콜이다.- 프로그램 구분
같은 IP를 사용하는 서버에서 통신하는 어플리케이션이 둘 이상일 경우 어떤 어플리케이션인지 구분이 어렵다.
2. HTTP 프로토콜의 특징에 대해 설명해주세요.
- 클라이언트 서버 구조
클라이언트가 서버에 요청을 보내면 서버는 그에 대한 응답을 보내는 클라이언트 서버 구조로 이루어져 있다.
- 무상태 프로토콜(Stateless)
HTTP에서 서버가 클라이언트의 상태를 보존하지 않는 무상태 프로토콜이다.
그렇기에 서버의 확장성은 좋지만 클라이언트의 추가데이터 전송이 필요함.
- 비 연결성(Connectionless)
클라이언트와 서버간에 TCP연결설정 (3-way-handshake) 이 이뤄지고 난뒤
클라이언트는 웹서버에게 서비스를 요청 합니다. 서버는 그에 응하는 서비스를 제공하고 클라이언트는 요청한 서비스를 제공받으면 연결을 종료시킵니다. 이러한 이유 때문에 비연결형 프로토콜 이라고 합니다.
<3 Way-Handshake 란, 전송제어 프로토콜(TCP)에서 통신을 하는 장치간 서로 연결이 잘 되어있는지 확인하는 과정/방식이다.>
-
HTTP메시지
TTP 메시지는 서버와 클라이언트 간에 데이터가 교환되는 방식입니다.
메시지 타입은 두 가지가 있습니다. 요청(request)은 클라이언트가 서버로 전달해서 서버의 액션이 일어나게끔 하는 메시지고, 응답(response)은 요청에 대한 서버의 답변입니다. -
단순함, 확장 가능
인증 / 보안
Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.
expires는 쿠키의 유효일자를 설정해주는 옵션이고, 브라우저는 설정된 유효 일자까지 쿠키를 유지하다가, 해당 일자가 도달하면 쿠키를 자동으로 삭제합니다.
max-age는 expires 옵션의 대안으로, 쿠키 만료 기간을 설정할 수 있게 해줍니다. 현재부터 설정하고자 하는 만료일시까지의 시간을 초로 환산한 값을 설정합니다.
0이나 음수값을 설정하면 쿠키는 바로 삭제됩니다.
- expires(유효 일자)나 max-age(만료 기간) 옵션이 지정되어있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 삭제됩니다.> 이쿠키를 세션쿠키라고 한다.
expires 나 max-age 옵션을 설정하면 브라우저를 닫아도 쿠키가 삭제되지 않습니다.
