신입 프론트엔드 개발자 기술면접 답변 (React, TS, 프론트엔드 전반)

React

 

React에 대해 설명해주세요.

React는 Facebook에서 개발한 UI 라이브러리로, 사용자 인터페이스를 구축하기 위한 도구입니다. 컴포넌트 기반 아키텍처를 사용하며, 가상 DOM을 활용하여 성능을 최적화합니다.

React의 원리, 특징, 장단점이 무엇인가요?

원리: React는 컴포넌트 기반 아키텍처와 가상 DOM을 사용하여 UI를 효율적으로 렌더링하고 업데이트합니다.

특징: JSX 문법을 사용해 선언적으로 UI를 표현하며, 단방향 데이터 흐름과 가상 DOM을 통한 효율적인 렌더링이 주요 특징입니다.

장점: 높은 생산성, 컴포넌트 재사용성, 성능 최적화, 커뮤니티 지원이 뛰어납니다.

단점: 초기 학습 곡선, 프레임워크와 라이브러리 선택의 어려움이 있을 수 있습니다.

Virtual DOM이 무엇인지 설명해주세요.

Virtual DOM은 실제 DOM의 가벼운 복사본입니다. React는 상태 변화에 따라 가상 DOM을 업데이트하고, 실제 DOM과 비교하여 변경된 부분만 업데이트합니다. 이를 통해 성능을 향상시킵니다.

Virtual DOM 작동 원리에 대해 설명해주세요.

상태 변화가 발생하면 React는 가상 DOM을 새로 생성합니다.
이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분을 찾아냅니다.
변경된 부분만을 실제 DOM에 반영하여 화면을 업데이트합니다.

JSX에 대해 설명해주세요.

JSX는 JavaScript XML의 약자로, JavaScript와 유사한 XML 형식으로 작성된 문법입니다. React에서 컴포넌트의 UI를 정의할 때 사용됩니다.

엘리먼트와 컴포넌트의 차이에 대해 설명해주세요.

엘리먼트(Element): React에서 UI를 구성하는 가장 작은 단위로, 가상 DOM에서의 렌더링 결과입니다.
컴포넌트(Component): 엘리먼트의 구성 요소로, UI를 재사용 가능한 독립적인 모듈로 캡슐화합니다.

리액트에서 컴포넌트를 어떻게 생성하나요?

함수형 컴포넌트: 함수를 사용하여 컴포넌트를 정의합니다.
클래스형 컴포넌트: 클래스를 사용하여 컴포넌트를 정의하고, render 메서드를 구현합니다.

클래스형 컴포넌트를 사용해보셨나요?

예, 클래스형 컴포넌트는 React의 초기 버전부터 사용되었으며, 현재도 사용되고 있습니다.

클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해주세요.

클래스형 컴포넌트는 클래스로 정의되며, state와 라이프사이클 메서드를 사용할 수 있습니다.
함수형 컴포넌트는 함수로 정의되며, React Hooks를 사용하여 상태 관리와 라이프사이클과 유사한 동작을 수행할 수 있습니다.

라이프사이클에 대해 설명해주세요.

라이프사이클은 컴포넌트의 생성, 업데이트, 소멸 등의 단계를 나타내는 메서드의 집합입니다.
주요 라이프사이클 메서드로 componentDidMount, componentDidUpdate, componentWillUnmount 등이 있습니다.

라이프 사이클 메소드에 대해 설명해주세요.

componentDidMount: 컴포넌트가 처음으로 렌더링된 후 호출되는 메서드로, 초기 데이터 요청 및 설정에 사용됩니다.
componentDidUpdate: 컴포넌트가 업데이트된 후 호출되는 메서드로, 상태나 프롭스가 변경될 때 추가 작업을 수행합니다.
componentWillUnmount: 컴포넌트가 소멸되기 직전에 호출되는 메서드로, 리소스 해제나 타이머 해제에 사용됩니다.

함수형 컴포넌트의 장점에 대해 설명해주세요.

가독성과 유지보수성이 높아집니다.
더 작고 간결한 코드를 작성할 수 있습니다.
React Hooks를 통해 상태와 생명주기 기능을 사용할 수 있습니다.

React Hooks에 대해 설명해주세요.

React Hooks는 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 함수입니다. useState, useEffect, useContext 등이 있으며, 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 대체할 수 있습니다.

함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요. (useEffect => ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount)

useEffect를 사용하여 함수형 컴포넌트에서 라이프사이클 메서드와 유사한 동작을 수행할 수 있습니다.
useEffect의 첫 번째 인수로 콜백 함수를 전달하고, 두 번째 인수로 의존성 배열을 설정하여 특정 상황에만 실행되도록 제어할 수 있습니다.
예를 들어, useEffect(() => {...}, [dependency]) 형태로 사용할 수 있으며, dependency 배열에 값이 변경될 때마다 콜백 함수가 실행됩니다.

useEffect와 useLayoutEffect의 차이점에 대해 설명해주세요.

useEffect는 비동기로 작동하며, 렌더링 후에 실행됩니다. 렌더링 이후의 DOM 업데이트가 완료된 후에 콜백이 호출됩니다.
useLayoutEffect는 동기로 작동하며, 렌더링 후에 바로 실행됩니다. DOM 업데이트 이전에 콜백이 호출되므로 레이아웃과 렌더링 사이의 작업을 수행할 때 사용됩니다.

