이번 강좌에서는 Express 환경에서 파일을 저장하고 관리하는 방법에 대해 설명하겠습니다. 현대 웹 애플리케이션에서 파일 업로드와 같은 기능은 매우 중요하며, Express.js는 이를 간편하게 구현할 수 있는 여러 가지 방법을 제공합니다. 이 글에서는 Multer라는 미들웨어를 사용하여 파일 업로드를 처리하고, Path 모듈을 통해 파일 경로를 관리하는 방법에 대해 배우겠습니다.

1. Express.js란?

Express.js는 Node.js를 위한 웹 애플리케이션 프레임워크로, 간단하고 안정적인 API를 제공하여 웹 애플리케이션 및 API를 개발하기 위한 최적의 선택입니다. 비슷한 프레임워크와 비교했을 때, Express는 적은 설정으로도 강력하고 유연한 웹 애플리케이션을 만들 수 있도록 도와줍니다.

2. 프로젝트 환경 설정

이 강좌를 시작하기 전에 필요한 환경을 설정하겠습니다. Node.js와 npm(노드 패키지 관리자)이 설치되어 있어야 합니다.

bash
# 프로젝트 폴더를 만들고 이동
mkdir express-file-upload
cd express-file-upload

# npm 프로젝트 초기화
npm init -y

# Express와 Multer 설치
npm install express multer

3. Express 서버 설정

먼저, Express 서버를 설정합니다. server.js라는 파일을 생성하고 아래의 코드를 작성합니다.

javascript
const express = require('express');
const multer = require('multer');
const path = require('path');

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

// Multer 설정
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'uploads/'); // 파일이 저장될 경로
    },
    filename: (req, file, cb) => {
        cb(null, Date.now() + path.extname(file.originalname)); // 날짜 + 원래 파일 확장자로 파일 이름 설정
    }
});

const upload = multer({ storage: storage });

// 정적 파일 서비스
app.use('/uploads', express.static('uploads'));

