**React에 관한 질문과 답안:**
1. **React의 주요 특징은 무엇이며, 어떻게 동작하는지 설명해보세요.**
- React는 사용자 인터페이스를 구축하는 라이브러리로, 가상 DOM을 사용하여 성능을 최적화합니다. React 컴포넌트는 상태(state)와 속성(props)을 통해 데이터를 관리하며, 컴포넌트 계층 구조를 구성하여 UI를 효과적으로 업데이트합니다.
2. **React Hooks은 무엇이며 어떤 상황에서 사용하나요?**
- React Hooks는 함수 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해줍니다. 예를 들어, `useState`는 상태를 관리하고, `useEffect`는 부수 효과를 다루며, 이를 통해 클래스 컴포넌트 대신 함수 컴포넌트를 사용할 수 있습니다.
3. **React Router를 사용해보았나요? 어떻게 라우팅을 구현하나요?**
- 네, React Router를 사용했습니다. `BrowserRouter`나 `HashRouter`를 사용하여 라우팅을 설정하고, `Route` 컴포넌트를 이용하여 URL 경로와 컴포넌트를 연결합니다.
4. **React의 컴포넌트 라이프사이클과 함수 컴포넌트의 생명주기를 비교 설명해보세요.**
- React 클래스 컴포넌트는 `componentDidMount`, `componentDidUpdate`, `componentWillUnmount` 등의 라이프사이클 메서드를 가지지만, 함수 컴포넌트에서는 `useEffect` 훅을 사용하여 비슷한 동작을 수행합니다.
5. **React의 상태 관리 옵션에는 어떤 것들이 있으며, Recoil은 어떤 문제를 해결하는데 도움을 줄까요?**
- 상태 관리 옵션으로는 Context API, Redux, MobX 등이 있습니다. Recoil은 복잡한 상태 관리를 단순화하고 컴포넌트 간 데이터 공유를 용이하게 만듭니다. Atoms, Selectors 등을 사용하여 상태를 관리하며 컴포넌트 간 상호 작용을 쉽게 구현할 수 있습니다.
**Recoil에 관한 질문과 답안:**
1. **Recoil의 핵심 개념은 무엇이며, 어떻게 상태를 관리하는지 설명하세요.**
- Recoil의 핵심 개념에는 Atoms, Selectors, RecoilRoot 등이 포함됩니다. Atoms는 상태를 정의하고 공유하는데 사용되며, Selectors는 상태를 변환하거나 계산에 사용됩니다. RecoilRoot는 상태를 컴포넌트 트리에 주입하는 역할을 합니다.
2. **Recoil의 비동기 상태 관리는 어떻게 동작하나요?**
- Recoil은 비동기 상태 관리를 지원하며 `useRecoilCallback` 훅을 사용하여 비동기 연산을 수행할 수 있습니다. Recoil은 자동으로 상태를 갱신하고 컴포넌트를 업데이트합니다.
3. **Recoil의 상태 변경을 어떻게 구독하고, 상태 변경 시 어떻게 업데이트를 처리하나요?**
- `useRecoilValue`나 `useRecoilState`를 사용하여 Recoil 상태를 구독하며, 상태가 변경될 때 React 컴포넌트가 자동으로 업데이트됩니다. 이것은 React의 렌더링 시스템을 활용하여 처리됩니다.
4. **Recoil Devtools를 사용해 본 경험이 있나요? 그것이 개발 프로세스에 어떻게 도움을 주나요?**
- 네, Recoil Devtools는 Recoil 상태를 디버깅하고 모니터링하는 데 유용합니다. 상태 변경, 비동기 트랜잭션 추적 및 디버깅 도구를 제공하여 개발 프로세스를 향상시킵니다.
5. **Recoil을 React와 함께 사용하면 어떻게 테스트를 수행하나요?**
- Recoil 상태를 테스트하기 위해 `RecoilRoot`로 감싸진 테스트 환경을 설정하고, `render`, `act`, `fireEvent` 등을 사용하여 컴포넌트를 테스트합니다. Recoil 상태에 대한 단위 테스트와 통합 테스트를 수행할 수 있습니다.
**React Query에 관한 질문과 답안:**
1. **React Query는 무엇이며, 어떤 문제를 해결하는데 도움을 줄까요?**
- React Query는 데이터 가져오기 및 관리를 위한 라이브러리로, 서버에서 데이터를 캐싱하고 자동으로 리프레시하는 기능을 제공합니다. 이를 통해 데이터 관리와 렌더링 간의 중복 작업을 줄이고 성능을
최적화합니다.
2. **React Query에서 쿼리와 뮤테이션의 차이는 무엇인가요?**
- 쿼리는 데이터를 가져오는 데 사용되며, 뮤테이션은 데이터를 변경하는 작업에 사용됩니다. 쿼리는 읽기 전용이며 캐싱을 활용하여 최적화됩니다. 뮤테이션은 데이터를 변경하고 해당 변경을 서버에 반영합니다.
3. **React Query에서 인터셉터(Interceptors)의 역할은 무엇이며 어떻게 사용하나요?**
- 인터셉터는 요청 및 응답을 가로채고 수정하는 역할을 합니다. 예를 들어, 토큰 갱신 또는 에러 처리를 위해 인터셉터를 사용할 수 있습니다. `useQueryClient` 훅을 사용하여 인터셉터를 추가하고 설정할 수 있습니다.
4. **React Query에서 오류 처리는 어떻게 이루어지나요?**
- React Query는 오류 처리를 위해 `onError` 옵션 및 `useMutation` 훅의 `onError` 콜백을 제공합니다. 이를 통해 오류 발생 시 특정 작업을 수행하거나 사용자에게 오류 메시지를 표시할 수 있습니다.
5. **React Query의 캐싱 전략 중 "stale-while-revalidate"은 무엇이며 어떤 상황에서 유용한가요?**
- "stale-while-revalidate" 전략은 캐싱된 데이터를 반환하고 동시에 백그라운드에서 데이터를 다시 가져오는 전략입니다. 이는 사용자에게 빠른 초기 응답을 제공하면서 데이터 업데이트를 수행하는 데 유용하며, UI의 반응성을 유지합니다.
**TypeScript에 관한 질문과 답안:**
1. **TypeScript와 JavaScript의 주요 차이점은 무엇인가요?**
- TypeScript는 정적 타입 언어로, 변수 및 함수의 타입을 명시적으로 선언할 수 있으며, 타입 오류를 런타임 이전에 검출할 수 있습니다. JavaScript는 동적 타입 언어로, 타입을 명시적으로 선언하지 않고 실행 중에 타입 오류를 발견합니다.
2. **TypeScript에서 인터페이스(Interfaces)와 타입(Type)의 차이는 무엇인가요?**
- 인터페이스는 객체의 구조(shape)를 정의하고, 클래스나 객체가 이를 따르도록 강제합니다. 타입은 객체, 변수, 함수 등의 타입을 정의하며, 유니온 타입, 인터섹션 타입 등을 사용하여 다양한 타입을 조합할 수 있습니다.
3. **Generics은 무엇이며 어떤 상황에서 사용하나요?**
- Generics는 타입이나 함수가 여러 다른 타입에서 작동할 수 있도록 일반화된 타입 또는 함수를 생성하는 방법을 제공합니다. 배열이나 컬렉션과 같이 여러 타입에서 동일한 로직을 재사용해야 할 때 유용하며, 타입 안정성을 제공합니다.
4. **TypeScript에서 타입 가드(Type Guards)는 어떻게 사용되나요?**
- 타입 가드는 런타임에서 객체의 타입을 확인하고, 해당 타입에 따라 다른 작업을 수행하는 함수 또는 조건입니다. 주로 `typeof`, `instanceof`, 사용자 정의 함수 등을 사용하여 타입 가드를 구현합니다.
5. **TypeScript의 모듈 시스템에는 어떤 유형이 있으며, 언제 어떤 유형을 사용하나요?**
- TypeScript에서는 CommonJS, ES6 Modules, AMD 등 여러 모듈 시스템을 지원합니다. 일반적으로 브라우저에서는 ES6 Modules를 사용하고, Node.js에서는 CommonJS를 사용합니다. 사용하는 환경 및 빌드 시스템에 따라 모듈 시스템을 선택합니다.