Pure Component에 대해 설명해주세요.

Pure Component는 React에서 제공하는 성능 최적화 도구 중 하나로, shouldComponentUpdate 메서드를 자동으로 구현한 컴포넌트입니다.
shouldComponentUpdate 메서드는 현재 프롭스와 상태가 이전과 다를 때만 렌더링을 허용하므로, 불필요한 렌더링을 방지할 수 있습니다.

shouldComponentUpdate에 대해 설명해주세요.

shouldComponentUpdate는 클래스형 컴포넌트에서 구현할 수 있는 라이프사이클 메서드로, 컴포넌트가 업데이트되기 전에 호출됩니다.
이 메서드를 사용하여 현재 프롭스와 상태가 이전과 다를 때만 렌더링을 허용하도록 설정할 수 있습니다.

State에 대해 설명해주세요.

State는 컴포넌트의 데이터를 저장하고 관리하는 데 사용되며, 동적인 UI 요소를 표현하는 데 필요합니다. 클래스형 컴포넌트에서 this.state로 접근합니다.

React에서 State를 어떻게 관리하나요?

클래스형 컴포넌트에서는 constructor 메서드에서 초기 상태를 설정하고, this.setState 메서드로 상태를 업데이트합니다.
함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 정의하고 업데이트합니다.

Props에 대해 설명해주세요.

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 메커니즘입니다. 읽기 전용이며 컴포넌트 내부에서 변경할 수 없습니다.

Props Drilling에 대해 설명해주세요.

Props Drilling은 컴포넌트 트리 구조에서 여러 단계를 거쳐 프롭스를 전달해야 하는 상황을 의미합니다. 이로 인해 코드 가독성이 떨어질 수 있습니다.

Props Drilling을 어떻게 해결할 수 있나요?

Context API나 Redux와 같은 상태 관리 라이브러리를 사용하여 부모-자식 간의 프롭스 전달을 간소화할 수 있습니다.
또한, 컴포넌트를 필요한 곳에서 렌더링하는 대신, 컴포넌트 컨테이너 패턴을 사용하여 불필요한 중간 컴포넌트를 제거할 수 있습니다.

setState는 동기적으로 동작하나요? 아니면 비동기적으로 동작하나요?

setState는 비동기적으로 동작합니다. 여러 setState 호출이 한 번의 렌더링으로 처리될 수 있으며, React가 성능 최적화를 위해 내부에서 일괄 처리합니다.

왜 비동기적으로 동작하나요?

React는 setState 호출을 그룹화하고 한 번에 여러 상태 변경을 처리할 수 있게 하기 위해 비동기 방식을 사용합니다. 이로 인해 성능이 향상됩니다.

HTML과 React의 이벤트 처리 차이점에 대해 설명해주세요.

React의 이벤트 처리는 camelCase로 작성됩니다. 예를 들어, HTML의 onclick은 React에서는 onClick으로 작성됩니다.
또한, React에서는 이벤트 핸들러에 return false를 사용하지 않으며, preventDefault() 또는 stopPropagation()을 명시적으로 호출해야 합니다.

Key Props를 사용하는 이유에 대해 설명해주세요.

Key Props는 React에서 배열을 렌더링할 때 각 요소를 고유하게 식별하는 데 사용됩니다. 이를 통해 React는 렌더링 변경을 최적화하고 성능을 향상시킵니다.

Ref의 용도에 대해 설명해주세요.

Ref는 React에서 DOM 요소나 클래스 컴포넌트 인스턴스에 직접 접근하기 위한 방법입니다. 주로 DOM 조작, 포커스 설정, 외부 라이브러리 통합 등에 사용됩니다.

제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.

제어 컴포넌트: React의 상태나 프롭스를 사용하여 폼 요소의 값과 상태를 관리하는 컴포넌트입니다.
비제어 컴포넌트: DOM 요소에 ref를 사용하여 직접 접근하고, React의 상태나 프롭스를 사용하지 않는 컴포넌트입니다.

HOC (Higher-Order Components)에 대해 설명해주세요.

HOC는 컴포넌트 로직을 재사용하기 위한 패턴으로, 함수를 인자로 받아 컴포넌트를 반환하는 함수입니다. 예를 들어, 로그인 여부를 확인하거나 스타일을 적용하는 데 사용됩니다.

Context API에 대해 설명해주세요.

Context API는 React의 상태를 전역적으로 관리하기 위한 메커니즘으로, 컴포넌트 트리를 횡단하여 데이터를 전달할 수 있습니다. Provider와 Consumer를 사용하여 값을 공유합니다.

React.Fragment에 대해 설명해주세요.

React.Fragment는 불필요한 부모 요소 없이 여러 자식 요소를 그룹화하는 데 사용됩니다. DOM에는 나타나지 않으며 가벼운 렌더링 최적화에 도움이 됩니다.

Portal에 대해 설명해주세요.

Portal은 React에서 컴포넌트를 현재 컴포넌트의 DOM 계층 구조에서 분리하여 다른 DOM 요소에 렌더링하는 방법을 제공합니다. 모달, 툴팁 등을 구현할 때 사용됩니다.

에러 바운더리에 대해 설명해주세요.

에러 바운더리(Error Boundary)는 React 컴포넌트 트리에서 예외를 처리하는 컴포넌트입니다. 하위 컴포넌트에서 발생한 예외를 캐치하고 대체 UI를 렌더링할 수 있습니다.