// 루트 경로에 대한 GET 요청 처리
app.get('/', (req, res) => {
    res.send('
파일 업로드를 할 수 있는 페이지입니다.
');
});

// 파일 업로드 처리
app.post('/upload', upload.single('file'), (req, res) => {
    if (req.file) {
        res.send(`파일 업로드 성공: ${req.file.filename}`);
    } else {
        res.status(400).send('파일 업로드 실패.');
    }
});

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

코드 설명

• multer.diskStorage: 파일의 저장 경로와 파일 이름을 설정합니다.
• upload.single('file'): 포맷이 multipart/form-data인 요청에서 파일을 하나만 처리합니다.
• express.static: 지정한 폴더에 있는 파일을 정적 파일로 제공합니다.

4. 파일 업로드 HTML 폼 만들기

파일 업로드를 위한 간단한 HTML 폼을 만들겠습니다. index.html 파일을 생성하고 아래 코드를 작성합니다.

html




    
    
    


    
파일 업로드
    

        
        업로드
    

HTML 폼 설명

• enctype="multipart/form-data": 파일 업로드를 위한 인코딩 타입입니다.
• method="post": 파일 전송에 POST 메서드를 사용합니다.

5. 서버 실행 및 파일 업로드 테스트

서버를 실행하려면 아래 명령어를 입력합니다.

bash
node server.js

웹 브라우저에서 http://localhost:3000에 접속하여 파일 업로드 폼을 사용해 보세요. 파일을 선택하고 업로드 버튼을 클릭하면, 파일이 uploads 폴더에 저장되고 파일 링크가 표시됩니다.

6. 업로드 파일 관리

업로드한 파일의 목록을 관리하고, 삭제하는 방법에 대해서도 알아보겠습니다. 아래는 파일 목록을 반환하고 삭제하는 API를 정의한 코드를 추가합니다.

javascript
const fs = require('fs');

// 파일 목록을 반환하는 라우트
app.get('/files', (req, res) => {
    fs.readdir('uploads', (err, files) => {
        if (err) {
            return res.status(500).send('파일을 읽는 데 문제가 발생했습니다.');
        }
        const fileList = files.map(file => `
${file} 삭제
`).join('');
        res.send(`
업로드된 파일 목록
${fileList}
`);
    });
});

// 파일 삭제하는 라우트
app.get('/delete/:filename', (req, res) => {
    const filename = req.params.filename;
    fs.unlink(`uploads/${filename}`, err => {
        if (err) {
            return res.status(500).send('파일 삭제에 실패했습니다.');
        }
        res.redirect('/files');
    });
});

업로드 파일 목록 확인하기

1. 파일 목록을 보려면 /files 경로에 접근하세요.
2. 각 파일 옆의 ‘삭제’ 링크를 클릭하여 파일을 삭제할 수 있습니다.

7. 오류 처리

파일 업로드를 처리할 때 다양한 오류가 발생할 수 있습니다. 따라서 적절한 오류 처리를 추가하는 것이 중요합니다. Multer에서 지원하는 오류 처리를 통해 올바르지 않은 파일 형식이나 파일 크기 초과 등의 오류를 관리할 수 있습니다.

javascript
const upload = multer({
    storage: storage,
    limits: { fileSize: 5 * 1024 * 1024 }, // 최대 5MB
    fileFilter: (req, file, cb) => {
        const filetypes = /jpeg|jpg|png|gif|pdf/;
        const mimetype = filetypes.test(file.mimetype);
        const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
        if (mimetype && extname) {
            return cb(null, true);
        }
        cb('Error: 파일 형식이 올바르지 않습니다.');
    }
});

오류 처리 설명

• limits: 업로드할 파일의 최대 크기를 제한합니다.
• fileFilter: 업로드할 수 있는 파일 형식을 제한합니다.

8. 정리

이번 강좌에서는 Express.js를 사용하여 파일을 업로드하고 관리하는 방법에 대해 알아보았습니다. Multer 미들웨어를 활용하여 파일 업로드 기능을 쉽게 구현할 수 있으며, Path 모듈을 통해 파일 경로를 안전하게 관리할 수 있습니다. 또한, 업로드한 파일의 목록을 보여주고 삭제하는 기능도 구현하였습니다. 이러한 기초적인 파일 관리 기능들은 다양한 웹 애플리케이션에서 필수적이므로, 여러분의 프로젝트에 쉽게 적용할 수 있기를 바랍니다.

이 강좌를 통해 Express.js를 활용한 파일 업로드 및 관리에 대한 이해가 깊어졌기를 바라며, 질문이나 추가 학습이 필요한 부분에 대해서는 자유롭게 댓글로 남겨주세요.

9. 부록

다음은 Express.js와 관련된 유용한 링크들입니다:

• Express.js 공식 문서
• Multer GitHub
• Node.js 공식 문서

이 강좌에서는 Express.js 웹 프레임워크를 사용하여 Node.js 서버를 구축하고, MongoDB 데이터베이스와의 연동을 위해 Mongoose 라이브러리를 사용하는 방법에 대해 자세히 설명합니다. 이 강좌를 통해 여러분은 Express 서버를 설정하고 데이터베이스 모델을 정의하며 데이터 CRUD(Create, Read, Update, Delete) 작업을 수행하는 방법을 배우게 될 것입니다.

목차

1. Express.js 소개
2. MongoDB 소개
3. Mongoose란?
4. Express 서버 준비하기
5. MongoDB 연동하기
6. CRUD 기능 구현하기
7. 결론

1. Express.js 소개

Express.js는 Node.js를 위한 최소화되고 유연한 웹 애플리케이션 프레임워크입니다. 이 프레임워크는 웹 애플리케이션 및 API를 구축하는 데 필요한 많은 기능을 제공합니다. Express는 미들웨어 개념을 사용하여 요청-응답 사이클을 처리하며, 이를 통해 다양한 요청에 대한 유연한 라우팅과 응답 처리가 가능합니다.

Express의 주요 특징으로는 다음과 같습니다:

• 경량성과 빠른 성능
• 미들웨어를 통한 확장 가능성
• RESTful API 구축을 위한 사용 용이성
• 다양한 데이터 포맷 지원 (JSON, XML 등)

2. MongoDB 소개

MongoDB는 비관계형(NoSQL) 데이터베이스로, 유연한 데이터 모델링을 지원합니다. JSON과 유사한 BSON(Binary JSON) 형식으로 데이터를 저장하기 때문에, 객체 지향 프로그래밍에 친숙한 개발자들에게 인기가 많습니다. MongoDB는 스케일 아웃이 용이하고 대용량 데이터 저장에 적합한 특성을 가지고 있습니다.

MongoDB의 주요 특징은 다음과 같습니다:

• 유연한 스키마: 데이터 구조를 사전에 정의할 필요 없이, 서로 다른 데이터 구조를 같은 컬렉션에 저장할 수 있습니다.
• 수평 확장: 데이터 분산 및 복제를 통해 유연하게 데이터베이스 성능을 확장할 수 있습니다.
• 강력한 쿼리 메커니즘: 다양한 쿼리 반환 기능을 지원하여 복잡한 데이터 검색이 가능합니다.

3. Mongoose란?

Mongoose는 MongoDB를 Node.js 애플리케이션과 연결하는 ODM(Object Data Modeling) 라이브러리입니다. Mongoose는 MongoDB의 데이터를 더 쉽게 다룰 수 있도록 스키마 기반 모델링을 제공합니다. 이를 통해 데이터의 구조를 정의하고, 유효성 검사, 쿼리 빌더와 같은 기능을 사용할 수 있습니다. Mongoose를 사용하면 MongoDB의 모든 기능을 효율적으로 활용할 수 있습니다.

Mongoose의 주요 기능은 다음과 같습니다:

• 스키마 정의: CRUD 작업에 필요한 데이터 구조를 명확히 정의할 수 있습니다.
• 미들웨어: 데이터 저장 또는 업데이트 전에 실행되는 전/후처리기를 작성할 수 있습니다.
• 내장 유효성 검사: 데이터 저장 시 유효성을 검사할 수 있습니다.

4. Express 서버 준비하기

이제 Express 서버를 구축해 보겠습니다. 먼저 Node.js가 설치되어 있어야 합니다. 아래와 같이 프로젝트를 생성하고 필요한 패키지를 설치합니다.

mkdir express-mongo-example
cd express-mongo-example
npm init -y
npm install express mongoose body-parser

이제 간단한 Express 서버를 만들어 보겠습니다. server.js 파일을 생성하고 다음 코드를 작성합니다.

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const app = express();
app.use(bodyParser.json());

// MongoDB 연결
mongoose.connect('mongodb://localhost:27017/example', { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('MongoDB 연결 성공'))
    .catch(err => console.error('MongoDB 연결 실패:', err));

app.get('/', (req, res) => {
    res.send('Express 서버가 실행 중입니다.');
});

const PORT = 3000;
app.listen(PORT, () => {
    console.log(`서버가 포트 ${PORT}에서 실행 중입니다.`);
});

위 코드를 실행하기 위해 아래 명령어를 터미널에 입력합니다.

node server.js

브라우저에서 http://localhost:3000을 입력하면 “Express 서버가 실행 중입니다.”라는 메시지를 확인할 수 있습니다.

5. MongoDB 연동하기

Mongoose를 사용하여 MongoDB에 연결하고, 데이터 모델을 정의해 보겠습니다. models 폴더를 생성하고, 그 안에 User.js 파일을 생성합니다. 다음과 같이 사용자 모델을 정의합니다.

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
    name: { type: String, required: true },
    email: { type: String, required: true, unique: true },
    age: { type: Number, min: 0 }
});

