기술면접 답변 준비

시간복잡도와 공간복잡도란 무엇인가요?

시간 복잡도는 특정 알고리즘이 어떤 문제를 해결하는데 걸리는 시간을 의미하고 공간 복잡도는 작성한 프로그램이 얼마나 많은 메모리를 차지 하느냐를 분석하는 방법입니다.
공간 복잡도는 대용량 메모리 보편화로 인해 중요도가 떨어진 반면 시간 복잡도의 경우 알고리즘을 잘못 구성하면 결과값이 나오지 않거나 너무 느린속도로 나와서
최근에는 시간복잡도를 더 우선시 하여 코드를 작성합니다.

스택, 큐에 대해 설명해주실 수 있을까요?

스택은 데이터를 차곡차곡 쌓아올린 형태로 top으로 정한 곳에서만 접근이 가능한 후입선출(LIFO)의 자료구조를 말합니다.
큐는 스택과 다르게 입,출구가 나눠져있고 한쪽에서는 삭제, 한쪽에서는 삽입만 가능한 선입선출(FIFO)의 자료구조를 말합니다.

배열, 링크드리스트를 비교하여 설명해주실 수 있을까요?

배열은 특정 크기만큼 연속된 메모리 공간에 데이터를 저장하는 자료구조이며 처음과 끝에서만 삽입과 삭제가 가능하고,
링크드리스트는 연속된 메모리 공간에 저장되어 있지 않고, 각각의 데이터가 메모리 공간 상에 고유한 노드로 존재하기에 어느 위치든 삽입과 삭제가 가능합니다.

CORS란 무엇이고 어떻게 허용할 수 있나요?

CORS란 지정된 도메인 외부에 있는 자원에 대한 접근을 통제하는 브라우저 메커니즘 입니다.
허용하는 방법으로 클라이언트에서는 proxy 설정을 하거나 서버에서 response header에 Access-Control-Allow-Origin 설정을 해주면 됩니다.

사용자 패스워드를 전송하고 보관하는 방법을 설명해주실 수 있을까요?

유저의 패스워드를 받은 클라이언트는 평문으로 서버로 전송하고 서버에서는 패스워드를 단방향 해시 함수로 암호화하여 보관합니다. 단방향 해시함수는 수학적 연산에 의해 원본 데이터를 완전히 다른 암호화된 데이터(다이제스트)로 변환하는 것을 말합니다. 원본 데이터로는 다이제스트를 구할 수 있지만 다이제스트로는 원본데이터를 구할 수 없어야 하고, 이것을 단방향이라 합니다. 단방향 해시함수는 브루트포스 공격으로 쉽게 당할 수 있기 때문에 이를 보완하기 위해 입력된 다이제스트를 N번 반복해서 생성하는 것인 key stretching과 원문 패스워드에 임의의 문자열을 추가하여 해싱하는 것인 salting을 이용해 보안의 강도를 높힐 수 있습니다.

var, let, const 에 대해 설명해주실 수 있을까요?

ES6 이전까지는 var를 통한 변수 선언이 가능했지만 ES6 이후 const와 let이 나왔고 이를 사용하는 것이 권장됩니다. var의 문제점은 변수 중복 선언이 가능하며, 예기치 못한 값을 반환할 수 있고 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수가 되며 변수 선언문 이전에 변수를 참조하게 되면 오류를 내지 않고 undefined를 반환합니다.
이를 해결하기위해 let과 const가 나오게 되었고, let은 변수 중복 선언이 불가하지만 재할당이 가능한 키워드이고, const는 반드시 선언과 초기화를 동시에 진행해야 하며, 재선언과 객체를 제외한 원시 값의 경우 재할당이 불가능합니다.

Promise란 무엇인지 설명해주실 수 있을까요?

promise란 ES6이후 나온 기능으로 비동기 함수 호출이나 비동기 연산이 완료되었을 때 이후에 처리할 함수나 에러를 처리하기 위한 함수를 설정하고 흔히 말하는 콜백지옥을 해결하기 위해 나오게 된 모듈입니다.