메모이제이션에 대해 설명해주세요.

메모이제이션(Memoization)은 이전에 계산한 결과를 캐싱하여 동일한 입력에 대한 연산을 재사용하는 최적화 기법입니다. 함수나 계산 결과를 저장하고 재사용함으로써 성능을 향상시킵니다.

리액트에서 메모이제이션을 어떤 방식으로 활용할 수 있나요?

useMemo와 useCallback 훅을 사용하여 메모이제이션을 적용할 수 있습니다. useMemo는 계산 결과를 캐싱하고, useCallback은 콜백 함수를 캐싱합니다.

useMemo와 useCallback에 대해 설명해주세요.

useMemo는 계산 결과를 캐싱하여 렌더링 시 다시 계산하지 않도록 합니다.
useCallback은 콜백 함수를 캐싱하여 렌더링 시 새로 생성되지 않도록 합니다.

React.memo와 useMemo의 차이에 대해 설명해주세요.

React.memo는 함수형 컴포넌트를 렌더링 결과를 메모이제이션합니다. 컴포넌트 자체를 캐싱하므로 렌더링 성능을 최적화합니다.
useMemo는 특정 값을 캐싱하여 해당 값이 변경되지 않는 한 새로 계산하지 않도록 합니다.

리액트 관련 패키지 중에 제일 좋다고 생각한 것은 무엇인가요?

개발 환경과 프로젝트 요구 사항에 따라 다르며, 주로 사용하는 패키지로는 React Router, Redux, Axios, styled-components, React Query 등이 있습니다.

리액트의 렌더링 성능 향상을 위해 어떻게 해야 하나요?

메모이제이션 기법(useMemo, useCallback) 활용
불필요한 렌더링 방지 (React.memo, shouldComponentUpdate)
가벼운 컴포넌트 분할 (모듈화)
불필요한 렌더링 트리 최적화 (리액트 개발자 도구 활용)

CSS in JS를 사용해 본 적이 있나요? 있다면 소감을 말해주세요.

CSS in JS는 컴포넌트 기반 스타일링을 위한 방법으로, 스타일과 컴포넌트를 결합하는 장점이 있습니다. styled-components, emotion 등이 대표적인 라이브러리입니다. 코드 유지보수와 재사용성 측면에서 편리하다고 생각합니다.

React 18 버전 업데이트 내용에 대해 말씀해주세요.

React 18은 Concurrent Mode의 안정화와 새로운 기능을 포함하는 주요 업데이트입니다. Suspense와 Concurrent 모드로 렌더링 성능을 개선하고, 서버 사이드 렌더링에서도 사용할 수 있게 됩니다.

Client Side Routing에 대해 설명해주세요.

Client Side Routing은 브라우저 내에서 페이지 간의 전환을 처리하는 방식입니다. 주로 React Router와 같은 라이브러리를 사용하여 구현하며, 페이지 간 전환 시 화면을 다시 그리지 않고 필요한 데이터만 가져오는 등의 성능 최적화가 가능합니다.

Next.js를 사용해보셨나요?

예, Next.js는 React 기반의 서버 사이드 렌더링 프레임워크로, SEO 최적화와 초기 로딩 성능 향상을 위해 사용됩니다.

React에서 Form 이벤트는 어떻게 제어하셨나요?

React에서 Form 이벤트는 onChange 핸들러를 사용하여 제어합니다. 입력 값이 변경될 때 상태를 업데이트하고, onSubmit 이벤트로 Form 제출을 처리합니다.

React Hook Form을 사용해보셨나요?

React Hook Form은 React에서 폼 관리를 간편하게 해주는 라이브러리입니다. 사용해보았으며, 폼 유효성 검사와 컨트롤을 관리하는 데 효과적입니다.

기억나는 Hook에 대해 전부 설명해주세요.

useState: 함수형 컴포넌트에서 상태를 관리할 수 있는 Hook으로, 상태 값을 가져오고 업데이트합니다.
useEffect: 부수 효과(데이터 가져오기, 구독 설정)를 처리하는 Hook으로, 렌더링 후에 실행됩니다.
useContext: Context API를 사용하여 컨텍스트 값을 가져오는 Hook입니다.
useRef: ref를 생성하고 DOM 또는 컴포넌트 인스턴스에 접근하는 데 사용합니다.
useReducer: Redux와 유사한 상태 관리를 제공하는 Hook으로, 상태와 액션을 사용하여 상태를 업데이트합니다.
useMemo와 useCallback: 성능 최적화를 위해 값을 메모이제이션하는 Hook으로, 렌더링 성능을 향상시킵니다.

React에서 컴포넌트 A가 사용하는 CSS 파일과 컴포넌트 B가 사용하는 CSS 파일의 선택자가 겹치는 이유가 뭘까요?

CSS는 전역 스코프를 갖지 않고, 컴포넌트가 독립적으로 스타일을 정의하더라도 렌더링 시 결합됩니다. 이로 인해 클래스 이름이 겹칠 수 있습니다.
CSS 모듈, CSS-in-JS, 스타일 컴포넌트 등을 사용하여 이 문제를 해결할 수 있습니다.

Redux에 대해 설명해주세요.

