24.08.19_TIL (프론트엔드 예상 면접 질문)

 

 

1. LangChain을 선택한 기준과 이유

OpenAI assistant 와 LangChain 중에서 팀원들과 같이 회의 후 결정함

• 장기적인 관점에서 보았을 때 OpenAI보다 더 나은 LLM(대형 언어 모델)들이 다양하게 출시되는 것을 생각해 LangChain을 선택하는 것은 미래 지향적인 결정함
• 프로젝트가 특정 모델에 종속되지 않고 유연하게 대응할 수 있게 한다. 새로운 기술 발전에 발맞추어 지속적으로 업그레이드될 수 있다. 특히, LangChain의 체이닝 기능과 MemoryBuffer를 사용한 이전 답변 저장 기능은 프로젝트의 특성상 필요하여 결정함

 

2. 리액트의 핵심 요소는 무엇이라고 생각하는가?

 

프론트엔드를 접하면서 자바스크립트와 바닐라js를 기초적으로 인지한 후에 리액트를 추천하여 배웠습니다.

어떤 요소에서 강점이 되는 것일까 생각해보았습니다. 리액트는 HTML과 JavaScript를 함께 작성할 수 있는 JSX 문법을 제공하고,  리액트는 실제 DOM 대신 Virtual DOM을 사용해 변경 사항을 먼저 메모리에서 처리하고, 최종적으로 실제 DOM에 필요한 부분만 업데이트합니다. 이를 통해 성능을 크게 향상시킵니다. 훅을 써서 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해줍니다. useState, useEffect 같은 기본 훅들이 있으며, 이를 활용해 상태 관리, 사이드 이펙트 처리 등을 할 수 있습니다.

 

 

여기서 DOM이란?

DOM(Document Object Model)은 웹 페이지의 구조화된 표현으로, HTML 문서의 요소들을 트리 구조로 표현한 것입니다. 이 구조는 브라우저가 웹 페이지를 렌더링하고, 자바스크립트 같은 스크립트 언어로 문서의 내용과 구조를 동적으로 변경할 수 있게 합니다.

DOM의 구성 요소:

1. 노드(Node): DOM 트리의 각 요소, 속성, 텍스트 등을 "노드"라고 부릅니다. 모든 HTML 태그는 DOM 트리에서 노드로 표현됩니다.
2. 엘리먼트(Element): HTML 태그 자체를 의미합니다. 예를 들어, <div>, <p> 같은 태그들이 엘리먼트 노드입니다.
3. 어트리뷰트(Attribute): HTML 태그의 속성을 의미합니다. 예를 들어, <img src="image.jpg" alt="example">에서 src와 alt는 어트리뷰트 노드입니다.
4. 텍스트(Text): 엘리먼트 내부의 텍스트 콘텐츠를 나타냅니다.

DOM의 역할:

• 문서 구조 정의: HTML 문서의 구조를 정의하여 브라우저가 이를 기반으로 웹 페이지를 렌더링합니다.
• 상호작용 지원: 자바스크립트를 사용해 DOM을 조작함으로써, 페이지의 내용, 스타일, 구조를 동적으로 변경할 수 있습니다.
• 이벤트 처리: 버튼 클릭이나 입력 등 사용자 인터랙션을 처리하기 위해 이벤트를 DOM 요소에 연결할 수 있습니다.

DOM은 웹 개발에서 매우 중요한 개념으로, 사용자와 상호작용하는 동적인 웹 페이지를 구축하는 데 필수적인 역할을 합니다.

 

3. 전역상태 라이브러리를 사용하지 않고, 지역 상태로만 개발을 할 경우 발생할 수 있는 3가지 문제점

상태 공유의 복잡성, 중복이나 일관성문제, 상태 변경시 성능 문제를 들 수 있습니다.

공유를 할 때 지역 상태만을 사용하면 상태를 부모 컴포넌트를 통해 상위에서 하위로 전달해야하기 때문에 전달이 복잡해지며 코드가 비효율적이고 유지보수하기 어려워질 수 있습니다. 그리고 깊은 컴포넌트 트리에서 불필요하게 많은 컴포넌트들이 상태전달에 관여하게 됩니다. 

중복과 일관성의 문제에서는 동일한 데이터를 여러 컴포넌트에서 사용해야 할 때 지역 상태만을 사용하면 여러 곳에서 관리하게 되어 데이터 중복이 발생해 일관성 유지가 어렵고 관리하는 과정에서 버그가 발생할 수 있습니다.

상태 변경시의 성능 문제에서는 특정 상태가 변경될때 이를 반영하기 위해 여러 컴포넌트가 불필요하게 리렌더링 될 수 있어서 성능저하가 발생할 수 있습니다.

 

4. 리액트는 가상돔을 사용하는데 리얼 돔을 사용하지 않고 가상돔을 사용하는 이유는?

가상돔(Virtual DOM)을 사용하는 이유는 리얼 돔이 대규모 애플리케이션에서는 변경사항을 반영할 때 시간이 많이 소모되는 등 성능저하가 발생할 수 있다. 가상돔에서 실제로 변경된 부분만 리얼돔에 적용하면 브라우저가 수행해야할 작업을 줄이고 빠른 업데이트를 할 수 있다.

 

 

https://hyebeen2658.tistory.com/14

DOM(돔) vs Virtual DOM(가상 돔)