Hoisting이란 무엇인지 설명해주실 수 있을까요?

코드가 실행하기 전 변수선언 및 함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말합니다. 호이스팅은 var,let,const라는 키워드가 빠질 수 없는데, 자바스크립트의 모든 선언은 호이스팅이 일어나지만 let,const는 선언된 변수를 선언문 이전에 참조하면 참조에러가 발생하기 때문에 호이스팅이 발생하지 않는 것처럼 동작합니다.

async/await 이란 무엇인지 설명해주실 수 있을까요?

async/await은 setTimeout, callback, promise같은 동기식으로 처리하는 기법들의 약간의 문제점들을 해결함과 동시에 사용법이나, 가독성 부분에서도 크게 좋아졌기에 가장 최근에 추가된 키워드 이고, 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있는 기법입니다.

Arrow Function 이란 무엇인지 설명해주실 수 있을까요?

함수표현식보다 단순하고 간결하며, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되며, 익명함수와 암시적 반환을 가능하게 해주는 함수입니다. 하지만 화살표 함수는 무턱대로 사용해서는 안됩니다. 언제나 화살표 함수의 this는 상위 스코프의 this를 가리킨다는 특성 때문에 this의 사용법에 따라 ES5의 this와 ES6의 this를 정확히 알고 잘 사용하는 것이 좋습니다.

‘==’와 ‘===’ 연산자의 차이는 무엇인지 설명해주실 수 있을까요?

‘==’는 타입이 무관하게 값만 같으면 true를 반환하고, ‘===’는 타입과 값이 모두 같으면 true를 반환하는 연산자 입니다. 예를 들어 undefined와 null을 비교할 때 '=='을 사용하게 되면 둘 다 빈값이기 때문에 true를 출력하게 됩니다. 하지만 해당 경우에 '==='를 사용하게 되면 타입까지 비교하기 때문에 false가 출력됩니다. 이유로는 undefined는 undefined타입이나 null은 object 타입이기 때문에 이러한 결과가 나오게 되는 것 입니다.

Virtual DOM이란 무엇이고 Real DOM과의 차이는 무엇인가요?

Virtual DOM이란 주로 SPA에서 적용되는 개념이며 Real Dom에서 직접 처리하는 게 아니라 Virtual DOM이 버퍼 역할을 해줌으로써 어떤 부분이 바뀔 지 미리 계산 및 수정 후에 해당 수정된 부분만 업데이트 해주기 위한 기술입니다.
Real DOM과의 차이점으로는 Real DOM은 자식 노드가 추가되면 전체 문서가 갱신되는 반면에 Virtual DOM은 버퍼 역할을 해줌으로써 Real DOM을 추상화한 DOM과 비교하여 변경점만 Real DOM에 적용하여 전체 문서가 갱신되지 않습니다.

useRef 에 대해 아는 만큼 설명해주실 수 있을까요?

저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook을 말합니다. 자바스크립트를 사용할 때에는 비슷한 함수로 querySelector를 사용했는데, React에서는 useRef라는 Hook을 사용하게 됩니다. useRef는 리렌더링 하지 않고, 컴포넌트의 속성만 조회 및 수정을 합니다. 사용하는 경우는 컴포넌트에 focus를 위치시킬 필요가 있는 경우, 속성 값을 초기화 할 필요가 있는 경우, 애니메이션을 직접적으로 실행 시킬 경우에 사용하는 것으로 알고 있습니다.

리액트 컴포넌트의 라이프사이클에 대해 설명해주실 수 있을까요?