module.exports = mongoose.model('User', userSchema);

이제 server.js 파일에서 위 모델을 불러와서 사용할 수 있습니다.

const User = require('./models/User');

MongoDB에 데이터 삽입을 위한 API를 추가해 보겠습니다. POST /api/users 엔드포인트를 만들고, 사용자 데이터를 수신하여 데이터베이스에 저장합니다.

app.post('/api/users', (req, res) => {
    const user = new User(req.body);
    user.save()
        .then(() => res.status(201).send('사용자 생성 완료.'))
        .catch(err => res.status(400).send('사용자 생성 실패: ' + err.message));
});

위 코드를 통해 클라이언트에서 전송한 JSON 데이터를 MongoDB에 저장할 수 있습니다. 이제 Postman 또는 Curl을 사용하여 테스트해 볼 수 있습니다.

6. CRUD 기능 구현하기

이제 MongoDB와의 연동이 완료되었으므로, Complete CRUD(생성, 조회, 수정, 삭제) 기능을 구현해 보겠습니다.

6.1 Create

위에서 이미 POST /api/users API를 구현했습니다. 이제 사용자 생성을 위해 JSON 데이터를 전송하면 됩니다.

6.2 Read

사용자 데이터를 조회하는 API를 생성하겠습니다. GET /api/users 엔드포인트를 추가하여 모든 사용자 데이터를 가져오는 기능을 구현해 보겠습니다.

