프론트 기술 면접 준비

Q. 실행 컨텍스트

코드의 실행 환경에 대해 여러 정보를 담고 있는 영역.

JavaScript에서 실행 컨텍스트는 JavaScript 코드가 실행되는 환경을 나타내는 추상적인 개념입니다. 여기에는 변수 값, 현재 실행 라인 및 호출 스택과 같은 코드의 현재 상태에 대한 정보가 포함됩니다.

JavaScript에서 새 함수가 호출될 때마다 새 실행 컨텍스트가 생성되어 호출 스택의 맨 위에 추가됩니다. 이 실행 컨텍스트에는 함수 인수, 함수 내에서 선언된 변수 및 외부 환경에 대한 참조(함수가 선언된 컨텍스트)에 대한 정보가 포함됩니다.

함수가 반환되면 실행 컨텍스트가 스택에서 제거되고 이전 컨텍스트가 복원됩니다. 이 프로세스는 호출 스택이 비어 있을 때까지 계속되며 이 시점에서 코드 실행이 완료됩니다.

Q. 자바스크립트에서 콜 스택이 뭔가요?

A: JavaScript에서 호출 스택은 함수가 호출되고 실행되는 순서를 추적하는 데이터 구조입니다. JavaScript 엔진이 현재 실행 컨텍스트를 추적하고 프로그램 흐름을 관리하는 데 도움이 됩니다. 새 함수가 호출될 때마다 새 실행 컨텍스트가 호출 스택의 맨 위에 추가됩니다. 함수가 반환되면 실행 컨텍스트가 스택에서 제거되고 이전 컨텍스트가 복원됩니다.

Q: 딱 URL을 치고 들어갔을때 일어나는 일들을 설명해보시오.

URL을 쳤을때 일어나는 일 - 웹 브라우저 동작 방식

Q: useRef와 useState의 차이점

A: React에서 useRef와 useState는 모두 구성 요소에서 시간이 지남에 따라 변경되는 상태 및/또는 값을 관리할 수 있게 해주는 후크입니다. 주요 차이점은 useRef는 DOM 노드에 대한 참조 또는 시간이 지남에 따라 변경되지 않는 값을 저장하는 데 사용되는 반면 useState는 시간이 지남에 따라 변경되는 값을 저장하고 변경될 때 다시 렌더링을 트리거하는 데 사용된다는 것입니다. useRef는 다시 렌더링할 때마다 다시 만들지 않으려는 타이머 또는 콜백 함수와 같은 값을 저장하는 데 사용할 수 있는 반면, useState는 다시 렌더링을 트리거해야 하는 값에 사용해야 합니다.

Q: 프론트에서 jwt를 구현하는 방법을 설명해주세요.

A: 프런트엔드에서 JWT(JSON 웹 토큰)를 구현하려면 일반적으로 성공적인 인증 후 백엔드 서버에서 JWT를 먼저 얻습니다. 그런 다음 이 JWT를 브라우저(예: 로컬 스토리지 또는 쿠키)에 저장하고 백엔드에 대한 모든 후속 API 요청의 헤더에 포함하여 사용자를 식별할 수 있습니다. 그런 다음 백엔드는 각 요청에서 JWT의 유효성을 검사하고 사용자가 인증되었는지 확인할 수 있습니다.

Q: 세션과 쿠키의 차이를 설명하세요.

A: 세션과 쿠키는 모두 웹 사이트에서 사용자 활동에 대한 정보를 저장하기 위한 메커니즘입니다. 주요 차이점은 정보가 저장되는 위치입니다. 쿠키는 사용자의 브라우저에 저장되고 세션은 서버에 저장됩니다. 쿠키는 크기가 제한되어 있으므로 일반적으로 사용자 ID 또는 인증 토큰과 같은 소량의 정보를 저장하는 데 사용됩니다. 반면 세션은 더 많은 정보를 저장할 수 있으며 여러 요청에 대한 사용자 활동을 추적하는 데 더 적합합니다.

Q: 웹소켓, 폴링에 대해 설명하세요.

A: WebSocket과 폴링은 둘 다 클라이언트(일반적으로 웹 브라우저)와 서버 간의 실시간 통신을 달성하기 위한 기술입니다. WebSocket은 단일 연결을 통해 전이중 양방향 통신 채널을 제공하므로 클라이언트가 지속적으로 요청을 할 필요 없이 서버가 실시간으로 클라이언트에 데이터를 푸시할 수 있습니다. 반면에 폴링은 업데이트를 확인하기 위해 정기적으로 서버에 HTTP 요청을 반복적으로 보내는 클라이언트를 포함합니다. WebSocket은 더 효율적이지만 구현하기가 더 복잡할 수 있으며 모든 브라우저나 네트워크에서 지원되지 않을 수 있습니다.