라이프 사이클이란 생명주기를 말하고, 컴포넌트가 렌더링을 준비하는 시점부터 페이지가 언마운트 될 때 까지의 사이클을 말합니다. 라이프사이클에는 9가지 단계가 있는데, 크게는 3가지로 나뉩니다. Mount, Update, Unmount가 있습니다. Mount는 컴포넌트가 생성되고 브라우저에 처음 나타났을 때를 말하고, Update는 부모 컴포넌트가 렌더링 할 때를 말하고, Unmount는 컴포넌트가 브라우저에서 사라질 때를 말합니다. 리액트에서는 처음에 클래스형 컴포넌트를 사용했는데, 이를 사용 시 코드의 재사용성 저하, 코드 구성의 난이도 상승 등의 문제가 많았고 진입장벽이 너무높았던 탓에 함수형 컴포넌트를 사용하게 되었고, state의 사용이나 생명주기를 직접 다루는 기능은 Hook이라는 것으로 모든 것 들을 해결해 주었습니다.

JSX란 무엇인가요?

Javascript에 XML을 추가해 확장한 문법을 말합니다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니고, 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. 또한 JSX를 사용하게 되면 React가 더욱 도움이 되는 에러 및 경고메시지를 표시할 수 있게 해주기도 하고, 보기쉽고 익숙하다는 장점을 가지고 있어 가독성이 우수하다는 평가를 받고 있습니다. 나아가 높은 활용도를 가지고있다는 장점도 있습니다.

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

많은 아티클들을 보았지만 유독 기억에 남는 아티클은 카카오페이 tech log에 있는 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유에 대한 아티클입니다. 이번 프로젝트에 React Query를 도입하게 되었고 이를 알아보고자 글을 찾아 보던 도중 발견한 아티클입니다. 카카오라는 회사 자체가 우리나라에서 영향력이 가장 큰 IT기업이라 해도 과언이 아니기에 이 회사에서는 왜 React Query를 쓰는지에 대해서 자세하게 나와있어 감명 깊었고, Redux를 왜 사용하지 않았는지에 대해서도 비교를 통해서 잘 설명을 해준 아티클 입니다.

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

쿠키와 세션은 비슷한 역할을 하며, 동작 원리도 비슷하다. 그 이유는 세션도 결국 쿠키를 사용하기 때문입니다. 큰 차이점으로는 사용자의 정보가 저장되는 위치입니다. 쿠키는 서버의 자원을 전혀 사용하지 않으며, 세션은 서버의 자원을 사용한다는 큰 차이점이 있습니다. 쿠키는 클라이언트 로컬에 저장되기 때문에 변질되거나 request에서 스니핑 당할 우려가 있어서 보안에 취약하지만 세션은 쿠키를 이용해서 session-id만 저장하고 그것으로 구분하여 서버에서 처리하기 때문에 비교적 보안성이 높습니다. 속도면에서는 쿠키가 세션보다 비교적 빠른 속도를 나타냅니다.

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

로컬 스토리지와 세션 스토리지가 있습니다. 두 가지의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있습니다. 세션 스토리지는 세션이 끝날 때 저장된 데이터가 지워지지만 로컬 스토리지는 세션이 끝나더라도 지워지지 않습니다. 두 가지의 공통점은 데이터를 브라우저 상에서 저장한다는 것이며, 자바스크립트 API가 완전히 동일한 형태입니다.

ContextAPI란 무엇인가요?

일반적으로 부모와 자식간 props를 날려 state를 변화시키는 것과는 달리 context api는 컴포넌트 간 간격이 없습니다. 즉, 컴포넌트를 건너띄고 다른 컴포넌트에서 state와 function을 사용할 수 있습니다. context는 컴포넌트안에서 전역적으로 데이터를 공유하도록 나온 개념이고, 이러한 데이터는 보통 로그인 데이터, 웹 내 사용자가 쓰는 설정파일, 테마, 언어 등 다양하게 컴포넌트간 공유되어야할 데이터로 사용합니다.

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

정렬된 배열에서 특정 값을 찾는 탐색 알고리즘입니다. 즉, 중간값을 찾으려는 값의 대소를 비교한 뒤 탐색범위를 반으로 줄여가며 값을 찾는 탐색 알고리즘 입니다. 이진 탐색의 시간복잡도는 logN으로 배열을 전수 조사하는 N에 비하면 상대적으로 빠른 탐색 알고리즘에 속합니다. logN만에 값을 찾을 수 있는 이유는 중간을 기준으로 탐색 대상을 절반씩 줄여나가기 때문입니다.

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