app.get('/api/users', (req, res) => {
    User.find()
        .then(users => res.status(200).json(users))
        .catch(err => res.status(500).send('사용자 조회 실패: ' + err.message));
});

6.3 Update

특정 사용자의 정보를 수정할 수 있는 PUT /api/users/:id 엔드포인트를 추가합니다.

app.put('/api/users/:id', (req, res) => {
    User.findByIdAndUpdate(req.params.id, req.body, { new: true })
        .then(updatedUser => res.status(200).json(updatedUser))
        .catch(err => res.status(400).send('사용자 수정 실패: ' + err.message));
});

6.4 Delete

사용자를 삭제하는 DELETE /api/users/:id 엔드포인트를 추가합니다.

app.delete('/api/users/:id', (req, res) => {
    User.findByIdAndDelete(req.params.id)
        .then(() => res.status(200).send('사용자 삭제 완료.'))
        .catch(err => res.status(400).send('사용자 삭제 실패: ' + err.message));
});

7. 결론

이 강좌를 통해 Express.js와 Mongoose를 사용하여 MongoDB에 데이터베이스 연동하는 방법을 배웠습니다. 우리는 기본적인 CRUD 기능을 모두 구현하였으며, 이러한 기능을 기반으로 더 복잡한 애플리케이션을 개발할 수 있습니다. 추가적으로 환경변수 설정, 에러 핸들링, 사용자 인증 등을 고려한다면 더 완벽한 애플리케이션을 개발할 수 있을 것입니다. Express와 MongoDB의 조합은 많은 웹 애플리케이션에서 매우 유용하게 사용되므로, 이 기술 스택에 대해 지속적으로 연구하고 실습하는 것을 추천드립니다.

현대 웹 애플리케이션에서 파일 업로드는 매우 일반적인 기능입니다. 사용자는 종종 문서, 이미지, 비디오와 같은 파일을 서버에 업로드해야 합니다. Express.js는 Node.js 기반의 웹 애플리케이션 프레임워크로, 이러한 작업을 구현하는 데 적합한 도구입니다. 이번 강좌에서는 Express.js를 통해 업로드한 파일의 메타데이터를 처리하는 방법을 심도 있게 설명하겠습니다.

1. Express.js 소개

Express.js는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크로, 서버 사이드 애플리케이션 구축을 위해 필요한 기본 기능을 제공합니다. RESTful API를 쉽게 구현할 수 있는 기능과 미들웨어 기반의 아키텍처로 인해 많은 개발자들이 애용하고 있습니다.

2. 필요한 패키지 설치하기

파일 업로드 기능을 구현하기 위해 필요한 패키지를 설치하겠습니다. 가장 인기 있는 파일 업로드 Middleware인 multer를 사용하겠습니다. multer는 multipart/form-data를 처리하여, 파일을 쉽게 업로드할 수 있도록 도와줍니다.

npm install express multer

3. 기본적인 Express 서버 설정

기본적인 Express 서버를 설정하겠습니다. 다음 코드를 사용하여 app.js라는 파일을 생성하고, Express 서버를 설정합니다.

const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;

// multer 설정
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/');
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname);
    }
});

const upload = multer({ storage: storage });

// 기본 라우트
app.get('/', (req, res) => {
    res.send('Hello, Express!');
});

// 파일 업로드 라우트
app.post('/upload', upload.single('file'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('파일이 업로드되지 않았습니다.');
    }
    res.send({
        message: '파일이 성공적으로 업로드되었습니다.',
        file: req.file,
    });
});

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

4. 파일 업로드 라우트 설명

위의 코드는 파일 업로드를 위한 라우트를 설정합니다. upload.single('file')은 클라이언트로부터 file이라는 이름의 파일을 업로드 받을 것을 기대하며, 업로드된 파일의 정보를 req.file에서 사용할 수 있습니다.업로드된 파일의 메타데이터는 req.file 객체에 포함됩니다. 이 객체에는 파일의 이름, 경로, 크기와 같은 정보가 포함되어 있습니다.

4.1. 메타데이터 처리

업로드한 파일에 대한 메타데이터를 처리하는 방법에 대해 더 깊이 살펴보겠습니다. 다음 코드를 통해 파일의 메타데이터를 JSON 형식으로 반환하도록 수정할 수 있습니다.

