[기술면접] React 부분 5

<목차>

13. RESTful API
14. HTTP 프로토콜
15. 비동기 통신 - axios,fetch 중점

---

13. RESTful API

• Representational State Transfer(REST)라는 아키텍처 스타일을 따르는 애플리케이션 프로그래밍 인터페이스(API)
• 분산 시스템, 특히 웹 기반 시스템에서 자원을 효율적으로 관리하고 상호 작용하기 위한 원칙과 제약 조건을 정의

핵심 개념

1. 자원(Resource)

• REST에서는 모든 것이 "자원"으로 간주
• 사용자, 게시물, 상품 등이 자원에 해당
• 자원은 고유한 URI(Uniform Resource Identifier)를 통해 식별

예시)

• https://example.com/users (사용자 리스트)
• https://example.com/users/123 (ID가 123인 사용자)

2. HTTP 메서드 사용

• HTTP 메서드는 자원에 대해 수행되는 작업
• 5가지 메서드
  • GET : 자원 조회
  • POST : 자원 생성
  • PUT : 자원 전체 수정
  • PATCH : 자원의 일부 수정
  • DELETE : 자원 삭제

3. 상태 표현(Presentation)

• 클라이언트와 서버 간에 데이터를 전송할 때, 자원은 JSON,XML,HTML등 다양한 형식으로 표현
• JSON이 가장 일반적으로 사용

4. 무상태성(Statelessness)

• 각 요청은 독립적
• 서버는 이전 요청에 대한 상태를 저장하지 않음
• 클라이언트는 필요한 모든 정보를 요청에 포함

5. 캐싱(Cashing)

• RESTful API는 HTTP 캐싱 메커니즘을 활용하여 클라이언트가 동일한 요청을 반복하지 않도록 최적화 가능

6. 계층화된 시스템(Layered System)

• 클라이언트는 서버와 직접 통신한다고 가정하지만 실제로 프록시, 로드 밸런스, 게이트웨이 등을 거칠 수 있음

설계 원칙

1. URI는 자원을 나타냄

• URI는 동사가 아닌 명사를 사용

  잘못된 예: /getUser, /updateUser
  올바른 예: /users, /users/{id}

2. 일관된 HTTP 메서드 사용

• 각각의 HTTP 메서드에 적합한 작업만 수행

3. HTTP 상태 코드 사용

• 200 OK: 성공
• 201 Created: 자원 생성 성공
• 400 Bad Request: 잘못된 요청
• 404 Not Found: 자원을 찾을 수 없음
• 500 Internal Server Error: 서버 오류

4. HATEOAS(Hypermedia as the Engine of Application State)

• REST 고급 개념
• 응답에 다른 관련 작업 링크를 포함하여 클라이언트가 적절한 액션을 수행 할 수 있도록 도움

Q. RESTful API에 대해 이해하고 설명할 수 있습니다.

---

14. HTTP 프로토콜

• HTTP (HyperText Transfer Protocol)는 클라이언트(주로 웹 브라우저)와 서버 간의 데이터를 전송하기 위한 애플리케이션 계층 프로토콜
• 웹 기반이 되는 핵심 프로토콜
• HTML 문서뿐만 아니라 이미지, 동영상, JSON등 다양한 데이터 전송 가능

기본 개념

1. 비연결성(Connectionless)

• HTTP는 요청(request)와 응답(response) 후 연결을 끊음
• 한번의 요청-응답이 끝나면 클라이언트와 서버는 더 이상 서로 연결 상태를 유지하지 않음
• 이로 인해 서버의 자원을 효율적으로 사용할 수 있음
• 상태를 유지하려면 추가적인 메커니즘(예: 쿠키, 세션)이 필요

2. 무상태성(Stateless)

• HTTP는 각 요청이 독립적
• 서버는 이전 요청의 상태를 기억하지 않음
• 이를 보완하기 위해 쿠키와 세션 같은 기술을 사용해 상태를 유지

3. URI(Uniform Resource Identifier)

• 자원의 위치를 고유하게 식별하는 주소

예시 ) https://www.example.com/path/resource