Q: virtual dom이 무엇이고 어떤 장점과 단점이 있는지 설명하세요.

가상 DOM은 사용자 인터페이스 업데이트의 속도와 효율성을 높이기 위해 React에서 사용되는 개념입니다.

가상 DOM 사용의 이점:

향상된 성능: Virtual DOM을 사용하면 React가 전체 구성 요소 트리를 다시 렌더링하는 대신 변경된 UI 부분만 업데이트할 수 있으므로 애플리케이션의 성능이 크게 향상될 수 있습니다.

향상된 개발자 경험: Virtual DOM은 DOM의 직접적인 조작을 추상화함으로써 개발자가 동적 사용자 인터페이스를 보다 쉽게 구축하고 유지할 수 있도록 합니다.

향상된 추상화: Virtual DOM은 개발자가 DOM의 하위 수준 세부 정보에 대해 걱정하기보다는 구성 요소 및 상태 측면에서 응용 프로그램에 대해 생각할 수 있도록 하는 더 높은 수준의 추상화를 제공합니다.

Virtual DOM 사용의 단점:

메모리 사용량 증가: Virtual DOM은 실제 DOM의 가상 표현을 생성하므로 DOM을 직접 조작하는 것보다 더 많은 메모리를 소비할 수 있습니다.

복잡성 증가: Virtual DOM은 특히 경험이 없는 개발자의 경우 코드를 더 복잡하고 이해하기 어렵게 만들 수 있는 추가 추상화 계층을 추가합니다.

전반적으로 Virtual DOM은 React 생태계에서 중요한 도구이며 상당한 성능 이점을 제공하고 개발자가 동적 사용자 인터페이스를 쉽게 구축하고 유지 관리할 수 있도록 합니다.

Svelte와 같은 일부 라이브러리 및 프레임워크는 Virtual DOM을 사용하지 않고도 성능 측면에서 React를 능가할 수 있는 것은 사실입니다. 이는 Svelte가 Virtual DOM이 필요하지 않은 사용자 인터페이스 업데이트에 다른 접근 방식을 사용하기 때문입니다.

Svelte에서 사용자 인터페이스에 대한 업데이트는 런타임이 아닌 컴파일 타임에 처리되므로 Virtual DOM이 필요하지 않습니다. 이 접근 방식은 Virtual DOM을 사용하는 React에 비해 사용자 인터페이스를 더 빠르게 업데이트하고 성능을 향상시킬 수 있습니다.

그러나 가상 DOM이 React 애플리케이션의 성능에 영향을 미치는 유일한 요소는 아니라는 점은 주목할 가치가 있습니다. React 애플리케이션의 성능에 영향을 줄 수 있는 구성 요소 트리의 복잡성, 애플리케이션의 크기 및 타사 라이브러리 사용과 같은 다른 많은 요소가 있습니다.

궁극적으로 Virtual DOM을 사용하거나 사용하지 않는 것 사이의 선택은 각 프로젝트의 특정 요구 사항과 요구 사항은 물론 성능과 개발자 경험 간의 균형에 따라 달라집니다.

Q: useMemo, react memo 차이와 용도를 설명하세요.

useMemo는 특정 상태의 값을 메모(즉, 캐싱)하여 기능 구성 요소의 성능을 최적화할 수 있는 React Hook입니다. useMemo를 사용하는 구성 요소가 다시 렌더링될 때 후크는 해당 종속성 중 하나가 변경된 경우에만 값을 다시 계산합니다. 이는 불필요한 재렌더링을 방지하고 애플리케이션의 성능을 향상시키는 데 도움이 될 수 있습니다.

React.memo로 래핑된 구성 요소가 다시 렌더링될 때 React는 해당 props가 변경된 경우에만 다시 렌더링합니다. 이는 불필요한 재렌더링을 방지하여 애플리케이션의 성능을 향상시키는 데 도움이 될 수 있습니다.

복잡한 수학 공식이나 대규모 데이터 변환과 같이 구성 요소에서 특정 계산의 성능을 최적화해야 할 때 useMemo를 사용합니다. 반면에 불필요한 재 렌더링을 방지하여 구성 요소의 전체 성능을 최적화하려는 경우 React.memo를 사용합니다.

props가 자주 바뀌는 경우 성능 향상이 거의 없고 변화하는 props에 대해 얕은 참조만 하므로 array나 props 내부에서 바뀌는 값을 알 수 없다.