app.post('/upload', upload.single('file'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('파일이 업로드되지 않았습니다.');
    }

    const metadata = {
        originalName: req.file.originalname,
        mimeType: req.file.mimetype,
        size: req.file.size,
        uploadDate: new Date(req.file.uploadDate || Date.now()),
        path: req.file.path,
    };

    res.send({
        message: '파일이 성공적으로 업로드되었습니다.',
        metadata: metadata,
    });
});
        

5. 클라이언트 측 파일 업로드 구현

이제 클라이언트 측에서 파일을 업로드하는 HTML 양식을 구현하겠습니다. 다음 코드를 사용하여 index.html 파일을 생성합니다.

    
    
    


    
파일 업로드
    

        
        파일 업로드
    
    


        

6. 업로드한 파일의 메타데이터 구조

위 코드에서 업로드된 파일의 메타데이터는 다음과 같은 구조를 가집니다:

{
    message: "파일이 성공적으로 업로드되었습니다.",
    metadata: {
        originalName: "example.png",
        mimeType: "image/png",
        size: 102456,
        uploadDate: "2023-01-01T00:00:00.000Z",
        path: "uploads/1234567890-example.png"
    }
}
        

7. 에러 핸들링

파일 업로드 시 다양한 에러 상황이 발생할 수 있습니다. 예를 들어 파일 크기가 너무 크거나 허용되지 않는 파일 형식이 업로드되는 경우입니다. 이를 처리하기 위해 multer의 설정에서 제한 조건을 추가할 수 있습니다.

// 파일 크기 제한 (5MB 이하)
const upload = multer({
    storage: storage,
    limits: { fileSize: 5 * 1024 * 1024 },
    fileFilter: (req, file, cb) => {
        const fileTypes = /jpeg|jpg|png|gif/;
        const extname = fileTypes.test(file.mimetype);
        const mimetype = fileTypes.test(file.originalname.split('.').pop().toLowerCase());
        if (extname && mimetype) {
            return cb(null, true);
        }
        cb(new Error('허용되지 않는 파일 형식입니다.'));
    }
});
        

8. 실전 배포 및 최적화

이제 파일 업로드 기능이 완성되었습니다. 마지막 단계로는 이 기능을 실제 프로덕션 환경에 배포하고 최적화하는 것입니다. 이 과정에서는 다음과 같은 사항을 고려해야 합니다:

• 파일 저장소: 클라우드 저장소 (예: AWS S3)를 사용할지, 로컬 파일 시스템에 저장할지를 결정합니다.
• 보안: 업로드되는 파일의 유효성을 검사하여 악성 코드가 포함되지 않도록 합니다.
• 성능: 여러 사용자가 동시에 업로드할 수 있도록 성능을 최적화합니다.

9. 결론

이번 강좌에서는 Express.js를 사용하여 파일 업로드 기능을 구현하고 업로드된 파일의 메타데이터를 처리하는 방법에 대해 설명했습니다. Express.js와 multer를 활용하면 간단하면서도 강력한 파일 업로드 기능을 구현할 수 있습니다. 완성된 애플리케이션을 바탕으로 추가적인 기능들을 고려하여 확장해보세요.

10. 추가 리소스

• Express 공식 문서
• Multer 공식 문서
• DigitalOcean: Node.js로 이미지 업로드하기

현대 웹 애플리케이션은 여러 서버와 API가 상호작용하며 정보를 주고받는 형태로 설계되고 있습니다.
이 과정에서 CORS(Cross-Origin Resource Sharing)라는 개념이 굉장히 중요하게 작용합니다.
CORS는 외부 도메인에서 자원을 요청할 때 브라우저가 이를 허용할지 결정하는 메커니즘입니다.
이 글에서는 Express.js에서 CORS를 설정하는 방법을 단계별로 자세하게 알아보겠습니다.

1. CORS의 이해

CORS란 하나의 사이트에서 다른 사이트의 자원에 접근하는 것을 허용하는 보안 기능입니다.
웹 브라우저는 기본적으로 자바스크립트에서 다른 도메인으로의 요청을 차단합니다.
예를 들어, ‘https://example.com’에서 호스팅되는 웹 애플리케이션이 ‘https://api.example.com’로 API 요청을 하려고 하면,
브라우저는 이를 차단하고 CORS 오류를 발생시킵니다.
이는 웹 보안을 강화하기 위한 기능입니다.