• URL(Uniform Resource Locator)는 URI의 한 종류로, 자원의 위치를 명시적으로 나타냄

4. 클라이언트-서버 구조

• 클라이언트는 요청을 보내고 , 서버는 이를 처리하여 응답을 반환
• 이러한 명확한 구조로 인해 시스템을 단순하고 확장 가능하게 만듦

동작 방식

• 요청과 응답으로 이루어짐

1. HTTP 요청(Request)

• 클라이언트가 서버에 자원을 요청하는 메시지

요청의 구성

• 요청 라인(Request Line)

  • 요청 메서드 (GET, POST, PUT 등)
  • 요청 URI
  • HTTP 버전 (HTTP/1.1, HTTP/2 등)

  예) GET /index.html HTTP/1.1

• 헤더(Header)

  • 요청에 대한 부가 정보 포함

  예)

  Host: www.example.com
  User-Agent: Mozilla/5.0

• 본문(Body)

  • POST,PUT 요청처럼 데이터를 전송할 때 포함예)

  {
      "username": "john_doe",
      "password": "1234"
  }

2. HTTP 응답(Response)

• 서버가 클라이언트 요청에 대한 결과를 반납

응답의 구성

• 상태 라인(Status Line)

  • HTTP 버전
  • 상태 코드(Status Code)
  • 상태 메시지(Status Message)

  예) HTTP/1.1 200 OK

• 헤더(Header)

  • 응답에 대한 메타데이터 포함

  Content-Type: text/html
  Content-Length: 1234

• 본문(Body)

  • 요청한 자원의 데이터 포함

  <html>
      <body>Hello, world!</body>
  </html>

상태 코드

• 1xx (정보): 요청이 수신되었고 처리 중임
  • 100 Continue
• 2xx (성공): 요청이 성공적으로 처리됨
  • 200 OK
  • 201 Created
• 3xx (리다이렉션): 클라이언트가 다른 URL로 이동해야 함
  • 301 Moved Permanently
  • 302 Found
• 4xx (클라이언트 오류): 클라이언트 요청에 문제가 있음
  • 400 Bad Request
  • 401 Unauthorized
  • 404 Not Found
• 5xx (서버 오류): 서버에 문제가 발생함
  • 500 Internal Server Error
  • 503 Service Unavailable

HTTP의 발전

1. HTTP/1.1

• Keep-Alive를 통해 연결 재사용 가능
• 호스트 필드(Host) 도입

2. HTTP/2

• 멀티플렉싱(Multiplexing)지원 : 하나의 연결에서 다중 요청 처리
• 헤더 압축으로 속도 향상

3. HTTP/3

• UDP 기반의 QUIC 프로토콜 사용
• 연결 설정과 데이터 전송 속도 개선

Q. HTTP 프로토콜에 대한 기본 개념과 동작 방식을 이해합니다.

---

15. 비동기 통신 - axios,fetch 중점

비동기 통신이란

• 비동기 통신은 요청을 보낸 후 응답을 기다리지 않고 다른 작업을 수행 할 수 있는 통신 방식
• 네트워크나 서버의 처리 지연으로 인해 애플리케이션이 멈추지 않고 계속 실행될 수 있도록 함

비동기 통신의 주요 개념

1. 요청과 응답의 비동기성

• 요청을 보낸 후, 즉시 제어권이 반환
• 응답은 나중에 별도의 콜백 함수나 이벤트 핸들러를 통해 처리

2. 블로킹과 논블로킹

• 블로킹 통신 : 요청이 처리될 때까지 실행이 중단됨
• 논블로킹 통신 : 요청이 처리되는 동안 다른 작업을 계속 수행 사능

3. 주요 기술 및 메커니즘

• 콜백(callback) : 특정 작업이 완료된 후 실행되는 함수
• 프로미스(Promise) : 비동기 작업의 성공 또는 실패를 처리하는 객체
• async/await : 비동기 코드를 동기 코드처럼 작성할 수 있도록 도와주는 문법

비동기 통신의 장점

1. 효율적인 리소스 사용

• 요청 대기 시간 동안 CPU를 다른 작업에 활용 가능