그래프는 노드와 노드간을 연결하는 간선으로 구성된 자료구조이고, 이를 통해 연결된 노드 간의 관계를 표현할 수 있는 자료구조입니다. 그래프의 특징으로는 순환 혹은 비순환 구조를 이루고, 방향이 있는 그래프와 없는 그래프가 존재하고, 부모-자식 관계라는 개념이 없고, 2개 이상의 경로가 가능하다는 점입니다.
트리도 노드와 노드간을 연결하는 간선으로 구성된 자료구조 이지만, 그래프 중에서도 특수한 케이스에 해당하는 자료구조입니다. 트리는 두 개의 노드 사이에 반드시 1개의 경로만을 가지며 사이클이 존재하지 않는 방향그래프 입니다. 트리의 특징으로는 부모-자식 관계라는 개념이 있다는 것이고, 방향성이 존재하고 사이클은 존재하지 않는 비순환 구조를 이룬다는 차이점이 있습니다.

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

http에 비해 https의 차이는 SSL인증서 입니다. SSL인증서는 사용자가 사이트에 제공하는 정보를 암호화하는데, 쉽게 말해서 데이터를 암호로 바꾸는 것 입니다. 이렇게 전송된 데이터는 중간에서 누군가 훔쳐낸다고 하더라도 데이터가 암호화 되어있기 때문에 해독할 수 없고, https는 TLS프로토콜을 통해서도 보안을 유지합니다. TSL은 데이터 무결성을 제공하기 때문에 데이터가 전송 중에 수정되거나 손상되는 것을 방지하고, 사용자가 자신이 의도하는 웹사이트와 통신하고 있음을 입증하는 인증 기능도 제공하고 있기 때문에 https가 http보다 더 안전하다고 말할 수있습니다.

앞으로 3개월, 6개월, 1년 동안 어떤 것을 공부할 계획인지, 그리고 그러한 계획을 세운 이유는 무엇인지 알려주실 수 있을까요?

앞으로 3개월동안은 회사에서 요구하는 기술이나 라이브러리에 대한 공부에 집중하게 될 것이고, 그 이후에는 타입스크립트와 next.js를 공부할 계획입니다. 회사에서 요구하는 기술이나 라이브러리는 당연히 한 회사의 구성원이 되려면 습득해야 하기에 공부를 하는것이 맞다는 판단하에 계획하게 되었고, 타입스크립트의 경우 자바스크립트로 코드를 작성할 때 보다 작성하기가 까다롭긴 하지만, 코드를 작성하던 도중 미리미리 에러를 표시해주기도 하고, 자바스크립트에서는 잘 찾을 수 없는 에러들도 쉽게 찾아낼 수 있다는 장점에 공부할 계획입니다. next.js는 리액트의 서버렌더링을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크인데, 리액트로 서버사이드 렌더링을 하다보면 react router, redux 등을 적용하다보면 가이드 예시가 없을 시 초반에 삽질을 많이하는데에 반면, next.js에는 매우 간단하게 해결해준다는 장점에 있어 계획하게 되었습니다.

TCP 3 way handshake란 무엇인지 설명해주실 수 있을까요?

TCP/IP 네트워크 환경에서 서버와 클라이언트를 연결하는데 필요한 프로세스이고, 데이터를 주고받기 전에 서버와 클라이언트가 확인 패킷을 3단계로 교환하여 연결을 맺습니다.

TCP 와 UDP 를 비교하여 설명해주실 수 있을까요?

TCP는 연속성보다 신뢰성 있는 전송이 중요할 때에 사용되는 프로토콜이며, UDP는 TCP보다 빠르고 네트워크 부하가 적다는 장점이 있지만 신뢰성 있는 데이터 전송을 보장하지는 않습니다.
그렇기 때문에 신뢰성보다는 연속성이 중요한 실시간 스트리밍과 같은 서비스에 자주 사용됩니다.