Redux는 상태 관리 라이브러리로, React와 함께 사용되며 컴포넌트 간 상태 공유와 관리를 용이하게 합니다. 중앙 상태 스토어와 리듀서를 통해 상태를 효율적으로 관리합니다.

Redux를 사용하는 이유에 대해 설명해주세요.

여러 컴포넌트 간의 상태 공유와 관리를 효율적으로 할 수 있습니다.
애플리케이션의 상태를 예측 가능하게 만들어 디버깅을 쉽게 합니다.
미들웨어를 통한 비동기 작업 관리 및 로깅 등 다양한 기능을 제공합니다.

Redux의 장단점에 대해 설명해주세요.

장점: 상태 예측 가능성, 중앙 상태 스토어로 상태 관리 효율화, 미들웨어로 비동기 작업 관리 가능, 커뮤니티 지원이 활발합니다.

단점: 초기 학습 곡선이 높고 설정이 복잡할 수 있으며, 작은 규모의 앱에서는 Redux를 도입할 필요성이 없을 수 있습니다.

Flux 패턴에 대해 설명해주세요.

Flux는 Facebook에서 개발한 애플리케이션 아키텍처 패턴으로, 단방향 데이터 흐름을 강조합니다. 액션 → 디스패처 → 스토어 → 뷰로 데이터가 흐르는 구조를 가지며, 양방향 데이터 흐름을 방지합니다.

Context API와 Redux를 비교해주세요.

Context API: React에 내장된 상태 관리 기능으로, 간단한 상태 공유에 적합하며 별도의 라이브러리가 필요하지 않습니다. 그러나 중앙 상태 관리와 미들웨어를 제공하지 않습니다.

Redux: 별도의 라이브러리로, 중앙 상태 관리, 미들웨어, 상태 예측 가능성 등을 제공합니다. 대규모 애플리케이션에서 사용됩니다.

Redux의 3대 원칙에 대해 설명해주세요.

단일 출처: 애플리케이션의 상태는 하나의 중앙 스토어에 저장됩니다.

읽기 전용: 상태는 불변 객체로 관리되며, 상태를 변경하려면 새로운 객체를 생성해야 합니다.

순수 함수 리듀서: 상태를 변경하는 로직은 순수 함수인 리듀서를 통해 이루어져야 하며, 이전 상태와 액션을 받아 새로운 상태를 반환합니다.

React-Query를 사용해보셨나요?

예, React-Query는 데이터 가져오기와 관리를 간편하게 하는 라이브러리로, 서버와의 데이터 통신 및 상태 관리에 사용됩니다. 캐싱, 재시도, 인터벌 쿼리 등 다양한 기능을 제공합니다.

React-Query에 대해 설명해주세요.

React-Query는 React 애플리케이션의 데이터 가져오기와 관리를 쉽게 만드는 라이브러리로, 서버와의 통신 및 상태 관리를 간소화합니다.
캐싱, 자동 재시도, 데이터 무효화, 인터벌 쿼리, 뮤테이션 등 다양한 기능을 제공합니다.

React-Query의 등장 배경과 장점에 대해 설명해주세요.

React-Query는 Redux, MobX, Apollo Client 등의 상태 관리 도구와 비교하여 더 간단하고 유연한 데이터 관리를 제공하기 위해 등장했습니다.
비동기 데이터 요청을 관리하고 캐싱, 오류 처리 등을 자동으로 처리하여 개발자의 생산성을 높입니다.

Recoil을 사용해보셨나요?

Recoil은 상태 관리 라이브러리로, React 애플리케이션의 상태를 관리하고 공유하는 데 사용됩니다. 사용해보았으며, 간편한 API와 성능 최적화 기능을 제공합니다.

Recoil에 대해 설명해주세요.

Recoil은 React 애플리케이션의 상태 관리를 위한 라이브러리로, 컴포넌트 간에 상태를 공유하고 동기화하는 데 사용됩니다.
RecoilRoot, atom, selector 등의 API를 제공하며, 간편한 상태 정의와 상태 읽기/쓰기를 지원합니다.

Recoil에서 Loadable의 개념에 대해 설명해주세요.

Recoil의 loadable은 비동기 상태를 관리하기 위한 개념으로, 데이터 로딩 중, 성공, 실패와 같은 상태를 처리할 때 사용됩니다.
loadable은 loading, hasValue, value, error 등의 상태와 함께 사용됩니다.

Recoil에서 비동기로 데이터를 받아올 때 State를 어떻게 관리하셨나요?

Recoil에서 비동기 데이터를 관리할 때 atom에 loadable을 사용하여 상태를 표현합니다. selector를 통해 비동기 데이터를 읽고 변환할 수 있습니다.

Recoil에서 로딩, 성공, 에러와 관련된 처리를 어떻게 하셨나요?

Recoil에서는 loadable 상태에 따라 로딩 중, 성공, 실패 상황을 처리합니다. loadable의 state 속성을 확인하여 각 상태에 따른 UI나 에러 메시지를 표시할 수 있습니다.

Redux와 Recoil에 대해 비교 설명해주세요. (개념, 장단점)

Redux: 중앙 상태 관리 라이브러리, 별도의 라이브러리로 설치 및 설정 필요, 엄격한 규칙, 복잡한 구조로 시작하기 어려울 수 있음.

Recoil: React의 상태 관리 라이브러리, React와 함께 사용 가능, 간편한 API, 더 자유로운 상태 구성, 비동기 상태 관리에 용이함.

 

 

