- Tanstack Query의 useQuery, useMutation을 사용하여 데이터를 관리하고 캐싱하는 방법을 이해합니다.
- 답변)
- 의도:
- 지원자가 Tanstack Query의 useQuery와 useMutation 훅을 사용하여 데이터를 관리하고 캐싱할 수 있는지 평가.
- 팁:
- useQuery와 useMutation의 개념과 사용법을 설명하세요.
- 데이터를 가져오고 변이시키는 과정에서 캐싱이 어떻게 이루어지는지 설명하세요.
- useQuery와 useMutation을 사용하는 예제를 떠올려 보세요.
- 모범답안:
- useQuery는 데이터를 가져오고 캐싱하는 데 사용되며, 자동으로 데이터를 캐싱하고 리패칭합니다.
- useMutation은 데이터를 변이시키는 데 사용되며, 성공적인 변이 후에 관련된 쿼리를 리패칭합니다.
- Tanstack Query는 효율적인 데이터 관리와 성능 최적화를 제공합니다.
- 의도:
- 답변)
- Tanstack Query의 useInfiniteQuery를 이용한 무한스크롤을 구현할 수 있다.
- 답변)
- 의도:
- 지원자가 Tanstack Query의 useInfiniteQuery를 사용하여 무한 스크롤을 구현할 수 있는지 평가.
- 팁:
- useInfiniteQuery의 개념과 사용법을 설명하세요.
- 무한 스크롤을 구현하는 과정에서의 주요 고려사항을 설명하세요.
- useInfiniteQuery를 사용하는 예제를 떠올려 보세요.
- 모범답안:
- useInfiniteQuery는 페이징된 데이터를 가져오고 무한 스크롤을 구현하는 데 사용됩니다.
- 데이터의 끝에 도달했을 때 추가 데이터를 가져오도록 설정할 수 있습니다.
- 무한 스크롤을 통해 사용자 경험을 향상시킬 수 있습니다.
- 의도:
- 답변)
- 쓰로틀링과 디바운싱에 대한 개념을 이해하고 적용할 수 있습니다.
- 답변)
- 의도:
- 지원자가 쓰로틀링과 디바운싱의 개념을 이해하고, 이를 실제로 적용할 수 있는지 평가.
- 팁:
- 쓰로틀링과 디바운싱의 차이점을 설명하세요.
- 쓰로틀링과 디바운싱을 사용하는 상황을 설명하세요.
- 쓰로틀링과 디바운싱을 적용하는 예제를 떠올려 보세요.
- 모범답안:
- 쓰로틀링은 일정 시간 간격으로 함수가 실행되도록 제한하여 성능을 최적화합니다.
- 디바운싱은 일정 시간 동안 이벤트가 발생하지 않을 때 함수가 실행되도록 하여 불필요한 호출을 줄입니다.
- 이 두 기법은 주로 입력 필드 자동 완성, 윈도우 리사이즈 이벤트 처리 등에 사용됩니다.
- 의도:
- 답변)
- 쿠키, 세션, 토큰, JWT와 같은 인증/인가 방식에 대한 이해를 갖습니다.
- 답변)
- 의도:
- 지원자가 쿠키, 세션, 토큰, JWT와 같은 다양한 인증/인가 방식에 대해 이해하고 있는지 평가.
- 팁:
- 쿠키와 세션의 차이점을 설명하세요.
- 토큰 기반 인증과 JWT의 개념을 설명하세요.
- 각 방식의 장단점을 설명하세요.
- 모범답안:
- 쿠키는 클라이언트에 저장되는 작은 데이터 조각으로, 서버와 클라이언트 간의 상태를 유지하는 데 사용됩니다.
- 세션은 서버에 저장되는 사용자 정보로, 사용자가 로그인한 상태를 유지합니다.
- 토큰 기반 인증은 클라이언트가 서버로부터 받은 토큰을 사용하여 인증을 수행합니다.
- JWT는 JSON 웹 토큰으로, 정보를 안전하게 전송하기 위한 토큰 표준입니다.
- 의도:
- 답변)
- React-Query (Tanstack Query)를 이용해서 어떻게 상태관리를 할 수 있나요?
- 답변)
- 의도:
- 지원자가 React-Query를 사용하여 상태 관리를 어떻게 하는지 이해하고 있는지 평가.
- 팁:
- React-Query가 상태 관리를 어떻게 도와주는지 설명하세요.
- 서버 상태와 클라이언트 상태의 차이를 설명하세요.
- React-Query를 사용한 상태 관리의 예제를 떠올려 보세요.
- 모범답안:
- React-Query는 서버 상태를 관리하고 비동기 데이터를 쉽게 처리할 수 있게 해줍니다.
- 서버 상태는 서버에서 가져오는 데이터로, 클라이언트 상태는 애플리케이션 내에서 관리되는 데이터입니다.
- React-Query는 자동으로 데이터를 캐싱하고, 동기화하여 상태 관리를 단순화합니다.
- 의도:
- 답변)
- react 컴포넌트의 장점에 대해 설명할 수 있습니다.
- 답변)
- 의도:
- 지원자가 React 컴포넌트의 장점을 이해하고 있는지 평가.
- 팁:
- React 컴포넌트의 재사용성, 컴포지션, 유지보수성 등의 장점을 설명하세요.
- React 컴포넌트를 사용하는 예제를 떠올려 보세요.
- 모범답안:
- React 컴포넌트는 재사용이 가능하며, 하나의 컴포넌트를 여러 곳에서 사용할 수 있습니다.
- 컴포지션을 통해 복잡한 UI를 간단한 컴포넌트로 구성할 수 있습니다.
- 컴포넌트 단위로 개발하면 유지보수성과 확장성이 높아집니다.
- 의도:
- 답변)
- props drilling과 이를 해결하는 방법에 관하여 설명할 수 있습니다.
- 답변)
- 의도:
- 지원자가 props drilling 문제를 이해하고, 이를 해결할 수 있는 방법을 알고 있는지 평가.
- 팁:
- props drilling의 문제점을 설명하세요.
- props drilling을 해결하는 방법(Context API, 상태 관리 라이브러리 등)을 설명하세요.
- props drilling 문제를 해결한 예제를 떠올려 보세요.
- 모범답안:
- props drilling은 깊게 중첩된 컴포넌트 트리에서 props를 전달해야 하는 문제를 말합니다.
- Context API를 사용하면 중간 컴포넌트를 거치지 않고 데이터와 함수를 전달할 수 있습니다.
- 상태 관리 라이브러리(Redux, Recoil 등)를 사용하여 전역 상태를 관리할 수 있습니다.
- 의도:
- 답변)
- css in js vs module.css에 대해 설명할 수 있습니다.
- 답변)
- 의도:
- 지원자가 CSS-in-JS와 CSS Module의 차이점과 장단점을 이해하고 있는지 평가.
- 팁:
- CSS-in-JS와 CSS Module의 개념을 설명하세요.
- 두 방법의 장단점을 설명하세요.
- CSS-in-JS와 CSS Module을 사용하는 예제를 떠올려 보세요.
- 모범답안:
- CSS-in-JS는 JavaScript 파일 내에 CSS를 작성하는 방법으로, styled-components, Emotion 등이 있습니다.
- CSS Module은 CSS 파일을 모듈화하여 클래스 이름의 충돌을 방지하는 방법입니다.
- CSS-in-JS는 동적 스타일링에 유리하며, CSS Module은 기존 CSS 작성 방식과 호환성이 좋습니다.
- 의도:
- 답변)
- hook을 조건문 안에서 사용하면 안되는 이유에 대해 설명할 수 있습니다.
- 답변)
- 의도:
- 지원자가 React Hook을 조건문 안에서 사용하면 안되는 이유를 이해하고 있는지 평가.
- 팁:
- React Hook의 규칙을 설명하세요.
- Hook을 조건문 안에서 사용하면 발생하는 문제를 설명하세요.
- Hook의 올바른 사용 예제를 떠올려 보세요.
- 모범답안:
- React Hook은 컴포넌트의 최상위에서 호출되어야 하며, 조건문이나 반복문 안에서 사용하면 안됩니다.
- 조건문 안에서 Hook을 사용하면 Hook의 호출 순서가 변경되어 상태 관리가 불안정해질 수 있습니다.
- 이를 방지하기 위해 모든 Hook은 컴포넌트의 최상위에서 호출되어야 합니다.
- 의도:
- 답변)
아무튼, 개발자