- RESTful API에 대해 이해하고 설명할 수 있습니다.
- 답변)
- 의도:
- 지원자가 RESTful API의 개념과 이를 사용하는 방법을 이해하고 있는지 평가.
- 팁:
- REST의 정의와 원칙을 설명하세요.
- RESTful API의 주요 특징과 HTTP 메서드(GET, POST, PUT, DELETE)의 사용 사례를 언급하세요.
- RESTful API를 사용하는 예제를 떠올려 보세요.
- 모범답안:
- REST는 Representational State Transfer의 약자로, 자원을 URI로 표현하고 HTTP 메서드를 통해 조작하는 아키텍처 스타일입니다.
- RESTful API는 클라이언트와 서버 간의 통신을 위한 인터페이스로, 일관성과 예측 가능성을 제공합니다.
- GET은 데이터를 조회할 때, POST는 데이터를 생성할 때, PUT은 데이터를 업데이트할 때, DELETE는 데이터를 삭제할 때 사용됩니다.
- 의도:
- 답변)
- HTTP 프로토콜에 대한 기본 개념과 동작 방식을 이해합니다.
- 답변)
- 의도:
- 지원자가 HTTP 프로토콜의 기본 개념과 동작 방식을 이해하고 있는지 평가.
- 팁:
- HTTP의 정의와 주요 특징을 설명하세요.
- HTTP 요청과 응답의 구조를 설명하세요.
- 상태 코드(200, 404, 500 등)의 의미를 언급하세요.
- 모범답안:
- HTTP는 Hypertext Transfer Protocol의 약자로, 웹 브라우저와 서버 간의 데이터 통신을 위한 프로토콜입니다.
- HTTP 요청은 메서드, URL, 헤더, 바디로 구성되며, 응답은 상태 코드, 헤더, 바디로 구성됩니다.
- 상태 코드는 요청의 결과를 나타내며, 200은 성공, 404는 리소스를 찾을 수 없음, 500은 서버 오류를 의미합니다.
- 의도:
- 답변)
- 비동기 통신에 대한 개념을 이해하고 axios와 fetch를 활용하여 데이터를 가져올 수 있습니다.
- 답변)
- 의도:
- 지원자가 비동기 통신의 개념을 이해하고, axios와 fetch를 사용하여 데이터를 가져올 수 있는지 평가.
- 팁:
- 비동기 통신의 개념과 필요성을 설명하세요.
- axios와 fetch의 차이점을 언급하세요.
- axios와 fetch를 사용하는 예제를 떠올려 보세요.
- 모범답안:
- 비동기 통신은 서버와 클라이언트 간의 데이터를 비동기적으로 주고받는 방법으로, 페이지 리로딩 없이 데이터를 갱신할 수 있습니다.
- fetch는 내장된 JavaScript API로 간단한 비동기 요청을 수행할 수 있으며, axios는 더 많은 기능을 제공하는 서드 파티 라이브러리입니다.
- axios는 기본적으로 JSON 데이터를 처리하기 쉽고, 요청 및 응답 인터셉터, 기본 URL 설정 등 다양한 기능을 제공합니다.
- 의도:
- 답변)
- 리액트에서 사용되는 Virtual DOM 의 동작방식을 설명할 수 있다.
- 답변)
- 의도:
- 지원자가 React의 Virtual DOM 개념과 그 동작 방식을 이해하고 있는지 평가.
- 팁:
- Virtual DOM의 정의와 필요성을 설명하세요.
- Virtual DOM이 실제 DOM과 어떻게 다른지 설명하세요.
- Virtual DOM의 업데이트 과정을 언급하세요.
- 모범답안:
- Virtual DOM은 실제 DOM의 가벼운 복사본으로, React에서 상태 변화에 따른 UI 업데이트를 효율적으로 처리하기 위해 사용됩니다.
- Virtual DOM은 메모리에서 작동하며, 변경 사항을 실제 DOM에 반영하기 전에 비교(diffing)하고 최소한의 변경만 실제 DOM에 적용(patching)합니다.
- 이를 통해 성능을 최적화하고 빠른 렌더링을 제공합니다.
- 의도:
- 답변)
- Redux 외에도 다른 상태 관리 라이브러리(Recoil, Zustand 등)에 대한 이해를 가지고 있다.
- 답변)
- 의도:
- 지원자가 Redux 외에도 다른 상태 관리 라이브러리에 대한 이해와 경험이 있는지 평가.
- 팁:
- Recoil과 Zustand의 개념과 주요 특징을 설명하세요.
- 각 라이브러리가 Redux와 어떻게 다른지 설명하세요.
- Recoil과 Zustand를 사용하는 예제를 떠올려 보세요.
- 모범답안:
- Recoil은 React의 상태 관리를 단순화하고, 컴포넌트의 상태를 보다 쉽게 관리할 수 있게 해주는 라이브러리입니다.
- Zustand는 가벼운 상태 관리 라이브러리로, 상태를 간단하게 관리하고 React와 쉽게 통합할 수 있습니다.
- Recoil은 전역 상태를 atom과 selector로 관리하며, Zustand는 간단한 API로 상태를 정의하고 사용합니다.
- 의도:
- 답변)
- axios의 instance와 interceptor를 이해하고 활용하여 좀 더 깊은 수준의 API call을 할 수 있습니다.
- 답변)
- 의도:
- 지원자가 axios의 instance와 interceptor를 이해하고, 이를 활용하여 API 호출을 더 효과적으로 관리할 수 있는지 평가.
- 팁:
- axios instance와 interceptor의 개념을 설명하세요.
- instance와 interceptor를 사용하는 이유를 설명하세요.
- instance와 interceptor를 활용하는 예제를 떠올려 보세요.
- 모범답안:
- axios instance는 기본 설정을 가진 axios 인스턴스를 생성하여 여러 요청에서 재사용할 수 있게 해줍니다.
- interceptor는 요청 또는 응답을 가로채어 추가적인 처리를 할 수 있게 해줍니다.
- instance와 interceptor를 사용하면 인증 토큰 설정, 오류 처리 등을 중앙에서 관리할 수 있습니다.
- 의도:
- 답변)
- Custom Hooks를 작성하여 재사용 가능한 로직을 구현할 수 있습니다.
- 답변)
- 의도:
- 지원자가 Custom Hooks의 개념을 이해하고, 이를 사용하여 재사용 가능한 로직을 구현할 수 있는지 평가.
- 팁:
- Custom Hooks의 정의와 필요성을 설명하세요.
- Custom Hooks를 작성하는 방법을 설명하세요.
- Custom Hooks를 활용하는 예제를 떠올려 보세요.
- 모범답안:
- Custom Hooks는 React Hook을 사용하여 로직을 재사용할 수 있게 해주는 함수입니다.
- Custom Hooks는 상태 관리, 데이터 가져오기 등의 로직을 캡슐화하여 여러 컴포넌트에서 재사용할 수 있습니다.
- useState, useEffect 등 기존 Hook을 조합하여 Custom Hook을 작성할 수 있습니다.
- 의도:
- 답변)
- util 함수는, 순수 JS로 리액트나 상태 없이 단순 기능 (계산, 정렬 등)을 수행하는 부품으로 보자.
- 커스텀훅은 use~로 시작하도록 네이밍하여,
리액트의 상태를 활용하는 함수(?)라고 생각하면 된다.
- useEffect의 작동 원리에 대해 이해하고 설명할 수 있습니다.
- 답변)
- 의도:
- 지원자가 useEffect의 개념과 작동 원리를 이해하고 있는지 평가.
- 팁:
- useEffect의 정의와 사용 목적을 설명하세요.
- useEffect가 언제 호출되는지 설명하세요.
- useEffect의 의존성 배열의 역할을 설명하세요.
- 모범답안:
- useEffect는 함수형 컴포넌트에서 사이드 이펙트를 수행하기 위해 사용되는 Hook입니다.
- useEffect는 컴포넌트가 렌더링된 후에 호출되며, 주로 데이터 가져오기, 구독 설정, DOM 업데이트 등을 처리합니다.
- 의존성 배열을 사용하여 특정 값이 변경될 때만 useEffect가 실행되도록 제어할 수 있습니다.
- 의도:
- 답변)
- React-query의 장점과 사용법을 이해하고 있다.
- 답변)
- 의도:
- 지원자가 React-query의 장점과 이를 사용하는 방법을 이해하고 있는지 평가.
- 팁:
- React-query의 주요 기능과 장점을 설명하세요.
- React-query를 사용하는 방법을 설명하세요.
- React-query를 활용하는 예제를 떠올려 보세요.
- 모범답안:
- React-query는 서버 상태를 관리하고 비동기 데이터 페칭을 쉽게 해주는 라이브러리입니다.
- React-query는 자동으로 데이터 캐싱, 리패칭, 에러 핸들링 등을 처리하여 개발자의 부담을 줄입니다.
- useQuery, useMutation 훅을 사용하여 데이터를 가져오고 변이시킬 수 있습니다.
- 의도:
- 답변)
아무튼, 개발자