당신의 FE 지식은 안녕하신가요?

네. 그러니 연습해 봅시다.

Q1. 브라우저 주소창에 URL입력후 화면에 콘텐츠가 보이기까지의 과정을 설명해보세요. (브라우저, 네트워크, 백엔드 모두 설명해도 됨)

• 브라우저에 URL을 입력하면, 먼저 도메인의 IP 주소를 조회해 서버와 TCP 연결을 설정하고, HTTP 요청을 보냅니다. 서버는 HTML, CSS, JS 등 리소스를 응답으로 보내고, 브라우저는 HTML과 CSS를 파싱해 각각 DOM과 CSSOM 트리를 생성한 후, 이를 결합해 렌더 트리를 만듭니다. 최종적으로 브라우저의 렌더링 엔진이 렌더 트리를 기반으로 콘텐츠를 화면에 표시합니다.

Q2.DOM 트리에서 querySelector를 사용할 때, 선택자(selector)의 구체성이 성능에 미치는 영향을 설명해보세요

• 복잡한 자식이나 후손 선택자를 사용할수록 선택자의 구체성이 높아져, 해당 요소를 찾는 시간이 더 많이 걸릴 수 있습니다. 이는 브라우가 전체 트리를 순회하게 하여 성능저하로 이어질 수 있습니다.

Q3. Flexbox에서 flex-grow, flex-shrink, flex-basis의 역할을 설명하고, 이들이 레이아웃 구성에 어떻게 기여하는지 설명하세요. (아는 내용만 설명해도 좋습니다)

• flex-grow는 공간이 남을 때 Flex Item이 커지는 상대적인 크기입니다. flex-shrink는 flex-grow와 반대로 공간이 부족할 때 Flex Item이 줄어드는 상대적인 크기입니다. flex-basis는 Flex Item의 초기 크기를 지정합니다. 이 세 요소를 통해 레이아웃 내 요소들이 유연하게 확장, 축소 될 수 있습니다.

Q4. 번들링 과정에서 일어날 수 있는 '트리 쉐이킹'이 어떻게 동작 가능한 것인지 설명해보세요.

• 트리 쉐이킹은 사용되지 않는 코드를 제거하는 최적화 기법으로, ES6 모듈 시스템이 정적 구조를 갖기 때문에 가능해졌습니다. 컴파일 시간에 모듈 간의 의존성을 에 분석하여, 사용되지 않는 모듈이나 함수는 번들에서 제외하게 됩니다.

Q5. Promise.all과 Promise.race의 차이점을 설명하고, 각각의 사용 사례가 떠오르면 설명해보세요.

• 둘 다 여러개의 프로미스를 병렬로 실행할 때 사용하는 방법입니다. Promise.all은 모든 프로미스가 완료될 때까지 기다린 후 모든 결과를 배열로 반환하며, 하나라도 실패시 에러로 처리합니다. 이는 이미지 업로드와 같이 순서 상관없이 모두 완료해야 하는 경우에 적합합니다. Promise.race는 가장 먼저 완료된 프로미스의 결과를 반환하며, 네트워크 요청에 타임아웃 설정할 때 유용합니다.

Q6. 옵저버 패턴이 MVC 아키텍처에서 어떻게 활용되는지 설명하고, 프론트엔드 프레임워크에서의 구현 예를 설명해보세요.

• 옵저버 패턴은 모델의 상태가 변할 때 그 변화를 뷰에게 자동으로 알리는 구조입니다. MVC 패턴에서는 사용자의 입력으로 데이터가 변경되면 모델이 업데이트되고, 이 변화를 뷰가 자동으로 반영하는 방식으로 사용됩니다. React에서는 상태가 변경될 때마다 컴포넌트가 리렌더링 되어 UI가 자동으로 업데이트 되는 구조에서 사용됩니다.

Q7. 제네릭(Generic)이 타입스크립트에서 어떻게 활용되는지 설명해보세요

