Node.js와 Apidog를 사용하여 이미지를 JPEG로 변환하기

웹 애플리케이션을 구축하고 사용자가 이미지를 업로드할 수 있도록 해야 합니다. 그러나 한 가지 조건이 있습니다: 일관성과 성능 이유로 모든 이미지를 JPEG 형식으로 변환해야 합니다. 사용자 업로드 이미지를 실시간으로 JPEG로 변환하려면 어떻게 해야 할까요?

이 튜토리얼에서는 Node.js와 Express.js를 사용하여 이미지를 JPEG 형식으로 변환하는 백엔드 서버를 설정하는 방법을 살펴보겠습니다. 우리는 이미지 처리에 강력한 Sharp 라이브러리를 활용하고, Apidog와 같은 프론트엔드 클라이언트 또는 API 관리 도구에서 이미지 변환 요청을 처리하는 방법을 보여줄 것입니다.

사전 요구사항:

시작하기 전에 시스템에 Node.js 및 npm (Node 패키지 관리자)이 설치되어 있는지 확인하십시오. 공식 Node.js 웹사이트에서 다운로드하여 설치할 수 있습니다.

백엔드 설정;

프로젝트를 위한 새로운 폴더를 만들고 npm을 초기화하는 것부터 시작합시다.

mkdir image-conversion-backend
cd image-conversion-backend
npm init -y

다음으로, 필요한 종속성: Express, Cors, Multer 및 Sharp을 설치합니다.

npm install express cors multer sharp

종속성이 설치되면, Express 서버를 정의할 index.js 파일을 생성합니다.

const cors = require("cors");
const express = require('express');
const multer = require('multer');
const sharp = require('sharp');

const app = express();
const port = process.env.PORT || 8080;

// 파일 업로드를 처리하기 위해 Multer 구성
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 교차 출처 리소스 공유 (CORS) 활성화
app.use(cors());

// JSON 몸체를 구문 분석
app.use(express.json());

// 이미지 변환 경로 정의
app.post('/convert', upload.single('image'), async (req, res) => {
    try {
        // Sharp를 사용하여 업로드된 이미지를 JPEG 형식으로 변환
        const buffer = await sharp(req.file.buffer).toFormat('jpg').toBuffer();

        // 변환된 이미지를 응답으로 전송
        res.send(buffer);
    } catch (error) {
        console.error('변환 오류:', error);
        res.status(500).send('변환 실패');
    }
});

// 서버 시작
app.listen(port, () => {
    console.log(`서버가 포트 ${port}에서 실행 중입니다.`);
});

코드 이해하기;

백엔드 애플리케이션의 핵심 구성 요소를 살펴보겠습니다:

Express 초기화: Express 애플리케이션을 초기화하고 서버의 포트 번호를 정의합니다.
Multer 구성: Multer가 파일 업로드를 처리하도록 구성됩니다. 우리의 경우, 우리는 업로드된 파일을 메모리에 저장하기 위해 memoryStorage()를 사용합니다.
CORS 미들웨어: http://localhost:3000에서 실행 중인 프론트엔드 클라이언트의 요청을 허용하기 위해 교차 출처 리소스 공유 (CORS)가 활성화됩니다.
이미지 변환 경로: /convert 경로를 POST로 정의하여 이미지 변환이 이루어집니다. Multer 미들웨어가 파일 업로드를 처리하고, Sharp 라이브러리가 이미지를 JPEG 형식으로 변환합니다.
오류 처리: 변환 과정 중 발생할 수 있는 오류를 처리하기 위해 변환 로직을 try-catch 블록으로 감쌉니다.
서버 시작: 마지막으로, 지정된 포트에서 수신 대기하는 Express 서버를 시작합니다.

백엔드 서버 실행

백엔드 서버를 실행하려면 터미널에서 프로젝트 디렉터리로 이동하여 다음 명령어를 실행합니다:

node index.js

이제 귀하의 백엔드 서버가 실행 중이며, 이미지 변환 요청을 처리할 준비가 되었습니다.

이제 React, Vue.js 또는 일반 JavaScript Fetch 메서드와 같은 프론트엔드 도구를 사용하여 프론트엔드에서 서버로 요청을 보내어 테스트해볼 수 있습니다. 잘 작동할 것입니다. 그러나 이 가이드에서는 이전에 언급한 대로 Apidog를 사용할 것입니다.

Apidog 시작하기

Apidog이 무엇인지 모르는 분들을 위해, Apidog는 API 문서화, API 디버깅, API 모킹 및 API 자동 테스트를 위한 통합 협업 플랫폼입니다. 이전에 Postman에 대해 들어보았거나 사용한 적이 있는 분들은 Apidog이 Postman보다 훨씬 더 많은 기능을 제공하므로 이상적인 API 관리 도구임을 알 수 있습니다.

버튼

위 링크를 사용하여 다운로드하거나 계정을 만들어 시작할 수 있습니다. 계정이 생성되면, 다음 단계는 이미 실행 중인 백엔드 서버에 POST 요청을 보내 이미지를 JPEG로 변환하는 것입니다.

Apidog에 계정을 만들면 새로운 팀/작업 공간이 자동으로 생성됩니다. 프로젝트를 생성하거나 생성된 기본 프로젝트를 진행할 수 있습니다. 이 예제에서는 이미 생성된 프로젝트를 사용하고, 백엔드 코드를 시도하기 위해 새로운 요청을 생성하겠습니다.

해당 요청 버튼을 클릭하면 첫 번째 요청을 보낼 수 있는 인터페이스가 표시됩니다.

가장 먼저 요청 유형을 GET에서 POST로 변경해야 합니다. URL을 내 로컬 서버의 URL로 업데이트하세요 - 제 경우에는 localhost:8080입니다.

그 옆에 "Body" 섹션을 클릭하고 폼 데이터를 선택합니다. 폼 데이터를 선택하면 이미지를 선택하고 Apidog에 직접 업로드하여 변환을 테스트할 수 있습니다. 이제 폼 데이터에 이름을 "Image"로 지정하고, 유형을 "file"로 설정한 후 변환할 이미지를 업로드하세요.

완료되면 오른쪽 상단의 전송 버튼을 클릭하여 요청을 보냅니다. 모든 것이 잘 진행되면 200 응답과 다운로드할 파일을 볼 수 있습니다.

파일을 다운로드할 때 response.bin 파일이 표시됩니다. 속성을 보면 .jpg 파일임을 알 수 있습니다. 그게 바로 변환된 이미지입니다.

결론

우리는 방금 Node.js를 사용하여 .png 또는 다른 형식의 이미지를 .jpeg로 변환하는 방법과 Apidog로 테스트하는 방법을 보았습니다.

Apidog는 프론트엔드 도구나 프레임워크에 의존하지 않고 API를 테스트할 수 있는 능력과 유연성을 제공했습니다.