[기술 면접 준비] Mockterview_React_50제_17~26번

17. JSX란 무엇인가요?

JSX는 Javascript에 XML을 추가하여 확장한 문법. 리액트로 프로젝트를 개발할 때 사용됨(공식적인 자바스크립트 문법은 아님) 브라우저에서 실행하기 전에 Babel을 사용하여 일반 자바스크립트 형태의 코드로 변환됨. 특징 : 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리함. 자바스크립트에서 HTML 을 쓰듯 사용하기 때문에 가독성이 높고 작성하기 쉬움. 규칙 : 1. 반드시 부모 요소 하나가 감싸는 형태여야 함 2. 자바스크립트 표현식은 { }안에 작성 3. if문(for문) 대신 삼항 연산자(조건부 연산자) 사용 4. React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용 ex) class -> className. React는 JSX 사용이 필수가 아니지만, JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 도움이 됨. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줌.

 

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

20. 세션과 쿠키를 비교하여 설명해주실 수 있을까요?

✔️ 답변

HTTP 프로토콜 환경은 stateless한 특성을 가지기 때문에 서버는 클라이언트가 누구인지 매번 확인해야 함. 이 특성을 보완하기 위해서 쿠키와 세션을 사용함. 쿠키란 사용자의 브라우저에 저장되고, 통신할 때 HTTP 헤더에 포함되는 텍스트 데이터 파일. 클라이언트에 300개 까지 쿠키 저장이 가능하고 하나의 도메인당 20개의 값만 가질 수 있음. 특정 웹사이트에 접속할 때 발생함. 사용자의 인증을 도와주고 만료기간이 있어 시간이 지나면 자동으로 삭제됨. 세션이란 일정 시간 동안 같은 사용자(브라우저)로부터 들어오는 일련의 요구를 하나의 상태로 보고, 그 상태를 유지시키는 기술. 방문자가 웹 서버에 접속해 있는 상태를 하나의 단위로 보고 그것을 세션이라고 함. 브라우저를 닫거나, 서버에서 세션을 삭제했을 때만 삭제됨. 쿠키는 서버의 자원을 사용하지 않으며, 세션은 서버의 자원을 사용함. 보안 면에서 세션이 더 좋으며, 속도 면에 있어서는 서버에서 쿠키가 더 빠름.

✔️ 추가

쿠키는 클라이언트 로컬에 저장되기 때문에 변질되거나 request에서 스니핑 당할 우려가 있어서 보안에 취약하지만, 세션은 쿠키를 이용해서 session-id만 저장하고 그것으로 클라이언트를 구분하여 서버에서 처리하기 때문에 비교적 보안성이 높음. 그러나 사용자가 많아지면 서버 메모리를 많이 차지하게 됨

 

https://www.daleseo.com/http-cookies/

쿠키 1부: HTTP로 설명하는 쿠키(cookie)

21. 브라우저에서 이용할 수 있는 스토리지는 무엇이 있는지 설명해주실 수 있을까요?

클라이언트 단, 즉 브라우저 상에 데이터를 저장할 수 있는 기술인 웹 스토리지에는 크게 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있음. 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면에, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않음. 다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸합니다. 반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있음. 하지만 이러한 로컬 스토리지의 데이터 영속성(persistence) 어디까지나 계속해서 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당함. 웹 스토리지를 사용할 때 주의사항은 오직 문자형(string) 데이터 타입만 지원한다는 것임.

+ 해결방법은 JSON 형태로 데이터를 읽고 쓰는 것. 아래 블로그 참고

 

https://www.daleseo.com/js-web-storage/

[자바스크립트] 웹 스토리지 (localStorage, sessionStorage) 사용법

23. ContextAPI 란 무엇인가요?

Context는 props를 사용하지 않고 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능(props drilling을 해결할 수 있음) 즉, Context는 전역 데이터를 담고 있는 하나의 저장 공간임. 1. React 패키지에서 제공하는 createContext 함수를 호출하고 인자로 해당 컨텍스트에 디폴트로 저장할 값을 넘김. 2. 어떤 컴포넌트에서 Provider로 감싸주면, 그 하위에 있는 모든 컴포넌트들은 Context에 저장되어 있는 전역 데이터에 접근할 수 있음. 3. Consumer를 이용하거나, useContext를 사용하거나, contextType을 사용하는 방법( 클래스 컴포넌트에서만 가능)이 있음. 함수 컴포넌트에서만 사용할 수 있는 useContext는 가장 가까운 Provider가 제공하는 value를 가져오게 됨. Provider에서 제공한 value가 달라지면 useContext를 쓰고있는 모든 컴포넌트가 리렌더링되는 문제가 있음.

 

https://www.daleseo.com/react-context/

React Context 사용법

https://ko.reactjs.org/docs/context.html

Context – React

https://react.vlpt.us/basic/22-context-dispatch.html