TypeScript

 

타입스크립트를 사용하는 이유에 대해 설명해주세요.

타입스크립트는 정적 타입을 지원하여 코드의 안정성을 향상시키고 오류를 사전에 방지할 수 있습니다. 이로써 개발자들은 런타임 오류를 줄이고 코드의 가독성을 높일 수 있습니다. 또한, 코드 자동 완성 및 타입 정보 제공으로 개발 생산성을 향상시킬 수 있습니다.

Type과 Interface의 차이점에 대해 설명해주세요.

Type은 객체, 유니온, 튜플, 함수 등 다양한 타입을 정의할 수 있는 별칭(alias)을 생성합니다. 기존 타입을 확장하거나 조합할 때 주로 사용됩니다.

Interface는 객체의 구조(프로퍼티와 메서드)를 정의하며, 클래스나 객체가 이를 구현(상속)할 때 사용됩니다. 인터페이스는 확장하기 쉽고 클래스에서도 구현할 수 있습니다.

제네릭에 대해 설명해주세요.

제네릭(Generic)은 타입을 파라미터화하여 재사용 가능한 컴포넌트를 만드는 방법입니다. 함수, 클래스, 인터페이스 등에서 사용할 수 있으며, 타입 안정성을 유지하면서 여러 다른 타입의 값을 다룰 수 있게 합니다.

제네릭 유틸리티 타입에 대해 설명해주세요.

제네릭 유틸리티 타입은 타입스크립트에서 제공하는 기본 제네릭 타입입니다. 주로 자주 사용되는 공통 패턴을 간편하게 적용하기 위해 사용됩니다. 예시로 Partial, Pick, Record 등이 있습니다.

클래스의 Public, Private, Protected에 대해 설명해주세요.

Public: 기본적으로 클래스의 모든 멤버(프로퍼티와 메서드)는 public이며, 어디서든 접근 가능합니다.

Private: private 키워드로 정의된 멤버는 클래스 내부에서만 접근 가능하며, 외부에서는 접근할 수 없습니다.

Protected: protected 키워드로 정의된 멤버는 해당 클래스와 해당 클래스를 상속받은 하위 클래스에서만 접근 가능하며, 인스턴스에서는 직접 접근할 수 없습니다.

클래스의 Static에 대해 설명해주세요.

Static 멤버는 클래스 자체에 연결되어 있으며, 클래스 인스턴스를 생성하지 않고도 호출할 수 있습니다. 주로 유틸리티 함수나 공통 상태를 관리하는 데 사용됩니다.

 

 

프론트엔드 전반

 

⭐ 브라우저 렌더링 과정을 설명해주세요.

브라우저 렌더링 과정은 다음과 같이 진행됩니다:
HTML 문서를 파싱하여 DOM 트리를 생성합니다.
CSS 파일과 스타일 태그를 파싱하여 CSSOM(CSS Object Model)을 생성합니다.
DOM 트리와 CSSOM을 결합하여 렌더 트리(Render Tree)를 생성합니다.
렌더 트리에서 레이아웃(Layout)을 계산하고, 각 요소의 크기와 위치를 결정합니다.
화면에 픽셀을 그리는 과정인 페인팅(Painting)을 수행합니다.

브라우저는 어떻게 동작하나요?

브라우저는 사용자가 웹페이지를 요청하면 해당 웹페이지의 HTML, CSS, JavaScript 등의 리소스를 서버로부터 다운로드하고 해석하여 화면에 표시하는 역할을 합니다. 또한 사용자 입력을 받아 처리하고, 웹페이지의 렌더링과 상호작용을 가능하게 합니다.

Webpack, Babel, Polyfill에 대해 설명해주세요.

Webpack: 모듈 번들러로, 여러 개의 JavaScript 파일 및 다른 리소스들을 번들로 묶어 하나의 파일로 생성해주며, 로더와 플러그인을 통해 다양한 기능을 확장할 수 있습니다.
Babel: JavaScript 코드를 최신 브라우저에서도 동작하도록 변환해주는 트랜스파일러입니다.
Polyfill: 브라우저에서 지원하지 않는 JavaScript 기능을 모바일과 데스크톱 브라우저에서 동작하도록 채워주는 코드 조각입니다.

ESLint와 Prettier에 대해 설명해주세요.

ESLint: JavaScript 코드의 문법, 스타일, 오류를 정적 분석하여 검사하고, 코드 품질을 향상시키는 도구입니다.
Prettier: 코드 포맷터로, 코드를 일관된 스타일로 자동 포맷팅해주어 코드 리뷰와 협업을 더 쉽게 만들어줍니다.

SPA와 MPA에 대해 설명해주세요.

SPA(Single Page Application): 모든 필요한 HTML, CSS 및 JavaScript를 최초 한 번 로드하고, 이후 페이지 간의 전환 시 필요한 데이터만 동적으로 로드하여 빠른 페이지 전환과 부드러운 사용자 경험을 제공하는 웹 애플리케이션입니다.
MPA(Multi Page Application): 각각의 페이지마다 별도의 HTML 파일을 로드하며, 전통적인 웹 애플리케이션 구조를 따릅니다.

⭐ CSR과 SSR의 차이는 무엇인가요?

