TIL #67 React 기술 면접 준비 -2

DO YEON KIM·2024년 7월 25일

TIL 내일배움캠프 부트캠프 스파르타코딩클럽

부트캠프

목록 보기

67/72

하루 하나씩 작성하는 TIL #67

18. 비동기 통신에 대한 개념을 이해하고 axios와 fetch를 활용하여 데이터를 가져올 수 있습니다.

💛 의도: 지원자가 비동기 통신의 개념을 이해하고, axios와 fetch를 사용하여 데이터를 가져올 수 있는지 평가.

💛 팁:

비동기 통신의 개념과 필요성을 설명하세요.
axios와 fetch의 차이점을 언급하세요.
axios와 fetch를 사용하는 예제를 떠올려 보세요.

💛 모범답안:

비동기 통신은 서버와 클라이언트 간의 데이터를 비동기적으로 주고받는 방법으로, 페이지 리로딩 없이 데이터를 갱신할 수 있습니다.
fetch는 내장된 JavaScript API로 간단한 비동기 요청을 수행할 수 있으며, axios는 더 많은 기능을 제공하는 서드 파티 라이브러리입니다.
axios는 기본적으로 JSON 데이터를 처리하기 쉽고, 요청 및 응답 인터셉터, 기본 URL 설정 등 다양한 기능을 제공합니다.

💛 한 줄 요약 : 위와 같음.

19. 리액트에서 사용되는 Virtual DOM 의 동작방식을 설명할 수 있다.

💛 의도: 지원자가 React의 Virtual DOM 개념과 그 동작 방식을 이해하고 있는지 평가.
💛 팁:

Virtual DOM의 정의와 필요성을 설명하세요.
Virtual DOM이 실제 DOM과 어떻게 다른지 설명하세요.
Virtual DOM의 업데이트 과정을 언급하세요.

💛 모범답안:

Virtual DOM은 실제 DOM의 가벼운 복사본으로, React에서 상태 변화에 따른 UI 업데이트를 효율적으로 처리하기 위해 사용됩니다.
Virtual DOM은 메모리에서 작동하며, 변경 사항을 실제 DOM에 반영하기 전에 비교(diffing)하고 최소한의 변경만 실제 DOM에 적용(patching)합니다.
이를 통해 성능을 최적화하고 빠른 렌더링을 제공합니다.

💛 한 줄 요약 : 실제 DOM의 가벼운 복사본. 상태 변화에 따른 UI 업데이트를 효율적으로 처리. 이를 통해 성능을 최적화하고 빠른 렌더링.

20. Redux 외에도 다른 상태 관리 라이브러리(Recoil, Zustand 등)에 대한 이해를 가지고 있다.

💛의도: 지원자가 Redux 외에도 다른 상태 관리 라이브러리에 대한 이해와 경험이 있는지 평가.

💛 팁:

Recoil과 Zustand의 개념과 주요 특징을 설명하세요.
각 라이브러리가 Redux와 어떻게 다른지 설명하세요.
Recoil과 Zustand를 사용하는 예제를 떠올려 보세요.

💛모범답안:

Recoil은 React의 상태 관리를 단순화하고, 컴포넌트의 상태를 보다 쉽게 관리할 수 있게 해주는 라이브러리입니다.
Zustand는 가벼운 상태 관리 라이브러리로, 상태를 간단하게 관리하고 React와 쉽게 통합할 수 있습니다.
Recoil은 전역 상태를 atom과 selector로 관리하며, Zustand는 간단한 API로 상태를 정의하고 사용합니다.

💛 한 줄 요약 : Zustand는 가벼운 상태 관리 라이브러리로, 상태를 간단하게 관리하고 React와 쉽게 통합할 수 있습니다.

21. axios의 instance와 interceptor를 이해하고 활용하여 좀 더 깊은 수준의 API call을 할 수 있습니다.

💛 의도: 지원자가 axios의 instance와 interceptor를 이해하고, 이를 활용하여 API 호출을 더 효과적으로 관리할 수 있는지 평가.

💛 팁:

axios instance와 interceptor의 개념을 설명하세요.
instance와 interceptor를 사용하는 이유를 설명하세요.
instance와 interceptor를 활용하는 예제를 떠올려 보세요.

💛 모범답안:

axios instance는 기본 설정을 가진 axios 인스턴스를 생성하여 여러 요청에서 재사용할 수 있게 해줍니다.
interceptor는 요청 또는 응답을 가로채어 추가적인 처리를 할 수 있게 해줍니다.
instance와 interceptor를 사용하면 인증 토큰 설정, 오류 처리 등을 중앙에서 관리할 수 있습니다.

💛 한 줄 요약 : ios instance는 기본 설정을 가진 axios 인스턴스를 생성하여 여러 요청에서 재사용. interceptor는 요청 또는 응답을 가로채어 추가적인 처리 => 인증 토큰 설정, 오류 처리 등을 중앙에서 관리

22. Custom Hooks를 작성하여 재사용 가능한 로직을 구현할 수 있습니다.

💛 의도: 지원자가 Custom Hooks의 개념을 이해하고, 이를 사용하여 재사용 가능한 로직을 구현할 수 있는지 평가.

💛 팁:

Custom Hooks의 정의와 필요성을 설명하세요.
Custom Hooks를 작성하는 방법을 설명하세요.
Custom Hooks를 활용하는 예제를 떠올려 보세요.

💛 모범답안:

Custom Hooks는 React Hook을 사용하여 로직을 재사용할 수 있게 해주는 함수입니다.
Custom Hooks는 상태 관리, 데이터 가져오기 등의 로직을 캡슐화하여 여러 컴포넌트에서 재사용할 수 있습니다.
useState, useEffect 등 기존 Hook을 조합하여 Custom Hook을 작성할 수 있습니다.

💛 한 줄 요약 : React Hook을 사용하여 로직을 재사용할 수 있게 해주는 함수. 상태 관리, 데이터 가져오기 등의 로직을 캡슐화하여 여러 컴포넌트에서 재사용. 기존 Hook을 조합하여 Custom Hook을 작성

23. useEffect의 작동 원리에 대해 이해하고 설명할 수 있습니다.

💛 의도: 지원자가 useEffect의 개념과 작동 원리를 이해하고 있는지 평가.

💛 팁:

useEffect의 정의와 사용 목적을 설명하세요.
useEffect가 언제 호출되는지 설명하세요.
useEffect의 의존성 배열의 역할을 설명하세요.

💛 모범답안:

useEffect는 함수형 컴포넌트에서 사이드 이펙트를 수행하기 위해 사용되는 Hook입니다.
useEffect는 컴포넌트가 렌더링된 후에 호출되며, 주로 데이터 가져오기, 구독 설정, DOM 업데이트 등을 처리합니다.
의존성 배열을 사용하여 특정 값이 변경될 때만 useEffect가 실행되도록 제어할 수 있습니다.

💛 한 줄 요약 : 수형 컴포넌트에서 사이드 이펙트를 수행하기 위해 사용되는 Hook. 컴포넌트가 렌더링된 후에 호출되며, 주로 데이터 가져오기, 구독 설정, DOM 업데이트 등을 처리

24. React-query의 장점과 사용법을 이해하고 있다.

💛 의도: 지원자가 React-query의 장점과 이를 사용하는 방법을 이해하고 있는지 평가.

💛 팁:

React-query의 주요 기능과 장점을 설명하세요.
React-query를 사용하는 방법을 설명하세요.
React-query를 활용하는 예제를 떠올려 보세요.

💛 모범답안:

React-query는 서버 상태를 관리하고 비동기 데이터 페칭을 쉽게 해주는 라이브러리입니다.
React-query는 자동으로 데이터 캐싱, 리패칭, 에러 핸들링 등을 처리하여 개발자의 부담을 줄입니다.
useQuery, useMutation 훅을 사용하여 데이터를 가져오고 변이시킬 수 있습니다.

💛 한 줄 요약 : 서버 상태를 관리하고 비동기 데이터 페칭을 쉽게 해주는 라이브러리. 자동으로 데이터 캐싱, 리패칭, 에러 핸들링 등을 처리하여 개발자의 부담을 줄입니다.

25. Tanstack Query의 useQuery, useMutation을 사용하여 데이터를 관리하고 캐싱하는 방법을 이해합니다.

💛 의도: 지원자가 Tanstack Query의 useQuery와 useMutation 훅을 사용하여 데이터를 관리하고 캐싱할 수 있는지 평가.

💛 팁:

