React 기술면접 3주차(2)

강연주·2025년 1월 6일

React 기술면접

🙋‍♀️ 기술면접

목록 보기

96/112

RESTful API

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는 데이터를 삭제에 사용.

아키텍처 스타일 : 시스템 설계의 기본 구조와 규칙을 정의하는 방식.

RESTful 예시

✅ RESTful URL
- GET /users                 // 사용자 목록 조회
- GET /users/123            // 특정 사용자 조회
- POST /users               // 새 사용자 생성
- PUT /users/123           // 사용자 정보 수정
- DELETE /users/123        // 사용자 삭제

❌ Non-RESTful URL
- GET /getUsers            // 동사 사용
- GET /getUserById/123     // 동사 사용
- POST /createUser         // 동사 사용
- GET /api.php?action=deleteUser&id=123  // 쿼리 파라미터로 액션 전달

HTTP 프로토콜

HTTP 프로토콜에 대한 기본 개념과 동작 방식을 이해합니다.
- 답변)
  - 의도:
    - HTTP 프로토콜의 기본 개념과 동작 방식 이해도 평가.
  - 팁:
    - HTTP의 정의와 주요 특징 설명.
    - HTTP 요청과 응답의 구조 설명.
    - 상태 코드(200, 404, 500 등)의 의미 언급.
  - 모범답안:
    - HTTP는 Hypertext Transfer Protocol의 약자로, 웹 브라우저와 서버 간의 데이터 통신을 위한 프로토콜이다.
    - HTTP 요청은 메서드, URL, 헤더, 바디로 구성되며,
      응답은 상태 코드, 헤더, 바디로 구성된다.
    - 상태 코드는 요청의 결과를 나타내며, 200은 성공, 404는 리소스를 찾을 수 없음, 500은 서버 오류를 의미한다.

요청 형식

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json
Authorization: Bearer token123

{
    "name": "John",
    "age": 30
}

응답 형식

HTTP/1.1 200 OK
Content-Type: application/json
Date: Mon, 06 Jan 2025 12:00:00 GMT

{
    "id": 1,
    "name": "John",
    "age": 30
}

비동기 통신, axios, fetch

비동기 통신에 대한 개념을 이해하고 axios와 fetch를 활용하여 데이터를 가져올 수 있습니다.
- 답변)
  - 의도:
    - 비동기 통신의 개념 이해, axios와 fetch를 사용해 데이터 가져오는 능력 평가.
  - 팁:
    - 비동기 통신의 개념과 필요성 설명.
    - axios와 fetch의 차이점 언급.
    - axios와 fetch를 사용하는 예제 떠올리기.
  - 모범답안:
    - 비동기 통신은 서버와 클라이언트 간의 데이터를 비동기적으로 주고받는 방법으로, 페이지 리로딩 없이 데이터를 갱신할 수 있다.
    - fetch는 내장된 JavaScript API로 간단한 비동기 요청을 수행할 수 있고, axios는 더 많은 기능을 제공하는 서드 파티 라이브러리다.
    - axios는 기본적으로 JSON 데이터 처리에 용이하고, 요청 및 응답 인터셉터, 기본 URL 설정 등 다양한 기능을 제공한다.

Fetch vs Axios

Fetch가 적합한 케이스

간단한 데이터 요청
브라우저 내장 API 선호시
작은 규모의 프로젝트

Axios가 적합한 케이스

복잡한 API 통신
인터셉터 필요시
자동 JSON 변환 필요시
서드 파티 라이브러리 : 제3자가 제공하는 라이브러리로, 공식적으로 제공되지 않는 추가 기능을 제공한다.

Axios의 JSON 처리가 쉬운 이유

🖥️ javascript

// Axios - 자동 JSON 변환
axios.get('/api/data').then(response => console.log(response.data));

// Fetch - 수동 JSON 변환 필요
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

Axios 주요 기능

🖥️ javascript
// 기본 URL 설정
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {'X-Custom-Header': 'value'}
});