CSR(Client-Side Rendering): 웹 페이지를 서버로부터 전체 HTML을 받은 후, 브라우저에서 JavaScript를 사용하여 동적으로 페이지 컨텐츠를 렌더링하는 방식입니다. 초기 로딩 속도가 빠르지만 SEO 문제와 초기 로딩 속도가 느린 문제가 있습니다.
SSR(Server-Side Rendering): 서버에서 요청받은 페이지를 동적으로 렌더링한 후 완성된 HTML을 브라우저에 제공하는 방식으로, 초기 로딩 속도가 빠르고 SEO에 유리하지만 서버 부하가 높을 수 있습니다.

⭐ CORS와 해결 경험을 말씀해주세요.

CORS(Cross-Origin Resource Sharing)는 브라우저에서 동일 출처 정책을 우회하여 다른 출처의 리소스에 접근하는 것을 제어하는 보안 메커니즘입니다. 서버에서 CORS 정책을 설정하고, 클라이언트에서도 요청 헤더에 Origin을 포함하여 보안을 유지합니다.
해결 경험: 서버에서 CORS 정책을 설정하고, 클라이언트에서는 요청 헤더에 필요한 정보를 포함하여 CORS 문제를 해결했습니다.

bundle의 사이즈를 줄이려면 어떻게 해야 하나요?

불필요한 코드 제거: 사용하지 않는 코드나 라이브러리를 제거합니다.
코드 스플리팅: 코드를 더 작은 청크로 분할하여 필요한 부분만 로드합니다.
압축: 코드를 압축하여 파일 사이즈를 줄입니다.
Lazy Loading: 필요한 모듈이나 리소스를 필요할 때 로드하도록 설정합니다.
Tree Shaking: 사용되지 않는 코드를 제거합니다.
이미지 압축: 이미지 리소스를 압축하여 파일 사이즈를 줄입니다.

⭐ 쿠키, 세션, 웹스토리지의 차이에 대해 설명해주세요.

쿠키(Cookie): 클라이언트 측에 작은 데이터 조각을 저장하는 데 사용되며, 서버와의 통신 시에 자동으로 전송됩니다. 주로 세션 관리나 사용자 식별에 사용됩니다.
세션(Session): 서버 측에 사용자 정보를 저장하는 방법으로, 서버에서 유지되며 세션 ID가 쿠키에 저장되어 클라이언트와 연결됩니다.
웹 스토리지(Web Storage): 클라이언트 측에서 데이터를 저장하는데 사용되며, 로컬 스토리지와 세션 스토리지로 나뉩니다. 사용자 데이터를 클라이언트 측에 저장하는 데 사용됩니다.

브라우저에서 탭 이동 혹은 탭 종료 시에는 세션 스토리지에 어떤 영향을 끼치나요?

브라우저에서 탭 이동 혹은 탭 종료 시에는 세션 스토리지에 영향을 미치지 않습니다. 세션 스토리지는 세션이 종료될 때 또는 브라우저를 닫을 때만 데이터가 삭제됩니다.

⭐ 로그인 처리를 할 때 쿠키와 세션을 어떻게 사용하시나요?

일반적으로 로그인 처리 시에는 다음과 같은 방식으로 쿠키와 세션을 사용합니다:
클라이언트가 로그인 요청을 서버에 보냅니다.
서버는 사용자를 인증하고, 성공할 경우 세션을 생성하고 세션 ID를 발급합니다.
세션 ID를 쿠키에 저장하여 클라이언트에게 응답합니다.
클라이언트는 이후 요청 시 세션 ID를 쿠키와 함께 서버에 보냅니다.
서버는 세션 ID를 확인하여 해당 세션에 저장된 사용자 정보로 로그인 상태를 유지합니다.

⭐ 토큰 기반 인증 방식에 대해 설명해주세요.

토큰 기반 인증은 사용자 인증 정보를 토큰으로 나타내고, 이 토큰을 사용하여 사용자를 인증하는 방식입니다. 주로 JSON Web Token(JWT)을 사용합니다. 토큰은 클라이언트와 서버 간의 인증을 관리하고, 사용자의 권한과 정보를 포함할 수 있습니다.

⭐ JWT 토큰을 쿠키에 저장했을 때 취약점에 대해 설명해주세요.

JWT 토큰을 쿠키에 저장할 때, 보안에 취약점이 발생할 수 있습니다:
XSS 공격: 악성 스크립트가 쿠키에 접근하여 토큰을 탈취할 수 있습니다.
CSRF 공격: 다른 웹사이트에서 사용자의 쿠키를 이용하여 토큰을 사용할 수 있게 합니다.
노출된 정보: 토큰에 민감한 정보가 포함되면, 해당 정보가 노출될 수 있습니다.

⭐ 크로스 브라우징에 대해 설명해주세요.

크로스 브라우징은 웹 애플리케이션이 여러 다른 브라우저에서 동일한 방식으로 작동하도록 보장하는 개념입니다. 다양한 브라우저에서 일관된 사용자 경험을 제공하기 위해 웹 개발자는 다음을 고려해야 합니다:
HTML, CSS, JavaScript의 표준 준수
CSS 접두어 및 특정 브라우저에 대한 스타일 수정
크로스 브라우징 테스트와 버그 수정

크로스 브라우징 이슈를 해결했던 경험을 말씀해주세요.

