Node.js, Express 및 Axios로 API 구축하기: 종합 가이드

안녕하세요, 개발자 여러분! 오늘은 Node.js, Express 및 Axios를 사용하여 API를 구축하는 세계로 깊이 들어가 보겠습니다. 경험이 풍부한 프로그래머든 이제 시작하는 분이든, 이 게시물은 여러분이 효율적으로 견고한 API를 만드는 과정을 안내해 드릴 것입니다. 또한, 여러분의 API 테스트 및 문서화 프로세스를 간소화할 수 있는 놀라운 Apidog 도구를 소개하겠습니다.

💡

API 개발을 다음 단계로 끌어올릴 준비가 되셨나요? Apidog를 무료로 다운로드하고 오늘 바로 API를 손쉽게 테스트하고 문서화해 보세요!

button

소개

API(애플리케이션 프로그래밍 인터페이스)는 현대 웹 애플리케이션의 중추가 되었습니다. 이들은 서로 다른 소프트웨어 시스템이 원활하게 통신하고 데이터를 공유할 수 있게 해줍니다. 웹 앱, 모바일 앱 또는 데스크톱 앱을 개발하든, API는 필수적입니다.

Node.js, Express 및 Axios를 선택하는 이유는?

Node.js, Express 및 Axios는 API를 구축하고 소비하는 데 있어 역동적인 삼위일체입니다. 그 이유는 다음과 같습니다:

Node.js: 비차단형 이벤트 기반 아키텍처로 잘 알려진 Node.js는 확장 가능한 네트워크 애플리케이션을 만들기에 완벽합니다.
Express: 이 최소화되고 유연한 Node.js 웹 애플리케이션 프레임워크는 웹 및 모바일 애플리케이션을 개발하기 위한 강력한 기능 세트를 제공합니다.
Axios: 브라우저와 Node.js를 위한 프로미스 기반 HTTP 클라이언트인 Axios는 REST 엔드포인트에 비동기 HTTP 요청을 쉽게 보내고 CRUD 작업을 수행할 수 있게 해줍니다.

이 세 가지 강력한 도구를 결합하면 효율적이고 확장 가능하며 유지 관리가 쉬운 API를 구축할 수 있습니다.

환경 설정하기

코드에 들어가기 전에 환경을 설정해 보겠습니다. 머신에 Node.js와 npm(노드 패키지 관리자)을 설치해야 합니다.

Node.js와 npm 설치하기: Node.js 웹사이트로 가서 최신 버전을 다운로드하세요. npm은 Node.js와 함께 번들로 제공됩니다.
새 프로젝트 초기화하기: 터미널을 열고 다음 명령어를 실행하세요:

mkdir nodejs-express-axios-api
cd nodejs-express-axios-api
npm init -y

이렇게 하면 새 디렉토리가 생성되고 기본 package.json 파일로 새 Node.js 프로젝트가 초기화됩니다.

Express와 Axios 설치하기:

npm install express axios

Node.js 및 Express로 첫 번째 API 만들기

환경이 설정되었으므로 간단한 API를 만들어 보겠습니다.

Express 설정하기

먼저 Express 서버를 설정해야 합니다. server.js라는 이름의 파일을 만들고 다음 코드를 추가하세요:

const express = require('express');
const app = express();
const PORT = 3000;

// JSON 파싱 미들웨어
app.use(express.json());

// 서버 시작
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

API 엔드포인트 정의하기

다음으로 API 엔드포인트를 정의해 보겠습니다. 책 목록을 관리하는 간단한 CRUD 애플리케이션을 위한 엔드포인트를 만들겠습니다.

책 만들기: 이 엔드포인트는 사용자가 목록에 새 책을 추가할 수 있게 해줍니다.
책 읽기: 이 엔드포인트는 모든 책 목록을 반환합니다.
책 업데이트하기: 이 엔드포인트는 사용자가 기존 책의 세부 정보를 업데이트할 수 있게 해줍니다.
책 삭제하기: 이 엔드포인트는 사용자가 목록에서 책을 삭제할 수 있게 해줍니다.

server.js에 다음 코드를 추가하세요:

let books = [];

// 책 만들기
app.post('/books', (req, res) => {
    const book = req.body;
    books.push(book);
    res.status(201).send('책이 성공적으로 추가되었습니다');
});

// 책 읽기
app.get('/books', (req, res) => {
    res.json(books);
});

// 책 업데이트하기
app.put('/books/:id', (req, res) => {
    const bookId = req.params.id;
    const updatedBook = req.body;
    books = books.map(book => book.id === bookId ? updatedBook : book);
    res.send('책이 성공적으로 업데이트되었습니다');
});

// 책 삭제하기
app.delete('/books/:id', (req, res) => {
    const bookId = req.params.id;
    books = books.filter(book => book.id !== bookId);
    res.send('책이 성공적으로 삭제되었습니다');
});

API 실행하기

API를 실행하려면 터미널에서 다음 명령어를 사용하세요:

node server.js