Base64 인코딩이란 무엇인가요?

64진법을 말하며, Binary Data를 텍스트로 변경하는 인코딩을 말합니다. 변경하는 방식으로는 Binary Data를 6비트씩 자른 뒤 6비트에 해당하는 문자를 Base64 색인표에서 찾아서 치환합니다.

프로세스와 스레드를 비교하여 설명해주실 수 있을까요?

프로세스는 하나의 프로그램이 OS에게 메모리를 할당받아 실행되고 있는 것이며, 스레드는 그 프로세스 내에서 실행되는 작업의 흐름 단위 입니다. 프로세스는 OS에게 stack, heap, data등을 메모리 영역으로서 할당받고, 스레드는 해당 프로세스 내에서 stack을 제외한 자원을 다른 스레드와 공유합니다.

깊은 복사와 얕은 복사의 차이는 무엇이고 JS에서 각각을 구현하는 방법은 어떻게 되는지 설명해주실 수 있을까요?

얕은 복사는 참조에 의한 할당이 이루어지므로 복사본과 원본이 같은 데이터 주소를 참조하고 있고, 깊은 복사는 주소를 복사해서 공유하는 것이 아닌 원시 값처럼 완전한 복사본을 만드는 것을 말합니다. 얕은복사는 대표적으로 slice() 메소드로 구현할 수 있고, 깊은 복사로는 전개연산자,JSON.stringify()나 JSON.parse() 또는 재귀 함수를 구현한 복사로 구현이 가능합니다.

JS의 passed by value 와 passed by reference 에 대해 아는 만큼 설명해주실 수 있을까요?

passed by value는 복사된 데이터를 전달하여 구성해서 값을 수정해도 원본 데이터는 영향을 주지 않도록 하는 방식을 뜻하고, passed by reference는 주소 값을 전달하여 실제 값에 대한 Alias를 구성함으로써, 값을 수정하면 원본의 데이터가 수정되도록 하는 방식입니다.

고차 함수란 무엇인지 설명해주실 수 있을까요?

고차 함수란 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말합니다. 즉, 고차 함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환합니다. 또한 외부 상태 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고있고, 자바스크립트의 함수는 일급 객체이므로 값처럼 인자를 전달할 수 있으며 반환할 수도 있습니다.

힘들고 쉽지 않았지만 극복한 경험을 하나 이야기해주실 수 있을까요?

여태까지의 경험으로는 실전 프로젝트때로 사례를 들 수 있을 것 같습니다. 실전 프로젝트때 주제를 정하는 동안 팀원들의 주장도 많이 엇나갔고, 다소 말싸움을 벌인 적도 있었는데 결국에는 한가지 의견으로 통일되어서 시작을 하게 되었습니다. 근데 시작을 하고보니 스코프가 생각했던것 보다 많이 커졌고 이거를 남은 5주동안 구현할 수 있을까 하는 생각이 많이 들었습니다. 이번 프로젝트를 하면서 여태 해보지 않았던 기능들을 많이 맡게 되었는데, 너무 어려워서 힘들기도 했고 지치기도 했지만 팀원들의 응원도 받고 스스로도 문제를 해결하기위해 밤을 지새가며 노력한 결과 만족스러운 프로젝트를 얻게 되었던 경험이 있습니다.

VanillaJS와 비교하여 리액트를 사용하는 이유에 대해 설명해주실 수 있을까요?

리액트는 앱 작성 방식을 정의하는 라이브러리 이고, 데이터가 앱에 사용되는 방식과 그 데이터가 변화하는 결과에 따른 UI변경 방법에 대해 명확한 규칙을 설정하여 수행하는 반면에 JS는 규칙을 설정하지 않는 스크립트언어이기 때문에, 이러한 순수 자바스크립트로 작성된 앱은 자유로울 수 있지만, 그만큼 정해진 것이 없기 때문에 코드를 작성하다가 길을 잃어버리기가 쉽습니다.
대표적인 차이점으로는 사용자 인터페이스를 만드는 방법, 앱에서 기능이 분할되는 방식, 브라우저에 데이터가 저장되는 방법과 UI업데이트 방법의 차이가 있습니다.