useQuery와 useMutation의 개념과 사용법을 설명하세요.
데이터를 가져오고 변이시키는 과정에서 캐싱이 어떻게 이루어지는지 설명하세요.
useQuery와 useMutation을 사용하는 예제를 떠올려 보세요.

💛모범답안:

useQuery는 데이터를 가져오고 캐싱하는 데 사용되며, 자동으로 데이터를 캐싱하고 리패칭합니다.
useMutation은 데이터를 변이시키는 데 사용되며, 성공적인 변이 후에 관련된 쿼리를 리패칭합니다.
Tanstack Query는 효율적인 데이터 관리와 성능 최적화를 제공합니다.

💛 한 줄 요약 : 위와 같음.

26. Tanstack Query의 useInfiniteQuery를 이용한 무한스크롤을 구현할 수 있다.

💛 의도: 지원자가 Tanstack Query의 useInfiniteQuery를 사용하여 무한 스크롤을 구현할 수 있는지 평가.

💛 팁:

useInfiniteQuery의 개념과 사용법을 설명하세요.
무한 스크롤을 구현하는 과정에서의 주요 고려사항을 설명하세요.
useInfiniteQuery를 사용하는 예제를 떠올려 보세요.

💛 모범답안:

useInfiniteQuery는 페이징된 데이터를 가져오고 무한 스크롤을 구현하는 데 사용됩니다.
데이터의 끝에 도달했을 때 추가 데이터를 가져오도록 설정할 수 있습니다.
무한 스크롤을 통해 사용자 경험을 향상시킬 수 있습니다.

💛 한 줄 요약 : useInfiniteQuery는 페이징된 데이터를 가져오고 무한 스크롤을 구현하는 데 사용. 데이터의 끝에 도달했을 때 추가 데이터를 가져오도록 설정

27. 쓰로틀링과 디바운싱에 대한 개념을 이해하고 적용할 수 있습니다.

💛의도: 지원자가 쓰로틀링과 디바운싱의 개념을 이해하고, 이를 실제로 적용할 수 있는지 평가.

💛팁:

쓰로틀링과 디바운싱의 차이점을 설명하세요.
쓰로틀링과 디바운싱을 사용하는 상황을 설명하세요.
쓰로틀링과 디바운싱을 적용하는 예제를 떠올려 보세요.

💛모범답안:

쓰로틀링은 일정 시간 간격으로 함수가 실행되도록 제한하여 성능을 최적화합니다.
디바운싱은 일정 시간 동안 이벤트가 발생하지 않을 때 함수가 실행되도록 하여 불필요한 호출을 줄입니다.
이 두 기법은 주로 입력 필드 자동 완성, 윈도우 리사이즈 이벤트 처리 등에 사용됩니다.

💛 한 줄 요약 : 위와 같음.

28. 쿠키, 세션, 토큰, JWT와 같은 인증/인가 방식에 대한 이해를 갖습니다.

💛 의도: 지원자가 쿠키, 세션, 토큰, JWT와 같은 다양한 인증/인가 방식에 대해 이해하고 있는지 평가.

💛 팁:

쿠키와 세션의 차이점을 설명하세요.
토큰 기반 인증과 JWT의 개념을 설명하세요.
각 방식의 장단점을 설명하세요.

💛모범답안:

쿠키는 클라이언트에 저장되는 작은 데이터 조각으로, 서버와 클라이언트 간의 상태를 유지하는 데 사용됩니다.
세션은 서버에 저장되는 사용자 정보로, 사용자가 로그인한 상태를 유지합니다.
토큰 기반 인증은 클라이언트가 서버로부터 받은 토큰을 사용하여 인증을 수행합니다.
JWT는 JSON 웹 토큰으로, 정보를 안전하게 전송하기 위한 토큰 표준입니다.

💛 한 줄 요약 : 위와 같음.

29. React-Query (Tanstack Query)를 이용해서 어떻게 상태관리를 할 수 있나요?

💛 의도: 지원자가 React-Query를 사용하여 상태 관리를 어떻게 하는지 이해하고 있는지 평가.

💛팁:

React-Query가 상태 관리를 어떻게 도와주는지 설명하세요.
서버 상태와 클라이언트 상태의 차이를 설명하세요.
React-Query를 사용한 상태 관리의 예제를 떠올려 보세요.

💛모범답안:

React-Query는 서버 상태를 관리하고 비동기 데이터를 쉽게 처리할 수 있게 해줍니다.
서버 상태는 서버에서 가져오는 데이터로, 클라이언트 상태는 애플리케이션 내에서 관리되는 데이터입니다.
React-Query는 자동으로 데이터를 캐싱하고, 동기화하여 상태 관리를 단순화합니다.

💛 한 줄 요약 : 위와 같음.

30. react 컴포넌트의 장점에 대해 설명할 수 있습니다.

💛 의도 : 지원자가 React 컴포넌트의 장점을 이해하고 있는지 평가.

💛팁:

React 컴포넌트의 재사용성, 컴포지션, 유지보수성 등의 장점을 설명하세요.
React 컴포넌트를 사용하는 예제를 떠올려 보세요.

💛모범답안:

React 컴포넌트는 재사용이 가능하며, 하나의 컴포넌트를 여러 곳에서 사용할 수 있습니다.
컴포지션을 통해 복잡한 UI를 간단한 컴포넌트로 구성할 수 있습니다.
컴포넌트 단위로 개발하면 유지보수성과 확장성이 높아집니다.

💛 한 줄 요약 : 재사용이 가능, 컴포넌트를 여러 곳에서 사용, UI를 간단한 컴포넌트로 구성, 유지보수성과 확장성

31. props drilling과 이를 해결하는 방법에 관하여 설명할 수 있습니다.

💛의도: 지원자가 props drilling 문제를 이해하고, 이를 해결할 수 있는 방법을 알고 있는지 평가.

💛팁:

props drilling의 문제점을 설명하세요.
props drilling을 해결하는 방법(Context API, 상태 관리 라이브러리 등)을 설명하세요.
props drilling 문제를 해결한 예제를 떠올려 보세요.

💛모범답안:

props drilling은 깊게 중첩된 컴포넌트 트리에서 props를 전달해야 하는 문제를 말합니다.
Context API를 사용하면 중간 컴포넌트를 거치지 않고 데이터와 함수를 전달할 수 있습니다.
상태 관리 라이브러리(Redux, Recoil 등)를 사용하여 전역 상태를 관리할 수 있습니다.

💛 한 줄 요약 : 깊게 중첩된 컴포넌트 트리에서 props를 전달해야 하는 문제. Context API를 사용하면 중간 컴포넌트를 거치지 않고 데이터와 함수를 전달

32. 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 작성 방식과 호환성이 좋습니다.

💛 한 줄 요약 : 위와 같음.

33. hook을 조건문 안에서 사용하면 안되는 이유에 대해 설명할 수 있습니다.

💛의도: 지원자가 React Hook을 조건문 안에서 사용하면 안되는 이유를 이해하고 있는지 평가.

💛팁:

React Hook의 규칙을 설명하세요.
Hook을 조건문 안에서 사용하면 발생하는 문제를 설명하세요.
Hook의 올바른 사용 예제를 떠올려 보세요.

💛모범답안:

React Hook은 컴포넌트의 최상위에서 호출되어야 하며, 조건문이나 반복문 안에서 사용하면 안됩니다.
조건문 안에서 Hook을 사용하면 Hook의 호출 순서가 변경되어 상태 관리가 불안정해질 수 있습니다.
이를 방지하기 위해 모든 Hook은 컴포넌트의 최상위에서 호출되어야 합니다.

💛 한 줄 요약 : Hook의 호출 순서가 변경되어 상태 관리가 불안정 -> 모든 Hook은 컴포넌트의 최상위에서 호출

DO YEON KIM

프론트엔드 개발자를 향해서

이전 포스트

TIL #66 웹 푸시 알림을 사용한 알림 시스템 구현 -2

다음 포스트

TIL #67 React 기술 면접 준비 -2

부트캠프

18. 비동기 통신에 대한 개념을 이해하고 axios와 fetch를 활용하여 데이터를 가져올 수 있습니다.

💛 모범답안:

💛 한 줄 요약 : 위와 같음.

19. 리액트에서 사용되는 Virtual DOM 의 동작방식을 설명할 수 있다.

💛 모범답안:

💛 한 줄 요약 : 실제 DOM의 가벼운 복사본. 상태 변화에 따른 UI 업데이트를 효율적으로 처리. 이를 통해 성능을 최적화하고 빠른 렌더링.