// 인터셉터 예시
api.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${getToken()}`;
  return config;
});

React의 Virtual DOM

리액트에서 사용되는 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의 개념과 주요 특징 설명.
    - 각 라이브러리가 Redux와 어떻게 다른지 설명.
    - Recoil과 Zustand를 사용하는 예제 떠올리기.
  - 모범답안:
    - Recoil은 React의 상태 관리를 단순화하고, 컴포넌트의 상태를 보다 쉽게 관리할 수 있게 해주는 라이브러리.
    - Zustand는 가벼운 상태 관리 라이브러리로, 상태를 간단하게 관리하고 React와 쉽게 통합할 수 있다.
    - Recoil은 전역 상태를 atom과 selector로 관리하고, Zustand는 간단한 API로 상태를 정의하고 사용한다.

Recoil 특징과 예시

🖥️ javascriptCopy// atom 정의
import { atom, useRecoilState } from 'recoil';

const countState = atom({
  key: 'countState',
  default: 0
});

// 컴포넌트에서 사용
function Counter() {
  const [count, setCount] = useRecoilState(countState);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

axios의 instance, interceptor

axios의 instance와 interceptor를 이해하고 활용하여 좀 더 깊은 수준의 API call을 할 수 있습니다.
- 답변)
  - 의도:
    - axios의 instance와 interceptor에 대한 이해, 활용 과 API 호출을 효과적으로 관리하는 능력 평가.
  - 팁:
    - axios instance와 interceptor의 개념 설명.
    - instance와 interceptor 사용 이유 설명.
    - instance와 interceptor 활용 예제 떠올리기.
  - 모범답안:
    - axios instance는 기본 설정을 가진 axios 인스턴스를 생성하여, 여러 요청에서 재사용할 수 있게 해준다.
    - interceptor는 요청 또는 응답을 가로채어, 추가적인 처리를 할 수 있게 해준다.
    - instance와 interceptor를 사용하면 인증 토큰 설정, 오류 처리 등을 중앙에서 관리할 수 있다.

Axios의 Instance, Interceptor

🖥️ javascript
// Instance 생성
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 요청 인터셉터
api.interceptors.request.use(
  config => {
    // 요청 보내기 전 수행
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 응답 인터셉터
api.interceptors.response.use(
  response => {
    // 응답 데이터 가공
    return response;
  },
  error => {
    if (error.response.status === 401) {
      // 인증 에러 처리
      logout();
    }
    return Promise.reject(error);
  }
);

Custom Hooks

Custom Hooks를 작성하여 재사용 가능한 로직을 구현할 수 있습니다.
- 답변)
  - 의도:
    - Custom Hooks 개념 이해 및 이를 통한 재사용 가능 로직 구현 능력 평가.
  - 팁:
    - Custom Hooks 정의와 필요성 설명.
    - Custom Hooks 작성하는 방법 설명.
    - Custom Hooks 활용 예제 떠올리기.
  - 모범답안:
    - Custom Hooks는 React Hook을 사용하여 로직을 재사용할 수 있게 해주는 함수.
    - Custom Hooks는 상태 관리, 데이터 가져오기 등의 로직을 캡슐화하여 여러 컴포넌트에서 재사용 가능하다.
    - useState, useEffect 등 기존 Hook을 조합하여 Custom Hook을 작성할 수 있다.

util 함수는, 순수 JS로 리액트나 상태 없이 단순 기능 (계산, 정렬 등)을 수행하는 부품으로 보자.
커스텀훅은 use~로 시작하도록 네이밍하여,
리액트의 상태를 활용하는 함수(?)라고 생각하면 된다.

커스텀 훅 vs API 함수 vs Util 함수

커스텀 훅 예시

🖥️ javascript

// 커스텀 훅 - React의 상태를 다루는 로직
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  
  const increment = () => setCount(prev => prev + 1);
  const decrement = () => setCount(prev => prev - 1);
  
  return { count, increment, decrement };
}

API 함수 예시

🖥️ javascript

// API 함수 - 서버와의 통신을 담당
const fetchUserData = async (userId) => {
  const response = await axios.get(`/api/users/${userId}`);
  return response.data;
};

Util 함수 예시

🖥️ javascript

// Util 함수 - 순수 JavaScript 로직
const formatDate = (date) => {
  return new Date(date).toLocaleDateString();
};

커스텀 훅 : React의 상태와 생명주기를 다루는 로직
API 함수 : 서버 통신을 담당하는 함수
Util 함수 : 순수한 데이터 처리 함수

useEffect

useEffect의 작동 원리에 대해 이해하고 설명할 수 있습니다.
- 답변)
  - 의도:
    - 지원자가 useEffect의 개념과 작동 원리를 이해하고 있는지 평가.
  - 팁:
    - useEffect의 정의와 사용 목적을 설명하세요.
    - useEffect가 언제 호출되는지 설명하세요.
    - useEffect의 의존성 배열의 역할을 설명하세요.
  - 모범답안:
    - useEffect는 함수형 컴포넌트에서 사이드 이펙트를 수행하기 위해 사용되는 Hook입니다.
    - useEffect는 컴포넌트가 렌더링된 후에 호출되며, 주로 데이터 가져오기, 구독 설정, DOM 업데이트 등을 처리합니다.
    - 의존성 배열을 사용하여 특정 값이 변경될 때만 useEffect가 실행되도록 제어할 수 있습니다.

Tanstack Query

React-query의 장점과 사용법을 이해하고 있다.
- 답변)
  - 의도:
    - 지원자가 React-query의 장점과 이를 사용하는 방법을 이해하고 있는지 평가.
  - 팁:
    - React-query의 주요 기능과 장점을 설명하세요.
    - React-query를 사용하는 방법을 설명하세요.
    - React-query를 활용하는 예제를 떠올려 보세요.
  - 모범답안:
    - React-query는 서버 상태를 관리하고 비동기 데이터 페칭을 쉽게 해주는 라이브러리입니다.
    - React-query는 자동으로 데이터 캐싱, 리패칭, 에러 핸들링 등을 처리하여 개발자의 부담을 줄입니다.
    - useQuery, useMutation 훅을 사용하여 데이터를 가져오고 변이시킬 수 있습니다.

강연주

아무튼, 개발자

이전 포스트

React 기술면접 3주차(1)

다음 포스트

React 기술면접 3주차(2)

🙋‍♀️ 기술면접

RESTful API

RESTful 예시

HTTP 프로토콜

비동기 통신, axios, fetch

Fetch vs Axios

Axios의 JSON 처리가 쉬운 이유

Axios 주요 기능

React의 Virtual DOM

Redux 외 상태 관리 라이브러리 - Recoil, Zustand

Recoil 특징과 예시

axios의 instance, interceptor

Axios의 Instance, Interceptor

Custom Hooks

커스텀 훅 vs API 함수 vs Util 함수

useEffect

Tanstack Query

React 기술면접 3주차(1)

React 기술면접 3-1. RESTful API

0개의 댓글