2. Express.js에서 CORS를 설정하는 이유

Express.js는 서버와 API를 쉽게 구축할 수 있는 강력한 웹 프레임워크입니다.
하지만 외부 도메인에서의 요청을 허용하려면 CORS 설정이 필요합니다.
이를 통해 여러분의 API가 신뢰할 수 있는 도메인에서만 요청을 받을 수 있도록 제어할 수 있습니다.
CORS를 적절히 설정하지 않으면 보안 위협에 노출될 수 있습니다.

3. CORS 설정 방법

Express.js에서 CORS를 설정하는 방법은 여러 가지가 있지만, 가장 일반적으로 사용하는 방법은 cors 패키지를 활용하는 것입니다.
이 패키지는 CORS 관련 로직을 간단하게 처리할 수 있도록 도와줍니다. 이제 설치 및 설정 방법을 살펴보겠습니다.

3.1. CORS 패키지 설치하기

npm install cors

먼저, CORS 패키지를 프로젝트에 설치해야 합니다.
위의 명령어를 사용하여 CORS 패키지를 설치합니다.

3.2. 기본 CORS 설정

설치가 완료되면 Express 애플리케이션에서 사용할 수 있도록 설정합니다.
기본적인 설정은 다음과 같습니다.

javascript
const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors()); // CORS 설정 추가

app.get('/api/data', (req, res) => {
    res.json({ message: 'CORS가 설정된 데이터입니다.' });
});

app.listen(3000, () => {
    console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});

위 코드에서 app.use(cors()); 구문이 CORS를 활성화시킵니다.
이제 이 서버는 모든 도메인에서의 요청을 수락하게 됩니다.

3.3. CORS 옵션 설정하기

모든 도메인에서 요청을 수락하는 것은 보안상 위험할 수 있습니다.
특정 도메인만 허용하고 싶다면 CORS 옵션을 설정해야 합니다.
아래 예제에서 특정 도메인에 대해 요청을 허용하는 방법을 보여드립니다.

javascript
const express = require('express');
const cors = require('cors');

const app = express();
const allowedOrigins = ['http://example.com', 'http://another-domain.com'];

app.use(cors({
    origin: allowedOrigins, // 허용된 도메인
    methods: ['GET', 'POST'], // 허용된 HTTP 메소드
    allowedHeaders: ['Content-Type', 'Authorization'], // 허용된 헤더
}));

app.get('/api/data', (req, res) => {
    res.json({ message: '특정 도메인에서 요청한 데이터입니다.' });
});

app.listen(3000, () => {
    console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});

위 코드는 allowedOrigins 배열에 지정된 도메인만 요청할 수 있도록 설정합니다.
methods와 allowedHeaders 옵션으로 HTTP 메소드와 허용된 헤더도 추가적으로 지정할 수 있습니다.

3.4. 특수한 CORS 설정

가끔은 특정 요구 사항에 따라 CORS 정책을 세밀하게 설정해야 할 때가 있습니다.
예를 들어 인증된 요청에서 ‘Credential’을 허용하려면 아래와 같이 설정할 수 있습니다.

javascript
const express = require('express');
const cors = require('cors');

const app = express();
const allowedOrigins = ['http://example.com'];

app.use(cors({
    origin: allowedOrigins,
    credentials: true, // 인증된 요청 허용
}));

app.get('/api/data', (req, res) => {
    res.json({ message: '인증이 허용된 데이터입니다.' });
});

app.listen(3000, () => {
    console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});

위 예시에서 credentials: true 옵션을 추가함으로써, 인증된 요청이 허용됩니다.
클라이언트에서 인증 정보(예: 쿠키)를 포함하여 요청이 가능한 상태가 됩니다.

3.5. CORS 오류 처리하기

종종 클라이언트에서 CORS 오류가 발생할 수 있는데, 이는 브라우저가 요청을 차단하기 때문입니다.
서버가 올바르게 CORS를 설정했더라도 몇 가지 이유로 인해 오류가 발생할 수 있습니다.
오류를 해결하려면 다음과 같은 점을 먼저 확인해야 합니다.

