기술면접 준비(재귀, 웹표준, 보안)

재귀

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

큰 목표 작업 하나를 동일하면서 간단한 작업 여러 개로 나눌 수 있을 때 재귀를 활용하면 좋음 

특정 자료구조를 다뤄야 할 때 재귀 사용(깊이우선탐색, 백트래킹)

반복문을 사용하는 것보다 코드의 가독성을 높이고, 변수의 사용을 줄임 

 

UI/UX

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

ui: user interface

사용자가 제품이나 서비스를 사용할 때 마주치는 인터페이스, 폰트, 칼라, 레이아웃 등 

ux: user experience 

사용자가 제품이나 서비스를 이용하면서 느끼는 만족, 사용자 중심적으로 설계된 디자인을 말함 

UX가 UI를 포함하는 관계

 

Custom Component

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

Styled Components란 컴포넌트 기반으로 css를 작성할 수 있게 도와주는 라이브러리를 말함

장점: scss라이브러리 설치 없이 scss문법을 사용가능

자유로운 css커스텀 컴포넌트 만들 수 있음

컴포넌트의 props를 참조 가능, 값에 따라 스타일을 다르게 코딩 가능 

스스로 classname을 생성하여 중복이나 오타로 인한 버그를 감소 

classname을 일일이 수동으로 관리할 필요 없이 react의 props나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하여 간단하고 직관적임 

• useRef가 필요한 상황을 예시를 들어 설명해주세요.

리액트 사용시 dom을 직접 선택해야하는 경우

focus를 선택해주거나 두개 컴포넌트의 싱크를 맞출 때 필요 

그 때 ref를 사용, useRef는 ref를 설정해주는 역할을 수행 

 

Redux

• 상태관리 라이브러리의 필요성에 대해서 설명해주세요.

상태를 끌어올리는 번거로움이 없어져 어떤 액션이 변경되었는지 쉽게 추적이 가능

앱이 간편해지고 유지관리가 쉬워짐 

리액트에 redux를 사용할 경우: 커뮤니티 지원, 성능향상, 상태예측, 로컬스토리지를 통한 상태 지속성, 서버 사이드 렌더링 장점 보유 

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

action 객체는 dispatch에 전달되고, dispatch는 reducer를 호출하고, reducer는 새로운 state를 생성

 

먼저, store는 상태가 관리되는 오직 하나의 공간
둘째, dispatch는 reducer를 호출
셋째, action은 자바스크립트 객체 타입이며 store에 전달할 payload(데이터)를  리듀서에 전달
마지막으로. reducer는 현재 state와 action을 이용하여 다음 state를 만듦

 

(생활코딩)

리덕스를 은행이라고 가정하고 정보들은 store(금고)에 저장되어 있다.

state라는 실제 정보가 store 안에 존재하지만 직접 접근은 금지한다.

store를 만들면서 reducer(가드, 담당 직원)로 store 안에 state에 정보를 공급을 해줘야 한다.

dispatch, subscribe, getState는 은행 직원들입니다.

subscribe를 하게 되면, state 값이 바뀔 때마다 render 함수가 호출되면서 UI가 갱신됩니다.

dispatch에게 action이 전달됩니다.

dispatch는 reducer를 호출해서 state값을 바꾸도록 하는데 (현재 값, action 값) 두 개의 값을 전달합니다.

getState는 state 값을 가져옵니다.

 

웹 표준 & 웹 접근성

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

검색엔진최적화(seo): 의미 구분이 확실한 문서가 알고리즘 주요 키워드로 선정될 가능성 높음, 검색 엔진 최적화가 된다면 상위 노출이 가능하고 유저의 유입도 더 활발해짐 

웹접근성: 장애인, 고령자 등이 웹 사이트에 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것 , 스크린 리더나 마우스 없이 키보드로 모든 콘텐츠에 접근가능하게 하는 서비스들은 html태그를 기반으로 작동

가독성: 적절한 태그의 사용은 주석을 달아 설명하는 것보다 개발자 사이에서 확실한 이해를 도모 

 

네트워크 심화

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