다음 메시지가 표시됩니다: 서버가 http://localhost:3000에서 실행 중입니다.

Axios로 API 소비하기

이제 API가 실행되고 있으므로 Axios를 사용하여 이를 소비하는 방법을 배우겠습니다.

Axios로 HTTP 요청 보내기

Axios는 REST 엔드포인트에 비동기 HTTP 요청을 보내고 CRUD 작업을 쉽게 수행할 수 있게 해줍니다. 각 작업(생성, 읽기, 업데이트, 삭제)을 Axios를 사용하여 수행하는 방법을 시연하겠습니다.

먼저, 이전에 설치하지 않았다면 프로젝트에 Axios를 설치하세요:

npm install axios

예시: Axios를 사용하여 우리의 책 API와 상호작용하기

client.js라는 새 파일을 만들고 다음 코드를 추가하세요:

const axios = require('axios');
const API_URL = 'http://localhost:3000/books';

// 새 책 만들기
const createBook = async (book) => {
    try {
        const response = await axios.post(API_URL, book);
        console.log(response.data);
    } catch (error) {
        console.error(error);
    }
};

// 모든 책 읽기
const getBooks = async () => {
    try {
        const response = await axios.get(API_URL);
        console.log(response.data);
    } catch (error) {
        console.error(error);
    }
};

// 책 업데이트하기
const updateBook = async (bookId, updatedBook) => {
    try {
        const response = await axios.put(`${API_URL}/${bookId}`, updatedBook);
        console.log(response.data);
    } catch (error) {
        console.error(error);
    }
};

// 책 삭제하기
const deleteBook = async (bookId) => {
    try {
        const response = await axios.delete(`${API_URL}/${bookId}`);
        console.log(response.data);
    } catch (error) {
        console.error(error);
    }
};

// 사용 예시
const newBook = { id: '1', title: 'Node.js for Beginners', author: 'John Doe' };
createBook(newBook);
getBooks();
updateBook('1', { id: '1', title: 'Advanced Node.js', author: 'John Doe' });
deleteBook('1');

설명

createBook: 새 책을 추가하기 위해 POST 요청을 보냅니다.
getBooks: 모든 책을 검색하기 위해 GET 요청을 보냅니다.
updateBook: 기존 책을 업데이트하기 위해 PUT 요청을 보냅니다.
deleteBook: 책을 삭제하기 위해 DELETE 요청을 보냅니다.

Axios의 고급 사용법 및 오류 처리

HTTP 요청을 처리할 때 오류 처리는 매우 중요합니다. Axios는 효과적으로 오류를 처리할 수 있는 여러 방법을 제공합니다.

오류 처리하기

보다 우아하게 오류를 처리하기 위해 client.js 파일을 수정합니다:

const axios = require('axios');
const API_URL = 'http://localhost:3000/books';

// 새 책 만들기
const createBook = async (book) => {
    try {
        const response = await axios.post(API_URL, book);
        console.log(response.data);
    } catch (error) {
        handleError(error);
    }
};

// 모든 책 읽기
const getBooks = async () => {
    try {
        const response = await axios.get(API_URL);
        console.log(response.data);
    } catch (error) {
        handleError(error);
    }
};

// 책 업데이트하기
const updateBook = async (bookId, updatedBook) => {
    try {
        const response = await axios.put(`${API_URL}/${bookId}`, updatedBook);
        console.log(response.data);
    } catch (error) {
        handleError(error);
    }
};

// 책 삭제하기
const deleteBook = async (bookId) => {
    try {
        const response = await axios.delete(`${API_URL}/${bookId}`);
        console.log(response.data);
    } catch (error) {
        handleError(error);
    }
};

// 오류 처리 함수
const handleError = (error) => {
    if (error.response) {
        // 요청은 이루어졌지만 서버가 상태 코드로 응답했습니다
        console.error('오류:', error.response.data);
        console.error('상태:', error.response.status);
        console.error('헤더:', error.response.headers);
    } else if (error.request) {
        // 요청은 이루어졌지만 응답을 받지 못했습니다
        console.error('오류: 응답을 받지 못했습니다', error.request);
    } else {
        // 요청 설정 중에 문제가 발생했습니다
        console.error('오류:', error.message);
    }
};

맞춤 헤더 및 인터셉터 설정하기

Axios를 사용하면 맞춤 헤더를 설정하고 요청 또는 응답을 가로챌 수 있습니다. 이는 인증 토큰을 추가하거나 로깅하는 데 유용할 수 있습니다.

const axios = require('axios');
const API_URL = 'http://localhost:3000/books';

// 맞춤 헤더가 있는 Axios 인스턴스
const axiosInstance = axios.create({
    baseURL: API_URL,
    headers: { 'Authorization': 'Bearer YOUR_TOKEN_HERE' }
});

// 요청 인터셉터
axiosInstance.interceptors.request.use(config => {
    console.log('보낸 요청 시간:', new Date().toISOString());
    return config;
}, error => {
    return Promise.reject(error);
});