22. Context API 를 사용한 전역 값 관리 · GitBook

https://velog.io/@velopert/react-context-tutorial

다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법

24. 이분탐색이 무엇이고 시간복잡도는 어떻게 되며 그 이유는 무엇인가요?

이진 탐색(binary search)이란 데이터가 정렬돼 있는 배열에서 특정한 값을 찾아내는 알고리즘. 배열의 중간을 기준으로 데이터를 탐색하기 때문에 반드시 데이터가 정렬된 상태로 존재해야 함. 배열의 중간에 있는 임의의 값을 선택하여 찾고자 하는 값 X와 비교. X가 중간 값보다 작으면 중간 값을 기준으로 좌측의 데이터들을 대상으로, X가 중간값보다 크면 배열의 우측을 대상으로 다시 탐색함. 처음에 N개 크기의 배열에서 단계가 하나씩 지나감에 따라 탐색할 배열의 크기가 반씩 줄어드는 것. 여기서 실행된 탐색의 횟수가 시간 복잡도가 될 것이고 그 값을 K라고 한다면, K = log2N. 즉, 이진 탐색의 시간 복잡도는 O(logN) 임. 시간복잡도 Big O 표기법으로 나타낸 것. 배열을 전수 조사하는 O(N)에 비해 빠른 탐색 알고리즘임. 중간을 기준으로 탐색 대상을 절반씩 줄여나가기 때문에 O(logN)만에 값을 찾을 수 있음.

 

https://cjh5414.github.io/binary-search/

이진 탐색(Binary Search) 알고리즘 개념 이해 및 추가 예제

25. 트리, 그래프를 비교하여 설명해주실 수 있을까요?

그래프란 노드와 노드간을 연결하는 간선으로 구성된 자료구조. 이를 통해 연결된 노드간의 관계를 표현할 수 있음. 그래프는 순환 혹은 비순환 구조를 이룸. 또한 방향이 있는 그래프와 없는 그래프가 있고, 부모-자식 관계라는 개념이 없으며 2개 이상의 경로가 가능함. 그래프는 네트워크 모델. 그러나 트리는 그래프중에서도 특수한 케이스에 해당하는 자료구조임. 트리는 두개의 노드 사이에 반드시 1개의 경로만 가지며 사이클이 존재하지 않는 방향그래프임. 부모-자식관계가 존재해 레벨이 존재함. 노드가 N개이면 간선은 n-1개, 각 레벨 k에 존재하는 노드는 2^k개. 방향성이 존재하고, 사이클은 존재하지 않음. 트리의 순회는 전위순회, 중위순회, 후위순회 3가지가 존재함. 트리는 계층 모델.

 

https://bigsong.tistory.com/33

[자료구조] 그래프와 트리(Graph, Tree)

https://jongminlee0.github.io/2021/02/21/treeandgraph/

[Algorithm] Tree(트리)와 Graph(그래프) - Jongmin's Blog

https://velog.io/@starkshn/%EA%B7%B8%EB%9E%98%ED%94%84-%EC%9D%B4%EB%A1%A0-%EA%B8%B0%EC%B4%88

그래프 이론 기초

26. HTTP에 비해 HTTPS가 더 안전한 원리를 설명해주실 수 있을까요?

HTTPS는 데이터를 암호화하고 서버의 ID를 인증하며 데이터 무결성을 보장하고 사용자 신뢰를 높여 웹 서버와 클라이언트 간의 보다 안전한 통신 채널을 제공함. HTTPS는 안전한 연결을 위해 공개키 기반 암호화 방식인 SSL(Secure Sockets Layer) 또는 그 후속인 TLS(Transport Layer Security) 프로토콜을 사용하여 서버와 클라이언트 간의 통신에 대한 보안을 제공함. 데이터가 중간에서 가로채져도 암호화된 형태로 전송되므로 데이터를 읽을 수 없음. 클라이언트가 웹 서버에 접속할 때, 웹 서버는 인증서를 전송함. 클라이언트는 인증서를 검증하기 위해 인증기관의 정보를 사용함. 인증기관(CA)은 인증서 서명을 검증하고, 인증서의 정보가 유효한지 검사함. 인증서가 유효할 경우 클라이언트는 암호화 기술을 사용하여 서버와 통신할 수 있게 됨. 즉, HTTPS는 HTTP에 비해 데이터를 보호하고, 중간자 공격을 방지하며, 서버 인증을 통해 안전한 통신을 보장함

 

*추후

14. 즐겨 보는 테크 유튜버나 뉴스레터가 있다면 알려주실 수 있을까요?

18. 최근에 본 기술 아티클에 대해 설명해주실 수 있을까요?

19. 포트폴리오에서 시간복잡도를 낮춘 사례가 있다면 설명해주실 수 있을까요?

22. 가장 인상 깊게 읽었던 책과 그 이유에 대해 알려주실 수 있을까요?