JavaScript로 REST API 학습

JavaScript로 REST API 배우기

REST API(Representational State Transfer Application 프로그래밍 인터페이스)는 네트워크 애플리케이션을 구축하는 데 널리 사용됩니다. 이 문서는 클라이언트 측 및 서버 측 구현을 모두 다루면서 JavaScript에서 REST API로 작업하는 방법을 이해하는 데 도움이 될 것입니다.

---

1. REST API란 무엇인가요?

REST API를 사용하면 클라이언트(예: 브라우저 또는 모바일 앱)가 서버와 통신하여 데이터를 가져오거나 조작할 수 있습니다. 표준 HTTP 방법을 사용하는 무상태 아키텍처를 따릅니다.

핵심 개념

1. 리소스: 엔드포인트로 표시됩니다(예: 사용자 데이터의 경우 /users).
2. HTTP 방법:
   • GET: 데이터를 검색합니다.
   • POST: 새 리소스를 생성합니다.
   • PUT: 기존 리소스를 업데이트합니다.
   • 삭제: 리소스를 제거합니다.
3. 데이터 형식: JSON은 일반적으로 데이터 교환에 사용됩니다.
4. HTTP 상태 코드:
   • 200 OK: 성공.
   • 201 생성됨: 리소스가 생성되었습니다.
   • 400 잘못된 요청: 클라이언트측 오류입니다.
   • 404 찾을 수 없음: 리소스를 찾을 수 없습니다.
   • 500 내부 서버 오류: 서버 문제입니다.

---

2. 도구 및 설정

• 클라이언트측:

  • 브라우저(fetch 또는 axios 라이브러리가 있는 JavaScript).
  • https://jsonplaceholder.typicode.com과 같은 API를 사용해 연습해 보세요.

• 서버측:

  • Node.js를 설치하고 Express 프레임워크를 사용하세요.

---

3. 클라이언트 측에서 REST API 작업

JavaScript는 REST API와 상호작용하기 위해 fetch() API와 axios와 같은 타사 라이브러리를 제공합니다.

---

fetch()를 사용하여 데이터 가져오기

REST API에서 데이터를 검색하는 방법은 다음과 같습니다.

// Fetch data from an API
const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const users = await response.json(); // Parse JSON data
    console.log(users);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

fetchUsers();

설명:

1. fetch(url): HTTP 요청을 합니다.
2. response.json(): 응답을 JSON 형식으로 변환합니다.
3. 오류 처리는 네트워크 오류나 잘못된 응답을 포착하기 위해 try...catch를 사용하여 구현됩니다.

---

POST로 데이터 전송

새 리소스를 생성하려면 fetch() API와 함께 POST 메서드를 사용하세요.

const createUser = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify JSON format
      },
      body: JSON.stringify({ // Convert JavaScript object to JSON
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
      }),
    });

    const newUser = await response.json(); // Parse JSON response
    console.log(newUser);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

createUser();

핵심 포인트:

• method 옵션은 HTTP 메소드를 지정합니다.
• 헤더 옵션은 콘텐츠 유형을 나타내는 데 사용됩니다.
• 본문에는 JSON 페이로드가 포함되어 있습니다.

---

4. 서버 측에서 REST API 구축

백엔드에서는 일반적으로 Express 프레임워크가 포함된 Node.js를 사용하여 REST API를 구축합니다.

환경 설정

1. Node.js 설치: Node.js를 다운로드하세요.
2. 새 프로젝트 초기화:

// Fetch data from an API
const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const users = await response.json(); // Parse JSON data
    console.log(users);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

fetchUsers();

---

간단한 REST API 만들기

다음은 기본 REST API 서버의 예입니다.

const createUser = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify JSON format
      },
      body: JSON.stringify({ // Convert JavaScript object to JSON
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
      }),
    });

    const newUser = await response.json(); // Parse JSON response
    console.log(newUser);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

createUser();

설명:

• 미들웨어: app.use(express.json())는 들어오는 JSON 요청을 구문 분석합니다.
• 경로:
  • GET /users: 모든 사용자를 가져옵니다.
  • GET /users/:id: 특정 사용자를 가져옵니다.
  • POST /users: 새 사용자를 추가합니다.
  • PUT /users/:id: 사용자 세부정보를 업데이트합니다.
  • DELETE /users/:id: 사용자를 제거합니다.

---

5. REST API 테스트

Postman과 같은 도구나 컬과 같은 명령줄 유틸리티를 사용하여 API를 테스트할 수 있습니다.

우편 배달원 사용

1. 여기에서 Postman을 설치하세요.
2. 새 요청 만들기:
   • GET http://localhost:3000/users: 모든 사용자를 가져옵니다.
   • POST http://localhost:3000/users: JSON 본문으로 사용자를 추가합니다.

컬 사용

   mkdir rest-api-demo
   cd rest-api-demo
   npm init -y
   npm install express

---

6. REST API 개발 모범 사례

1. 의미 있는 엔드포인트 이름을 사용하세요(예: /data 대신 /users).
2. 유효하지 않거나 유해한 데이터를 방지하기 위해 사용자 입력을 검증합니다.
3. 일관적인 HTTP 상태 코드를 따르세요.
4. Swagger 또는 Postman과 같은 도구를 사용하여 API를 문서화하세요.

---

내 작업 코드 저장소

결론

REST API는 현대 웹 개발의 초석입니다. 클라이언트 측과 서버 측 모두에서 JavaScript로 REST API와 상호 작용하는 방법을 배우면 애플리케이션 구축 및 통합을 위한 강력한 기술 세트를 얻을 수 있습니다. 연습이 중요합니다. 공개 API를 사용하여 시작한 다음 Node.js 및 Express를 사용하여 자신만의 API를 구축하세요.

---

이 가이드의 모든 부분에 대해 질문하거나 설명을 찾아보세요!

위 내용은 JavaScript로 REST API 학습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!