본문 바로가기
카테고리 없음

기술면접 대비 질문 #38~#41

by stayby 2023. 10. 31.

Context API란 무엇인가요?

context api는 리액트에 내장된 기능으로 props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 해줍니다.

이 context api를 사용하면 부모 컴포넌트에서 생성한 상태를 자식 컴포넌트에게 전달할 수 있으며, 이를 통해 컴포넌트 간에 명시적인 props 전달 없이도 상태를 공유할 수 있습니다.

api의 주요 개념은 createContext, Provider, Consumer 이며, createContext로 새로운 컨텍스트를 생성하고 provider로 해당 컨텍스트 값을 제공하며, consumer로 값을 소비합니다.

이를 사용하면 전역 상태를 효과적으로 관리하고 컴포넌트 트리의 깊은 곳까지 손쉽게 데이터를 전달할 수 있습니다.


Array, LinkedList 에 대해 설명해주시고 각각 어떻게 사용하는지 말씀해주세요

먼저 배열은 정적 자료구조라고 불립니다. 그래서 배열을 만들기 위해서는 미리 크기를 정해놓게 되는데 그렇게 되면 해당 크기 만큼의 연속된 메모리 주소를 할당 받게 됩니다.

연속된 메모리 주소를 할당 받고 있기 때문에 데이터가 인덱스라는 것을 갖게 됩니다. 

index를 갖게 된다는 것은 즉, 임의 접근이 가능하다는 장점을 가지며, 그러므로 접근과 탐색에 용이합니다.

또한, index를 가지고 있기 때문에 탐색은 시간 복잡도를 가집니다.

하지만 크기를 미리 정해놓았기 때문에 수정하는 것이 불가능하며, 이미 크기를 정해놓은터라 해당 배열 크기 이상의 데이터를 저장할 수 없다는 단점이 있습니다.

 

연결 리스트는 동적 자료구조라고 불립니다. 그러므로 크기를 정할 필요가 없습니다. 또한 배열처럼 연속된 메모리 주소를 할당 받지 않습니다.

대신 노드라는게 존재하며, 그 노드 안에 데이터가 있고 다음 데이터를 가리키는 주소를 가지고 있습니다.

연결 리스트는 말씀드린 것처럼 크기를 정해놓지 않았기 때문에 크기의 제한이 없습니다.

이로 인해 데이터 추가, 삭제가 자유롭다는 장점이 있습니다.

반면, 배열처럼 연속적인 메모리 주소를 할당 받지 않았기 때문에 임의로 접근하는 것이 불가능합니다.

즉, 데이터를 탐색할 때 순차적으로 접근해야 한다는 것입니다.


AWS S3를 사용하는 이유와 사용 경험에 대해서 답변해주세요

aws s3은 강력하고 안정적인 객체 스토리지 서비스로, 데이터를 저장하고 검색하기 위한 클라우드 기반의 솔루션입니다.

여러 이유로 aws s3를 사용하는 것이 이점이 있습니다.

 

먼저, 확장성 및 신뢰성 입니다. aws s3는 사용자가 필요로 하는 만큼의 스토리지를 제공합니다. 즉 데이터가 증가하면 s3은 자동으로 확장되므로 사용자는 확장에 대한 걱정을 할 필요가 없습니다.

또한, s3는 데이터를 안전하게 저장하기 위한 다양한 보안기능을 제공합니다. 예를 들어 서버측 암호화, 사용자 엑세스 제어 등이 있으며, 이로 인해 신뢰성을 보장합니다.

 

다음은 내구성 및 가용성입니다. s3는 설계된 내구성이 99.999999999%(11 9`s)로 데이터 손실의 위험이 매우 적습니다. 또한 중복된 데이터가 여러 위치에 저장되어 있어 서비스 장애가 발생해도 데이터가 안전합니다.

 

그리고 Aws 매니지먼트 콘솔, cli 등을 사용해서 버킷 및 객체를 쉽게 생성하고 관리함으로서 직관적인 관리가 가능하며,

웹 기반 애플리케이션에서 직접적으로 사용될 수 있으므로 개발자는 쉽게 웹 콘텐츠를 호스팅하거나 사용자 업로드를 처리할 수 있습니다.

 

저는 아직 S3를 활용해본 경험이 없어서 이 정도까지만 말씀드릴 수 있을 것 같습니다.


Web Vital을 개선할 수 있는 방안에 대해 설명해주실 수 있을까요? 예를 들어 LCP, CLS, FID 각각의 개념, 진단법, 각 지표 개선에 효과적인 조치방안을 언급해주시면 좋습니다.

먼저, web vital이란 구글에서 발표한 웹페이지 성능을 측정하기 위한 도구입니다.

여기에 3가지 핵심적인 지표로 LCP, CLS, FID 가 있습니다.

 

먼저 LCP는 페이지의 로딩 중에 가장 큰 콘텐츠가 화면에 표시되는 시간을 측정합니다.

크롬 개발자 도구 또는 PageSpeed Insight를 사용하여 확인할 수 있습니다.

LCP의 개선방안으로는 이미지와 같은 파일 사이즈를 압축하거나 css, js 실행 시간을 단축함으로서 렌더링 최적화를 하는 방법이 있습니다.

 

CLS는 페이지의 렌더링 중에 레이아웃이 얼마나 불안정한지를 측정합니다.

크롬 개발자 도구의 퍼포먼스 탭에서 확인할 수 있습니다.

CLS의 개선방안으로는 이미지와 동적 콘텐츠에 크기를 명시적으로 지정하여 레이아웃 변경을 방지하여 크기를 고정하고

텍스트가 로드될 때 크기의 변화를 최소화하기 위해 font-display : swap을 사용할 수 있습니다.

 

FID는 사용자가 페이지와 상호 작용할 때 브라우저가 대응하는데 걸리는 시간을 측정합니다.

크롬 개발자 도구의 퍼포먼스 탭에서 확인 가능하며, lighthouse 또는 pageSpeed Insight에서도 확인할 수 있습니다.

FID의 개선방안으로는 필요하지 않은 스크립트를 제거하고 비동기 로딩을 통해 자바스크립트 최적화를 진행하며,

사용자가 상호 작용하기 전에 필요한 자원을 미리 로드하여 대기시간을 최소화함으로서 개선할 수 있습니다.