크로스 브라우징 이슈를 해결한 경험 중 일부:
Internet Explorer에서 flexbox 레이아웃 문제 해결을 위해 접두어 및 조건부 CSS 사용
다양한 브라우저에서 호환성을 확인하고 수정하는 데 도움을 주는 라이브러리 및 도구 사용
CSS 그리드와 관련된 레이아웃 이슈를 해결하기 위해 브라우저별로 다른 스타일 규칙 적용

웹사이트 성능 최적화에는 어떤 방법이 있나요?

웹사이트 성능 최적화를 위한 방법:
이미지 최적화
렌더링 최적화
파일 번들링 및 코드 스플리팅
브라우저 캐싱 활용
비동기 로딩 및 지연 로딩
요청 최소화
압축 및 최소화된 리소스 사용
서버 사이드 렌더링 (SSR) 적용
웹사이트 모니터링 및 성능 분석 도구 사용

객체 지향 프로그래밍이란 무엇인가요?

객체 지향 프로그래밍은 소프트웨어 개발 패러다임 중 하나로, 현실 세계의 객체를 모델링하여 소프트웨어를 개발하는 방법론입니다. 중요한 개념으로 클래스, 객체, 상속, 다형성, 캡슐화 등이 있습니다.

객체 지향 프로그래밍의 특징에 대해 말씀해주세요.

객체 지향 프로그래밍의 주요 특징:

클래스와 객체: 객체를 클래스로 정의하고, 객체는 클래스의 인스턴스입니다.

상속: 클래스는 다른 클래스로부터 상속을 받아 새로운 클래스를 생성할 수 있습니다

.
다형성: 같은 인터페이스나 기반 클래스를 사용하여 다른 방식으로 동작하는 여러 객체를 다룰 수 있습니다.

캡슐화: 객체의 상태와 동작을 하나의 단위로 묶어 정보 은닉과 보호를 제공합니다.

객체 지향 프로그래밍의 장단점에 대해 말씀해주세요.

장점:
모듈화와 재사용성 증가
코드의 가독성 향상
유지보수와 확장성이 좋음

단점:
초기 개발 속도가 느릴 수 있음
메모리 소비량이 높을 수 있음
설계 과정에서의 복잡성

⭐ REST API에 대해 설명해주세요.

REST(API)는 Representational State Transfer의 약자로, 웹 서비스 아키텍처를 위한 디자인 패턴입니다. 주요 특징으로 다음을 갖춥니다:
자원(URI)을 표현: 각 자원은 고유한 URI로 식별됩니다.
HTTP 메서드 활용: HTTP 메서드(GET, POST, PUT, DELETE)를 사용하여 자원에 대한 행위를 정의합니다.
상태 없음: 각 요청은 서버에 저장된 세션 정보 등을 기반으로 하지 않고, 모든 정보가 요청 내에 포함되어야 합니다.

Git Flow에 대해 설명해주세요.

Git Flow는 Git을 사용한 효율적인 소프트웨어 개발 브랜치 전략 중 하나입니다. 주로 다음과 같은 브랜치를 사용합니다:
Master: 제품 출시를 위한 안정된 코드를 유지합니다.
Develop: 개발 중인 코드를 유지하는 브랜치입니다.
Feature: 기능 개발용 브랜치로, Develop에서 파생하여 각 기능을 개발합니다.
Release: 출시를 위한 준비 단계에서 버그 수정 및 문서 업데이트를 수행합니다.
Hotfix: Master 브랜치에서 발견된 심각한 버그를 수정하는 브랜치입니다.

⭐ SEO에 대해 설명해주세요.

SEO(Search Engine Optimization)는 웹사이트가 검색 엔진에서 노출되도록 최적화하는 작업을 의미합니다. SEO는 다음과 같은 요소에 영향을 미칩니다:
키워드 연구 및 최적화
웹사이트 구조 및 URL 최적화
고품질 콘텐츠 작성
메타 데이터 최적화
모바일 최적화
속도 및 성능 최적화

BOM과 DOM에 대해 설명해주세요.

BOM(Browser Object Model): 브라우저와 상호작용하기 위한 객체 모델을 나타냅니다. 주로 브라우저 창과 관련된 정보 및 동작을 다룹니다.
DOM(Document Object Model): 웹 문서의 구조화된 표현을 나타내는 객체 모델을 의미하며, HTML 및 XML 문서의 요소에 대한 접근과 조작을 제공합니다.

⭐ 리플로우와 리페인트에 대해 설명해주세요.

리플로우(Reflow): 브라우저에서 렌더링 엔진이 페이지의 레이아웃을 다시 계산하고, 엘리먼트의 위치 및 크기 등을 업데이트하는 과정입니다. 리플로우는 비용이 많이 들어서 성능에 영향을 줄 수 있습니다.
리페인트(Repaint): 브라우저에서 엘리먼트의 스타일이 변경되었을 때, 해당 엘리먼트를 다시 그리는 과정입니다. 리페인트는 리플로우보다 경제적입니다.

리플로우와 리페인트의 발생 조건에 대해 설명해주세요.

리플로우가 발생하는 조건:
엘리먼트의 크기, 위치, 여백, 보이거나 안 보이게 변경될 때
윈도우 리사이징, 글꼴 크기 변경과 같이 레이아웃에 영향을 주는 변경이 있을 때
리페인트가 발생하는 조건:
엘리먼트의 배경색, 텍스트 색상, 테두리 스타일과 같이 스타일 속성이 변경될 때
엘리먼트의 가시성이 변경될 때