2. 사용자 경험 향상

• UI가 멈추지 않고 계속 동작하므로 애플리케이션이 더 빠르게 느껴짐

3. 고성능 처리

• 동시에 여러 요청을 보낼 수 있어 서버와 상호작용이 효율적

비동기 통신의 단점

1. 복잡성 증가

• 코드가 비동기로 동작하면서 디버깅이 어려워질 수 있음

2. 제어 흐름 관리

• 콜백 지옥(Callback Hell)이나 의존성 복잡도가 발생할 가능성이 있음

3. 데이터 일관성 관리

• 여러 비동기 작업이 동시에 실행될 때 충돌 가능성 존재

비동기 vs 동기 통신 비교

특징	동기통신	비동기 통신
요청 후 대기 여부	요청 완료까지 대기	대기하지 않고 다른 작업 수행 가능
처리 방식	순차 처리	병렬 처리
응답 속도	느릴 수 있음	더 빠르게 반응 가능
구현 난이도	상대적으로 쉬움	상대적으로 복잡함
예시	데이터베이스 연결, 파일 입출력	AJAX, Promise, async/await

비동기 통신이 사용되는 사례

1. 웹 애플리케이션

• 서버에서 데이터를 가져와 페이지를 동적으로 업데이트할 때(AJAX)
• 실시간 채팅, 알림 서비스

2. 모바일 애플리케이션

• API 요청으로 데이터 로드
• 사용자 동작에 따라 비동기로 화면을 업데이트

3. 분산 시스템

• 마이크로서비스 간 비동기 메시지 전달
• 큐(Queue) 시스템 활용

4. 네트워크 프로그램

• 서버와 클라이언트 간 실시간 데이터 전송(WebSocket, HTTP/2)

Axios란

• JavaScript에서 비동기적으로 HTTP 요청을 보내기 위해 사용하는 Promise 기반의 HTTP 클라이언트
• 주로 브라우저와 Node.js환경에서 사용
• API 호출과 데이터를 주고받는 작업을 간편하게 처리

Axios 주요 특징

1. Promise 기반

• then과 catch를 활용하거나 async/await로 비동기 요청을 처리할 수 있음

2. 브라우저와 Node.js에서 모두 사용 능

• 클라이언트/서버 환경에서 동일한 방식으로 사용 가능

3. 간편한 요청 설정

• 요청 메서드(GET,POST등)를 쉽게 지정 가능
• 헤더 설정도 직관적

4. 요청/응답 인터셉터 지원

• 요청이나 응답을 가로채고 원하는 로직을 추가 가능

5. JSON 자동 변환

• 서버 응답 데이터를 자동으로 JSON으로 변환

6. 취소 기능

• 요청을 취소할 수 잇는 기능 제공

Axios를 활용한 데이터 사용

GET

1. 기본 사용법 (GET 요청)

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('데이터:', response.data);
  })
  .catch(error => {
    console.error('오류:', error);
  });

2. asynce/await사용(권장)

import axios from 'axios';

async function fetchData() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log('데이터:', response.data);
  } catch (error) {
    console.error('오류:', error);
  }
}

fetchData();

POST

import axios from 'axios';

async function postData() {
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: 'New Post',
      body: 'This is a new post created with Axios.',
      userId: 1
    });
    console.log('응답 데이터:', response.data);
  } catch (error) {
    console.error('오류:', error);
  }
}

postData();

옵션 설정 - 헤더 설정

axios.get('https://jsonplaceholder.typicode.com/posts', {
  headers: {
    Authorization: 'Bearer your-token'
  }
});

옵션 설정 - 쿼리 매개변수 추가

axios.get('https://jsonplaceholder.typicode.com/posts', {
  params: {
    userId: 1
  }
}).then(response => {
  console.log('필터링된 데이터:', response.data);
});

옵션 설정 - 기본값 설정

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.headers.common['Authorization'] = 'Bearer your-token';

axios.get('/posts');

인터셉터 - 요청

axios.interceptors.request.use(
  config => {
    console.log('요청 전 처리:', config);
    return config;
  },
  error => Promise.reject(error)
);