비연결성: 패킷을 받을 대상이 없거나 서비스 불능 상태에서도 클라이언트는 서버의 상태를 파악할 방법이 없기 때문에 패킷을 그대로 전송 

비신뢰성: 데이터를 전달하는 중 패킷이 중간에 소실되어도 클라이언트는 파악 불가능. 의도하지 않은 순서로 패킷이 서버에 도착할 수 있음 

 

• HTTP 프로토콜의 특징에 대해 설명해주세요.

하이퍼텍스트 전송 프로토콜이라는 뜻 

1. 클라이언트 서버 구조: 클라이언트 -> 서버요청-> 응답하는 request responce구조 

2. 무상태 프로토콜: 서버가 클라이언트의 상태를 보존하지 않는 무상태 프로토콜 / 클라이언트가 서버한테 말한걸 저장하지 않음 

3. 비 연결성: 1.0버전 기준으로 연결을 유지하지 않는 모델, 실제로 요청을 주고 받을 때만 연결을 유지하고 응답을 주고나면 TCP/IP 연결을 끊는다, 최소한의 자원으로 서버 유지 가능 

• 캐시 검증 헤더의 종류와 사용법에 대해서 설명해주세요.

검증 헤더는 캐시 데이터와 서버 데이터가 같은지 검증하는 데이터

크게 2가지가 있는데 Last-modified와 ETag가 있음

이 두 가지를 활용하여서 클라이언트에서 서버로 요청할 때 조건부 요청 헤더를 만들어서 보내면 됨

조건부 요청 헤더에서는 검증 헤더로 조건에 따른 분기를 서버에 요청합니다. Last-modified일 떄는 If-Modified-Since가 사용되고, ETag일 때는 If-None-Match가 사용됨. 서버에서는 각 조건이 만족되면 200, 만족되지 않으면 304 응답을 보냄

 

Last-modified, If-Modified-Since

데이터가 수정이 되었는지 안되었는지에 따라서 응답이 달라짐

데이터가 변경이 되지 않았으면? 변경이 일어나지 않았으므로 실패이므로 304 응답이 됨

반대로 데이터가 변경되었다면 성공이기 때문에 200 응답이 됨

 

ETag, If-None-Match

ETag는 단순하게 같으면 재사용, 다르면 다운받는 식으로 동작

서버에서 응답 시 ETag를 전달해주고 클라이언트는 캐시에 ETag를 저장

그리고 다시 요청할 때 ETag를 검증하는 헤더를 사용

 

인증 / 보안

• Hashing에 대해서 설명해주세요.

대부분의 탐색 방법들은 탐색 키를 저장된 키 값과 반복적으로 비교하면서 탐색을 원하는 항목에 접근

반면 해싱은 키 값에 직접 산술적인 연산을 적용하여 항목이 저장되어 있는 테이블의 주소를 계산하여 항목에 접근

이렇게 키 값의 연산에 의해 직접 접근이 가능한 구조를 해시 테이블(hash table)이라함

해시 테이블을 이용한 탐색을 해싱(hashing)이라 함

• Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.

Cookie는 HTTP 프로토콜의 비상태성을 보완하기 위한 수단으로, 브라우저에 데이터를 저장할 때 사용함

Cookie의 MaxAge 옵션은 쿠키를 얼마나 유지할 것인지, Expires 옵션은 언제 폐 기할 것인지 지정하는 옵션

두 옵션을 동시에 설정하면 MaxAge가 더 높은 우선 순위로 적용

이 두 옵션중 하나라도 설정하지 않으면, 해당 쿠키는 브라우저가 닫힐 때 폐기

쿠키를 빠르게 폐기하고 싶다면 옵션을 설정하지 않는 것이 좋고, 쿠키를 계속 사용하고 싶다면 두 옵션 중에 하나라도 설정해주는 것이 좋음

이 때, 브라우저를 종료하면 삭제되는 임시 쿠키를 세션 쿠키(Session Cookie)라고 하고,

설정한 옵션만큼 사용가능한 쿠키를 영속성 쿠키(Persistent Cookie)라고 함