props가 자주 바뀌는 경우엔 해당하는 props에 대해 useMemo나 useCallback을 쓰는게 좋다.

react.memo를 사용하면 약간의 오버헤드도 발생하므로 신중하게 쓰는게 좋다.

Q. React ErrorBoundary

👨🏻‍💻 ErrorBoundary?

ErrorBoundary 사용 이유

선언형이란? 어떻게(How)보다 무엇을(What)에 집중 즉, 결과물에만 집중하고, 복잡한 과정은 추상화합니다. 명령형의 경우 한 줄씩 읽어 나가면서 다음에 어떤 일이 발생할지 추측해야 한다. 반면에 선언형의 경우 자세한 방법을 모르더라도 코드만 보고도 어떤 일이 발생할지 예측이 단숨에 가능하다.

ErrorBoundary가 잡아내지 못하는 에러

Q. 리엑트 컴포넌트에 대해 설명

A: React에서 컴포넌트는 사용자 인터페이스의 섹션을 정의하는 작고 재사용 가능한 코드 조각입니다.

props를 인수로 받아들이고 React 요소를 반환하는 JavaScript 함수일 뿐입니다.

구성 요소가 렌더링되면 해당 render 메서드가 실행되어 React 요소 트리를 반환합니다. React는 render 메서드의 출력과 일치하도록 UI를 업데이트합니다.

props가 변경되면 React는 구성 요소를 다시 렌더링하고 UI를 업데이트하여 변경 사항을 반영합니다. 이를 통해 React는 데이터가 변경될 때 UI를 효율적으로 업데이트할 수 있습니다.

# 기본질문
### 기본
- 관심 있는 기술 트렌드?
### 브라우저
- SessionStorage, LocalStorage, Cookie 차이
- DOMContentLoad, Load 차이
- SEO에 대해
### JS
- ECMAScript와 Javascript의 차이
- 웹소켓, 폴링
- CORS, CSRF
### 환경
- webpack과 babel에 대해
### React
- React의 장점은?
- SPA에서 Virtual DOM이 쓰이는 이유
- React hooks 설명?
- Typescript의 장점과, 도입했을 때 기대할 수 있는 효과는?
---
# 과제
- 가장 아쉬웠던 부분?
- 과제에서 사용한 Presentational/Container 패턴에 대해 묻기
    - 이 패턴의 장/단점?
    - 다른 디자인 패턴에 대해 아는 게 있는지?
    - 장점 중 하나가 재사용성인데, Container와 Presentational 코드를 같은 디렉토리 레벨에 넣어놓은 이유?
- 아까 접근성에 대해 노력하신다고 하셨는데, 과제를 Semantic 마크업으로 작성 안 하신 것 같다. Semantic 마크업에 대해 설명해주세요.
- blockUI를 썼을 때 UI가 블록되는 건 납득할 수 있는데, UI 전체가 자주 깜빡이는 건 좀 거슬린다. UX나 기술적으로 어떻게 풀 수 있을지?
- 문제 목록 페이지에서는 코드 양이 좀 길다고 느껴지는데, 예를 들어 문제를 클릭했을 때 handleClickProblem 함수에서 case별로 굉장히 많은 로직을 처리하는 것 같다. 근본적으로는 1개의 클릭함수가 모든 클릭을 담당하기 때문으로 보이는데, 이 부분을 리팩토링한다면?
---
# 이력서 기반
### 기술
ㅇㅇㅇ 프로젝트
- 재사용 가능한 컴포넌트 구현하셨다고 했는데 자세하게 설명 부탁
ㅇㅇㅇ 프로젝트
- 사용자 간의 채팅 구현은 어떤 식으로 구현했었는지? 데이터를 지속적으로 받는 것(소켓/폴링/롱폴링) 차이
- 채팅, 영상과 같이 많은 리소스를 사용하는 웹앱의 경우 디바이스별 사용성 편차가 있다. 이 부분에 대해 고민한 부분이 있는지?
- 서비스에 트래픽이 몰렸을 때 시나리오가 존재하는지?(폴백/롤백) 어떻게 할 수 있을지
- 웹 빌드배포를 어떻게 진행했는지, 경험해본 CI/CD 구조?
- 사용해본 브랜치 전략에 대해
- 상태관리 관련 Redux 이외에 다른 라이브러리를 사용해본 적이 있는지?
- 테스트, 코드리뷰 경험?
### 커리어
- 파트장 경험이 있다고 했는데, 팀 매니징에 어려운 부분은?
- 토이프로젝트를 해본 적이 있는지?
- 이직하는 이유?

https://xiubindev.tistory.com/119