상태의 불변성이 중요한 이유가 무엇인가요?

리액트는 부모컴포넌트가 리렌더링 되거나 state, props가 변화 될 때 렌더링이 일어나게 됩니다. 렌더링을 할지 말지 판단하기 위해 state의 변화를 관찰하게 되는데, 그 과정에서 state 객체 내의 모든 value를 다 깊은비교로써 비교하게되면 효율적이지 않게 됩니다. 그렇기 때문에 이전 객체와 현재 객체를 얕은 비교로 비교하기 때문에 불변성의 유지가 중요합니다. 불변성을 지키지 않는 예시로 state를 직접 변경하게 된다면 value 값은 바뀌지만 참조값은 바뀌지 않으므로 렌더링이 일어나지 않는 경우도 생길 수 있고, mutable한 상태를 사용하게 된다면 리액트 돔이 제대로 추적을 할 수 없을 것이고, 예상치 않은 사이드 이펙트가 발생할 수 있습니다.

Lazy loading과 Code splitting에 대해 아는 만큼 설명해주실 수 있을까요?

lazy loading은 필요 시점까지 객체의 초기화를 연기시키기 위해 프로그래밍에 흔히 사용되는 디자인 패턴의 하나로 적절하게 사용될 경우 프로그램 운영 차원에서 효율적입니다.
code splitting은 lazy loading을 통해 앱 사용자에게 획기적인 성능 향상을 기대할 수 있고, 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄일 수 있습니다.

Server Side Rendering, Client Side Rendering, Static Site Generation 의 장단점을 설명해주실 수 있을까요?

SSR의 장점으로는 해당 첫페이지에 해당하는 문서만 브라우저에 전달하여 브라우저가 렌더링 하기 때문에 첫 페이지 로딩속도가 CSR에 비해 빠릅니다. 단점으로는 페이지 이동 시 마다 클라이언트가 서버에게 필요한 데이터를 요청하고 서버가 응답해주는 방식이다 보니 속도가 다소 느립니다.
CSR의 장점으로는 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 수준높은 UX 경험을 할 수 있습니다. 단점으로는 서버에 첫 요청시 전체 페이지에 대한 모든 문서 파일을 받다 보니 SSR보다 로딩속도가 느립니다.
SSG의 장점으로는 html만 제공하면 되므로 웹서버 설정이 간편하다는 점과, DB관리 등 운영에 필요한 자원소모가 거의 없고, 기본 컨텐츠가 md 파일이므로 다른 플랫폼으로 이전이 쉽습니다. 단점으로는 정적파일로 제공되기 때문에 현재의 사용자 수준에 상응하는 웹 서비스를 제공하기 어렵습니다.

Event bubbling 과 capturing 을 비교하여 설명해주실 수 있을까요?

버블링은 이벤트가 발생한 요소부터 window까지 이벤트를 전파하고, 캡쳐링은 window로 부터 이벤트가 발생한 요소까지의 이벤트를 전파합니다. 즉 두가지는 단순히 방향의 차이가 있습니다.

재미있게 공부한 알고리즘이 있다면 설명해주실 수 있을까요?

프로그래머스의 완주하지 못한 선수라는 알고리즘을 재밌게 공부했습니다. 해당 문제에서는 한명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였는데 마라톤에 참여한 선수들의 이름이 단긴 배열 A와 완주한 선수들의 이름이 담긴 배열 B가 주어졌을 때 완주하지 못한 선수의 이름을 return하는 문제였는데, 해당 문제를 풀면서 그전에는 많이 사용해보지 못했지만 react에는 많이 사용되는 filter함수를 사용하게 되었는데 직접 사용해보면서 동작 방식을 익혀가는 시간이 재미있었습니다.