• 서버와 클라이언트의 도메인이 올바르게 설정되어 있는지 확인합니다.
• HTTP 메소드와 헤더가 허용된 값인지 확인합니다.
• If the server is configured correctly and still causes problems, check browser extensions or security settings that might block requests.

4. CORS를 사용한 실제 예제

이제 실제 애플리케이션에서 CORS를 사용하는 예제를 살펴보겠습니다.
아래 예제에서는 간단한 클라이언트와 Express.js 서버를 설정하여 CORS를 사용하는 방법을 보여줍니다.

4.1. Express.js 서버 설정

javascript
const express = require('express');
const cors = require('cors');

const app = express();
const allowedOrigins = ['http://example-client.com'];

app.use(cors({
    origin: allowedOrigins,
    methods: ['GET', 'POST'],
    credentials: true,
}));

app.get('/api/message', (req, res) => {
    res.json({ message: '안녕하세요, 클라이언트입니다!' });
});

app.listen(3000, () => {
    console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});

4.2. 클라이언트 코드

Express 서버에 요청하는 클라이언트 코드는 다음과 같이 작성할 수 있습니다.

javascript
fetch('http://localhost:3000/api/message', {
    method: 'GET',
    credentials: 'include', // 인증 정보 포함
})
.then(response => response.json())
.then(data => {
    console.log(data.message); // 안녕하세요, 클라이언트입니다!
})
.catch(error => {
    console.error('오류 발생:', error);
});

5. 결론

이번 글에서는 Express.js에서 CORS를 설정하는 방법에 대해 자세히 알아보았습니다.
CORS 설정은 보안의 일환으로 매우 중요한 과정입니다.
올바르게 설정하면, 외부 도메인에서 API를 안전하게 활용할 수 있습니다.
Express.js에서 CORS를 설정하는 것은 간단하지만,
보안상의 위험을 피하기 위해서는 적절한 정책을 계속 유지하고 관리해야 합니다.

더 많은 팁과 방법을 알고 싶다면, 공식 Express.js 문서와 CORS에 대한 리소스를 참고하시길 바랍니다.
앞으로 여러분의 웹 애플리케이션에서 CORS를 적절히 활용하여 안전하고 신뢰할 수 있는 서비스를 제공하시길 바랍니다!

1. 서론

Node.js는 비동기 프로그래밍을 지원하는 서버 사이드 플랫폼으로, 그 중 Express.js는 간결하고 강력한 웹 애플리케이션 프레임워크로 널리 사용됩니다. 본 강좌에서는 PostgreSQL 데이터베이스와 ORM(Object Relational Mapping) 라이브러리인 Sequelize를 활용하여 Express 애플리케이션에 관계형 데이터베이스를 연결하는 방법에 대해 자세히 알아보겠습니다.

2. 환경 설정

우선, 프로젝트를 위해 Node.js 및 PostgreSQL이 설치되어 있어야 합니다. PostgreSQL 설치 후 데이터베이스를 생성하고 다음 단계를 진행합니다.

2.1. Node.js 프로젝트 생성

mkdir express-postgresql-example
cd express-postgresql-example
npm init -y

2.2. 필요한 패키지 설치

Express, Sequelize, pg (PostgreSQL 드라이버), 관련 패키지를 설치합니다.

npm install express sequelize pg pg-hstore

3. PostgreSQL 데이터베이스 설정

PostgreSQL 데이터베이스에 접속하여 아래와 같이 데이터베이스를 생성합니다.
명령줄에서 psql을 실행한 후 다음 SQL 명령어를 입력합니다.

CREATE DATABASE example_db;

테이블 구조를 다음과 같이 설정하겠습니다.

CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100),
    email VARCHAR(100) UNIQUE
);

3.1. Sequelize 모델 생성

Sequelize를 통해 위의 users 테이블에 대한 모델을 생성합니다.

4. Express 서버 설정

이제 Express 서버를 설정해 보겠습니다. server.js 파일을 만들어 주십시오.

const express = require('express');
const { Sequelize, DataTypes } = require('sequelize');

// 서버 및 데이터베이스 설정
const app = express();
const sequelize = new Sequelize('example_db', 'username', 'password', {
    host: 'localhost',
    dialect: 'postgres'
});

// 모델 정의
const User = sequelize.define('User', {
    name: {
        type: DataTypes.STRING,
        allowNull: false
    },
    email: {
        type: DataTypes.STRING,
        allowNull: false,
        unique: true
    }
}, {
    tableName: 'users'
});

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