20. Redux 외에도 다른 상태 관리 라이브러리(Recoil, Zustand 등)에 대한 이해를 가지고 있다.

💛모범답안:

💛 한 줄 요약 : Zustand는 가벼운 상태 관리 라이브러리로, 상태를 간단하게 관리하고 React와 쉽게 통합할 수 있습니다.

21. axios의 instance와 interceptor를 이해하고 활용하여 좀 더 깊은 수준의 API call을 할 수 있습니다.

💛 모범답안:

💛 한 줄 요약 : ios instance는 기본 설정을 가진 axios 인스턴스를 생성하여 여러 요청에서 재사용. interceptor는 요청 또는 응답을 가로채어 추가적인 처리 => 인증 토큰 설정, 오류 처리 등을 중앙에서 관리

22. Custom Hooks를 작성하여 재사용 가능한 로직을 구현할 수 있습니다.

💛 모범답안:

💛 한 줄 요약 : React Hook을 사용하여 로직을 재사용할 수 있게 해주는 함수. 상태 관리, 데이터 가져오기 등의 로직을 캡슐화하여 여러 컴포넌트에서 재사용. 기존 Hook을 조합하여 Custom Hook을 작성

23. useEffect의 작동 원리에 대해 이해하고 설명할 수 있습니다.

💛 모범답안:

💛 한 줄 요약 : 수형 컴포넌트에서 사이드 이펙트를 수행하기 위해 사용되는 Hook. 컴포넌트가 렌더링된 후에 호출되며, 주로 데이터 가져오기, 구독 설정, DOM 업데이트 등을 처리

24. React-query의 장점과 사용법을 이해하고 있다.

💛 모범답안:

💛 한 줄 요약 : 서버 상태를 관리하고 비동기 데이터 페칭을 쉽게 해주는 라이브러리. 자동으로 데이터 캐싱, 리패칭, 에러 핸들링 등을 처리하여 개발자의 부담을 줄입니다.

25. Tanstack Query의 useQuery, useMutation을 사용하여 데이터를 관리하고 캐싱하는 방법을 이해합니다.

💛모범답안:

💛 한 줄 요약 : 위와 같음.

26. Tanstack Query의 useInfiniteQuery를 이용한 무한스크롤을 구현할 수 있다.

💛 모범답안:

💛 한 줄 요약 : useInfiniteQuery는 페이징된 데이터를 가져오고 무한 스크롤을 구현하는 데 사용. 데이터의 끝에 도달했을 때 추가 데이터를 가져오도록 설정

27. 쓰로틀링과 디바운싱에 대한 개념을 이해하고 적용할 수 있습니다.

💛 한 줄 요약 : 위와 같음.

28. 쿠키, 세션, 토큰, JWT와 같은 인증/인가 방식에 대한 이해를 갖습니다.

💛모범답안:

💛 한 줄 요약 : 위와 같음.

29. React-Query (Tanstack Query)를 이용해서 어떻게 상태관리를 할 수 있나요?

💛모범답안:

💛 한 줄 요약 : 위와 같음.

30. react 컴포넌트의 장점에 대해 설명할 수 있습니다.

💛모범답안:

💛 한 줄 요약 : 재사용이 가능, 컴포넌트를 여러 곳에서 사용, UI를 간단한 컴포넌트로 구성, 유지보수성과 확장성

31. props drilling과 이를 해결하는 방법에 관하여 설명할 수 있습니다.

💛모범답안:

💛 한 줄 요약 : 깊게 중첩된 컴포넌트 트리에서 props를 전달해야 하는 문제. Context API를 사용하면 중간 컴포넌트를 거치지 않고 데이터와 함수를 전달

32. css in js vs module.css에 대해 설명할 수 있습니다.

💛모범답안:

💛 한 줄 요약 : 위와 같음.

33. hook을 조건문 안에서 사용하면 안되는 이유에 대해 설명할 수 있습니다.

💛모범답안:

💛 한 줄 요약 : Hook의 호출 순서가 변경되어 상태 관리가 불안정 -> 모든 Hook은 컴포넌트의 최상위에서 호출

TIL #66 웹 푸시 알림을 사용한 알림 시스템 구현 -2

TIL #68 React 기술 면접 준비 - CSS, NEXT, CS, Performance Optimization, SEO and Accessibility

0개의 댓글