• 타입스크립트에서 제네릭은 객체, 함수, 변수의 타입을 미리 고정하지 않고, 필요할 때 유연하게 지정하여 재사용성을 높입니다. 또한 extends를 사용하면 안정성을 높일 수 있습니다.

Q8. useReducer Hook을 useState와 비교하여 설명하고, 복잡한 상태 관리에 useReducer를 사용하는 장점을 설명하세요

• useReducer는 useState보다 복잡한 상태 관리가 필요한 경우에 적합합니다. 여러 액션에 따라 상태가 변화할 때, 상태 변화 로직을 리듀서 함수로 분리하여 코드의 가독성과 유지보수성을 높일 수 있습니다. 또한, useReducer는 하위 컴포넌트에 콜백 대신 상태 변경의 구체적인 로직을 숨긴 dispatch라는 매개체 역할의 함수를 전달할 수 있습니다.

Q9. 스스로 생각하는 코드의 품질저하 지점은 무엇인가요? 이를 개선하기 위한 리팩토링 전략을 말해주세요

• 코드의 품질 저하 지점은 하나의 파일에서 렌더링, 데이터 처리 등 여러 기능이 섞여 관리와 유지보수가 어려워지는 순간이라고 생각합니다. 이를 개선하기 위해서 단일 책임 원칙을 적용하여, 한 파일이 하나의 기능만 수행하도록 코드를 분리하여 리팩토링합니다 . 이를 통해 코드의 가독성, 유지보수성, 재사용성을 향상시킵니다.

Q10. JavaScript에서 객체가 속성과 메서드를 찾을 때 프로토타입 체인이 어떤 역할을 하는지 간단히 설명하세요. 혹시 Object.create가 무엇인지 알면 추가로 설명해주세요.

• 프로토타입 체인은 객체가 자신의 속성이나 메서드를 찾을 수 없을 때, 그 객체의 프로토타입을 따라 올라가며 찾게 해줍니다. Object.create은 새로운 객체를 생성하면서 해당 객체의 프로토타입을 명시적으로 설정하여, 프로토타입 체인을 효과적으로 사용하게 해줍니다.

Q11. 리액트 컴포넌트 간의 상태를 공유하는 효과적인 방법을 설명해보세요.

• 리액트에서는 상태를 props로 자식 컴포넌트에 전달하여 상태를 공유합니다. 구조가 복잡해질 경우 Context API를 사용하여 전역적으로 상태를 관리할 수 있습니다. 또한, Zustand와 같은 전역 상태 관리 라이브러리나, Tanstack Query와 같은 서버 상태 관리 라이브러리를 사용하는 방법도 있습니다.

Q12. Proxy API와 Object.defineProperty를 사용한 데이터 바인딩의 차이점을 설명하고, 각각의 장단점을 비교하세요. 한가지만 설명해도 좋습니다.

• Proxy API는 객체 전체에 대한 접근과 변화를 일괄적으로 감시할 수 있어 데이터를 유연하게 감시할 수 있지만, 구형 브라우저에서는 지원이 제한될 수 있습니다. Object.defineProperty는 특정 속성에 대해서만 감시를 할 수 있어, 속성을 하나씩 정의해야 하고 새 속성 추가시 감시가 되지 않아 유연성은 낮지만, 구형 브라우저와의 호환성은 좋습니다.

Q13. React에서 고차 컴포넌트(Higher-Order Component, HOC)의 주요 단점은 무엇인가요?

• 컴포넌트 트리의 깊이 증가

Q14.React Router v6에서 중첩된 라우트(Nested Routes)를 구현할 때 사용하는 컴포넌트는 무엇인가요?

• Outlet
• 중첩된 라우트 구조에서 자식 컴포넌트를 렌더링하는 역할.

Q15. React의 Suspense 컴포넌트가 비동기 컴포넌트 로딩을 처리할 때 사용하는 주요 메커니즘은 무엇인가요?

• Concurrent Mode
• React에서 UI 업데이트를 더 부드럽고 응답성 있게 처리하기 위한 비동기 렌더링을 지원하는 모드.