인터셉터 - 응답

axios.interceptors.response.use(
  response => {
    console.log('응답 후 처리:', response);
    return response;
  },
  error => Promise.reject(error)
);

Axios의 장점

1. 요청과 응답 데이터 처리에 최적화
2. Fetch API보다 사용이 간편, 브라우저 호환성이 더 좋음
3. 요청 취소, 응답 시간 초과 설정 등이 가능해 유연성 뛰어남

Fetch란

• 브라우저에서 제공하는 내장 API
• 비동기적으로 HTTP 요청을 보내고 응답을 처리하기 위해 사용
• 이전에 사용되던 XMLHttpRequest를 대체하기 위해 설계
• 간결하고 직관적인 문법 제공

Fetch의 주요 특징

1. Promise 기반

• 비동기 작업을 처리하기 위해 Promise를 사용
• 성공 시 then, 실패 시 catch로 처리

2. 모던 브라우저 지원

• 대부분의 최신 브라우저에서 기본적으로 지원

3. 간단한 사용법

• GET, POST, PUT, DELETE등 다양한 HTTP 요청을 쉽게 처리

4. JSON 처리 간편

• 응답 데이터를 JSON으로 변환하는 기능(.json())제공

5. 요청 실패시 에러없음

• 요청이 실패해도 에러를 throw하지 않음
• 네트워크 에러가 아닌 경우에는 Promise가 항상 성공 처리 (예:404 Not Found도 성공으로 간주)

Fetch를 활용한 데이터 사용

GET

1. 기본 사용법

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    if (!response.ok) {
      throw new Error('네트워크 응답에 문제가 있습니다.');
    }
    return response.json(); // JSON 데이터로 변환
  })
  .then(data => {
    console.log('데이터:', data);
  })
  .catch(error => {
    console.error('오류 발생:', error);
  });

2. async/await사용(권장)

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error('네트워크 응답에 문제가 있습니다.');
    }
    const data = await response.json();
    console.log('데이터:', data);
  } catch (error) {
    console.error('오류 발생:', error);
  }
}

fetchData();

POST

async function postData() {
  const payload = {
    title: 'New Post',
    body: 'This is a new post created with fetch.',
    userId: 1,
  };

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST', // HTTP 메서드
      headers: {
        'Content-Type': 'application/json', // 요청 헤더
      },
      body: JSON.stringify(payload), // JSON으로 변환
    });

    if (!response.ok) {
      throw new Error('네트워크 응답에 문제가 있습니다.');
    }

    const data = await response.json();
    console.log('응답 데이터:', data);
  } catch (error) {
    console.error('오류 발생:', error);
  }
}

postData();

Fetch 옵션

• method: HTTP 메서드 (GET, POST, PUT, DELETE 등)
• headers: 요청 헤더 설정
• body: 요청 본문 (주로 JSON 데이터)
• mode: 요청 모드 설정 (기본은 cors)
• credentials: 쿠키 포함 여부 (include, same-origin, omit)

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Bearer your-token',
  },
  body: JSON.stringify({ title: 'Hello', body: 'World', userId: 1 }),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('오류 발생:', error));

응답 처리

fetch의 응답은 Response 객체로 반환

• response.ok: 응답 상태 코드가 200-299 사이인지 확인.
• response.status: HTTP 상태 코드.
• response.json(): JSON 데이터로 변환.
• response.text(): 텍스트 데이터로 변환.

fetch의 단점과 해결 방법

1. 에러 처리 문제

• 네트워크 에러만 Promise를 reject함
• HTTP 상태 코드(404,500등)는 reject하지 않음

=> 해결방법 : response.ok로 상태 코드 확인

if (!response.ok) {
  throw new Error(`HTTP 오류! 상태 코드: ${response.status}`);
}

2. 취소 기능 부재

• 기본적으로 요청 취소 기능이 없음

=> 해결방법 : AbortController사용

const controller = new AbortController();
const signal = controller.signal;

fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('요청이 취소되었습니다.');
    } else {
      console.error('오류 발생:', error);
    }
  });

// 요청 취소
controller.abort();

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