https://naver.com을 주소창에 입력했을 때 일어나는 과정에 대해 아는 만큼 설명해주실 수 있을까요?

3가지의 과정으로 입력한 텍스트 정보확인 -> 네트워크 호출 -> 렌더링 작업 순으로 진행되게 됩니다.
입력한 텍스트 정보를 확인할 때 대부분의 인터넷 브라우저는 자사의 주소창과 검색창을 동일하게 사용하고 있어, 입력한 텍스트가 검색어인지, URL인지 판단 후 검색어이면 검색 엔진의 URL에 검색어를 포함한 주소로 페이지를 이동 시키고, URL이면 브라우저 엔진에서 네트워크 스레드를 통해 네트워크 호출을 수행합니다.
네트워크가 호출되면, 네이버 서버의 주소를 알기위해 네임서버와 통신하고 알아낸 주소를 바탕으로 네이버 서버와 통신하여 필요한 데이터를 응답받습니다.
데이터를 응답 받으면 렌더링이 진행되는데 HTML을 파싱하여 돔트리를 구축해 CSS를 파싱하여 CSSOM트리를 구축합니다. 그 후 돔트리와 CSSOM 트리를 통해 렌더 트리를 구축하고 배치 한 후 화면에 그려줍니다.

상태관리의 대표적인 도구 하나와 그것의 원리에 대해 구체적으로 설명해주실 수 있을까요? 예를 들어 리덕스라면 리덕스가 무엇이고 어떻게 활용이 되는지, 어떤 흐름으로 데이터가 들어왔다가 나가는지, 데이터 흐름은 양방향인지 단방향인지, 어떤 함수가 데이터를 가져오게 해주는지 등을 언급해주시면 좋습니다.

가장 대표적인 상태관리 도구로는 리덕스가 있습니다. 리덕스란 데이터를 중앙집권화 시켜 데이터 사용 및 관리를 편리하게 만드는 라이브러리 입니다. 리덕스는 리액트에서 많이 쓰이는데 상태관리가 복잡해 질 경우 store라는 상태관리를 보다 더 간단하게 관리할 때 활용됩니다. 데이터의 흐름은 한 방향으로 흘러야 하기 때문에 action객체는 dispatch에 전달되고, dispatch는 reducer를 호출하고 reducer는 새로운 state를 생성하는 방식으로 데이터 운반이 실행 됩니다. 그 후 reducer에서 받아온 action객체나 payload에 의해 상태가 변경되게 됩니다.

브라우저 렌더링 과정에 대해 아는 만큼 설명해주실 수 있을까요? 예를 들어 화면에서 DOM이 어떻게 결정되고, CSS는 어떻게 입혀지는지 등을 언급해주시면 좋습니다.

HTML파일과 CSS파일을 파싱해서 각각의 돔 트리(DOM, CSSOM)를 만들고, 두 트리를 결합하여 렌더링 트리를 만듭니다. 그 후 렌더링 트리에서 각 노드의 위치와 크기를 계산한 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든 후 레이어를 합성하여 실체 화면에 나타나게 됩니다.

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

LCP 개선 방법으로는 렌더링을 빠르게 하여 CSS, JS의 실행시간을 단축시키고, 서버의 응답시간을 향상시키고 파일 사이즈를 단축 시켜 개선을 하게 됩니다.
CLS 개선 방법으로는 콘텐츠의 높이를미리 지정하여 확보해두는 것이 포인트인 개념입니다. 해당 콘텐츠의 높이를 사전에 지정해 둠으로써 레이아웃 shift가 일어나지 않도록 할 수있습니다.
FID 개선 방법으로는 처리시간이 긴 JS의 개선이 포인트인 개념입니다. 먼저 TBT가 느린 요인을 분석해 원인이 되는 JS를 추출해서 왜 느린 것인지 분석을 한 후 불필요한 부분을 제거 하거나 분할 및 비동기처리를 해줍니다.