// RESTful API 구현
app.get('/users', async (req, res) => {
    const users = await User.findAll();
    res.json(users);
});

app.post('/users', async (req, res) => {
    const { name, email } = req.body;
    const user = await User.create({ name, email });
    res.status(201).json(user);
});

// 서버 시작
const PORT = process.env.PORT || 3000;
app.listen(PORT, async () => {
    try {
        await sequelize.authenticate();
        console.log('Database connected');
        console.log(`Server is running on http://localhost:${PORT}`);
    } catch (error) {
        console.error('Unable to connect to the database:', error);
    }
});

5. 데이터 CRUD 작업

5.1. Create (생성)

POST /users 엔드포인트를 통해 사용자를 생성할 수 있습니다. 요청 본문에 사용자 이름과 이메일을 포함해야 합니다.

5.2. Read (조회)

GET /users 엔드포인트를 호출하면 데이터베이스에 있는 모든 사용자가 반환됩니다.

5.3. Update (수정)

app.put('/users/:id', async (req, res) => {
    const { id } = req.params;
    const { name, email } = req.body;
    const user = await User.findByPk(id);
    if (user) {
        user.name = name;
        user.email = email;
        await user.save();
        res.json(user);
    } else {
        res.status(404).json({ message: 'User not found' });
    }
});

5.4. Delete (삭제)

app.delete('/users/:id', async (req, res) => {
    const { id } = req.params;
    const user = await User.destroy({ where: { id } });
    if (user) {
        res.status(204).send();
    } else {
        res.status(404).json({ message: 'User not found' });
    }
});

6. Sequelize 응용: 관계 설정

Sequelize는 모델 간의 관계를 설정할 수 있습니다. 예를 들어, 사용자가 여러 게시글을 작성하는 구조로 만들기 위해 Post 모델을 추가해 보겠습니다.

const Post = sequelize.define('Post', {
    title: {
        type: DataTypes.STRING,
        allowNull: false
    },
    content: {
        type: DataTypes.TEXT,
        allowNull: false
    }
}, {
    tableName: 'posts'
});

// 관계 설정
User.hasMany(Post);
Post.belongsTo(User);

이제 사용자는 여러 게시글을 가질 수 있으며, 게시글은 하나의 사용자에게 속합니다.

7. 데이터베이스 마이그레이션

Sequelize CLI를 사용하여 데이터베이스를 마이그레이션할 수 있습니다. 먼저, sequelize-cli 패키지를 설치합니다.

npm install --save-dev sequelize-cli

그리고 다음 명령어로 마이그레이션을 생성합니다.

npx sequelize-cli migration:generate --name create-users

마이그레이션 파일 작성

생성된 파일에 다음 내용을 추가합니다.

module.exports = {
    up: async (queryInterface, Sequelize) => {
        await queryInterface.createTable('users', {
            id: {
                type: Sequelize.INTEGER,
                autoIncrement: true,
                primaryKey: true
            },
            name: {
                type: Sequelize.STRING,
                allowNull: false
            },
            email: {
                type: Sequelize.STRING,
                allowNull: false,
                unique: true
            },
            createdAt: {
                allowNull: false,
                type: Sequelize.DATE
            },
            updatedAt: {
                allowNull: false,
                type: Sequelize.DATE
            }
        });
    },
    down: async (queryInterface, Sequelize) => {
        await queryInterface.dropTable('users');
    }
};

마이그레이션을 실행하여 테이블을 생성합니다.

npx sequelize-cli db:migrate

8. 성능 최적화

데이터베이스와의 연결을 최적화하고, 필요한 경우 인덱스를 추가하여 쿼리 성능을 개선할 수 있습니다. Sequelize는 쿼리 최적화를 위한 다양한 옵션을 제공합니다.

User.findAll({
    where: { email: { [Op.like]: '%@gmail.com%' } },
    order: [['createdAt', 'DESC']],
    limit: 10
});

9. 결론

본 강좌를 통해 Express.js와 PostgreSQL, Sequelize를 이용한 웹 서버의 기본적인 구조와 데이터베이스 연동 방법을 익혔습니다. 이와 같은 구성을 통해 RESTful API를 효율적으로 구축할 수 있으며, 데이터베이스와 상호작용하는 강력한 기능을 활용할 수 있습니다.