visibility 속성은 리플로우를 발생시킬까요?

visibility 속성이 변경되면 리페인트는 발생할 수 있지만, 리플로우는 발생하지 않습니다. visibility 속성은 엘리먼트를 숨기거나 보이게 할 뿐, 엘리먼트의 레이아웃을 변경하지 않기 때문입니다.

Agile에 대해 설명해주세요.

Agile은 소프트웨어 개발 및 프로젝트 관리 방법론 중 하나로, 반복적이고 협력적인 개발 프로세스를 강조합니다. Agile에서는 작은 이터레이션을 통해 소프트웨어를 개발하고, 고객 피드백을 수용하여 지속적으로 개선합니다.

dependencies와 devDependencies 차이에 대해 설명해주세요.

dependencies: 애플리케이션 실행에 필요한 모듈 및 패키지를 포함하며, 프로덕션 환경에서도 필요합니다. 이러한 패키지들은 프로덕션 빌드에 포함됩니다.
devDependencies: 개발 과정에서만 필요한 모듈 및 패키지를 포함하며, 프로덕션 환경에서는 필요하지 않습니다. 예를 들어, 테스트 라이브러리나 빌드 도구가 여기에 속합니다.

XSS와 CSRF에 대해 설명해주세요.

XSS(Cross-Site Scripting): 악의적인 스크립트가 웹 애플리케이션에 삽입되어 사용자의 브라우저에서 실행되는 보안 취약점입니다.
CSRF(Cross-Site Request Forgery): 사용자가 의도하지 않은 요청을 악의적인 웹사이트에서 다른 웹사이트에 대한 사용자 권한으로 전송하는 공격입니다.

인증과 인가에 대해 설명해주세요.

인증(Authentication): 사용자가 자신의 신원을 확인하고 시스템에 로그인할 수 있도록 하는 프로세스로, 사용자의 아이디와 비밀번호를 확인하는 것이 일반적입니다.
인가(Authorization): 인증된 사용자에게 특정 리소스나 기능에 대한 액세스 권한을 부여하는 프로세스로, 사용자의 역할 및 권한에 따라 제한된 액세스를 제공합니다.

package.json에서 private에 대해 설명해주세요.

package.json 파일에서 "private" 속성을 true로 설정하면 해당 프로젝트가 npm 레지스트리에 공개되지 않도록 지정하는 옵션입니다. 공개되지 않은 프로젝트는 다른 사람이 공개 레지스트리에 업로드하거나 검색할 수 없습니다.

프로젝트를 npm에 배포하려면 어떤 설정이 필요할까나요?

프로젝트를 npm에 배포하려면 다음 단계를 수행해야 합니다:
npm 계정 생성 및 로그인
프로젝트의 package.json 파일에 필요한 정보(버전, 라이선스 등) 추가
npm publish 명령을 사용하여 패키지 배포

⭐ SEO는 어떤 식으로 신경쓰셨나요?

SEO를 고려한 작업으로는 키워드 연구를 통해 콘텐츠에 적절한 키워드를 사용하고, 메타 데이터를 최적화했습니다. 또한 웹사이트의 URL 구조를 간결하게 설계하고, 이미지 alt 텍스트를 제공하여 검색 엔진에서 콘텐츠를 쉽게 식별할 수 있도록 했습니다.

어플리케이션의 성능은 어떤식으로 측정하셨나요?

어플리케이션의 성능 측정을 위해 다음과 같은 도구와 방법을 사용했습니다:
Google Chrome 개발자 도구의 성능 패널을 활용하여 렌더링 시간, 자원 로딩 시간 등을 분석
웹사이트 성능 분석 도구(Lighthouse, PageSpeed Insights)를 활용하여 웹사이트의 성능 및 최적화 가능한 부분을 확인
로그 파일 및 서버 모니터링 도구를 사용하여 서버 성능을 추적

LightHouse 결과가 좋지 않을 때, 프로젝트에서 병목 현상은 어떻게 해결할 수 있을까요?

LightHouse 결과가 좋지 않을 때 다음과 같은 접근 방식을 사용하여 병목 현상을 해결할 수 있습니다:
이미지 압축 및 최적화
렌더링 최적화: 렌더링 지연을 줄이기 위해 코드 스플리팅과 비동기 로딩 구현
브라우저 캐싱 활용
불필요한 리소스 로딩 방지
서버 사이드 렌더링 (SSR) 도입
렌더링 최적화 관련 도구 및 라이브러리 사용

⭐ 주소창에 주소를 입력했을 때의 흐름을 설명해주세요.

주소창에 주소를 입력하고 엔터를 누르면 다음과 같은 흐름이 발생합니다:
브라우저는 입력된 주소를 기반으로 DNS(Domain Name System) 조회를 수행하여 서버의 IP 주소를 확인합니다.
브라우저는 해당 IP 주소로 HTTP 요청을 생성하고 서버에 요청을 보냅니다.
서버는 요청된 페이지나 리소스를 찾고, 필요한 경우 데이터베이스에서 정보를 가져옵니다.
서버는 HTTP 응답을 생성하고, 브라우저로 응답을 보냅니다.
브라우저는 받은 응답을 해석하여 웹페이지를 렌더링하고 화면에 표시합니다.