// 응답 인터셉터
axiosInstance.interceptors.response.use(response => {
    console.log('받은 응답 시간:', new Date().toISOString());
    return response;
}, error => {
    return Promise.reject(error);
});

// 인터셉터 사용 예시
const getBooks = async () => {
    try {
        const response = await axiosInstance.get('/');
        console.log(response.data);
    } catch (error) {
        console.error(error);
    }
};

getBooks

();

APIdog로 API 테스트 및 문서화하기

API를 테스트하고 문서화하는 것은 API가 예상대로 작동하고 다른 개발자들이 사용하기 쉬운지 확인하는 데 중요합니다. 바로 APIdog가 이 역할을 합니다.

APIdog란?

APIdog는 API를 손쉽게 테스트하고 문서화하는 데 도움이 되는 강력한 도구입니다. APIdog를 사용하면 포괄적인 API 문서를 생성하고 자동화된 테스트를 수행하며 팀과 API를 공유할 수 있습니다.

APIdog로 API 테스트하기

[POST] 요청을 만드는 방법에 대한 간단한 튜토리얼을 따라가보겠습니다.

button

1단계: Apidog 열기 및 새 요청 생성하기.

Apidog을 시작하고 새 요청을 선택하세요.

2단계: API 입력하기

POST 요청을 위해 만들 API 세부정보를 찾거나 수동으로 입력하세요.

3단계: 매개변수 입력하기

필수 매개변수와 요청 본문에 포함하고 싶은 데이터를 입력하세요.

Apidog를 사용하면 POST 요청을 처리하는 데 소요되는 시간과 노력을 절약할 수 있습니다.

APIdog로 API 문서화하기

API 문서를 쉽게 생성하려면 다음 단계별 가이드를 따르세요:

1단계: Apidog에 가입하기

API 문서를 위해 APIdog를 사용하려면 회원 가입 후 로그인하세요. 로그인 후 프로젝트 센터로 이동하며, 여기서 기본 프로젝트를 선택하거나 새로 만들 수 있습니다.

2단계: 새 API 만들기

API 프로젝트는 여러 엔드포인트로 구성됩니다. "+" 버튼을 클릭하거나 프로젝트 내에서 "엔드포인트 추가"를 클릭하여 엔드포인트를 추가하세요.

3단계: API 정보 입력하기

엔드포인트 URL, 설명 및 요청/응답 세부정보와 같은 세부정보를 제공하세요. 엔드포인트 문서화에는 다음이 포함됩니다:

HTTP 방법(GET, POST, PUT, DELETE 등) 및 API 요청 경로 지정하기
요청 매개변수 정의하기(이름, 유형, 설명)
예상 응답 설명하기(상태 코드, 형식, 예시 응답)

4단계: API 문서 저장하기

필요한 정보를 입력한 후 "저장"을 클릭하여 API 문서를 저장하세요.

API를 테스트하기 위해 '실행' 클릭 — "실행"을 클릭하여 API를 테스트하세요

5단계: 온라인 API 문서에서 직접 API 테스트하기

API 문서를 저장한 후 API를 "실행"할 수 있는 옵션이 생깁니다. "실행" 버튼을 클릭하면 API 요청이 전송되고 응답이 수신되어 엔드포인트를 테스트할 수 있습니다. 이 과정에서 해결해야 할 오류 및 문제를 파악할 수 있습니다.

API 문서가 비즈니스 요구를 충족하면 단일 링크를 통해 다른 사람과 공유할 수 있습니다.

APIdog를 사용하여 온라인 API 문서를 생성하는 이점

온라인 디버깅: "실행" 버튼을 클릭하여 문서 내에서 API를 쉽게 디버깅하여 빠르고 효율적인 테스트를 가능하게 합니다.

자동 문서 생성: 필요한 정보를 입력하여 포괄적인 API 문서를 자동으로 생성하며, 광범위한 수동 구성의 필요성을 제거합니다.

코드 생성: 요청 및 응답 모델 코드를 다양한 언어(JavaScript 등)로 즉시 생성하며, Fetch, Axios, JQuery 등의 옵션으로 개발 과정을 간소화합니다.

Apidog이 생성한 온라인 문서에서 요청 및 응답 코드를 생성할 수 있습니다.

클라우드 Mock: 백엔드 서비스를 시뮬레이션하고 테스트를 위해 제한 없이 가상 서버를 생성하여 유연성을 높이고 실제 백엔드 서비스에 대한 의존도를 줄입니다.

결론

축하합니다! 이제 Node.js, Express 및 Axios를 사용하여 견고한 API를 성공적으로 구축했습니다. 또한 Axios를 사용하여 API를 소비하고, 오류를 효과적으로 처리하며, APIdog로 API 테스트 및 문서를 개선하는 방법을 배웠습니다.

API는 현대 웹 개발의 중추이며, 이러한 도구를 숙달하면 강력하고 확장 가능한 애플리케이션을 만드는 길로 나아갈 수 있습니다. API 개발 및 테스트 프로세스를 간소화하기 위해 APIdog를 무료로 다운로드하는 것을 잊지 마세요.

button