MERN 스택은 MongoDB, Express.js, React, Node.js의 조합으로 구성된 웹 개발 스택입니다. 이 스택은 자바스크립트를 기반으로 한 전체 스택이기 때문에 자바스크립트 미들웨어를 사용하여 다양한 작업을 수행할 수 있습니다.
Express.js에서의 미들웨어
미들웨어는 Express.js 애플리케이션에서 요청과 응답 사이에서 동작하는 함수입니다. 미들웨어는 Express 앱에서 다양한 작업을 수행하는 데 사용될 수 있습니다. 예를 들면, 라우팅, 에러 처리, 인증, 로깅 등의 작업을 수행할 수 있습니다.
미들웨어는 app.use() 함수를 사용하여 앱에 추가됩니다. 미들웨어 함수는 세 개의 인수를 받습니다: request 객체, response 객체, 그리고 next 함수입니다. next 함수는 다음 미들웨어 함수로 이동하기 위해 호출됩니다.
Express.js에서 미들웨어를 사용하는 간단한 예제는 다음과 같습니다:
const express = require('express');
const app = express();
// 미들웨어 함수
const logger = (req, res, next) => {
console.log('요청 로깅:', req.method, req.url);
next();
}
// 미들웨어 함수를 앱에 추가
app.use(logger);
// 라우트 핸들러
app.get('/', (req, res) => {
res.send('안녕하세요!');
});
// 서버 시작
app.listen(3000, () => {
console.log('서버가 3000 포트에서 실행 중입니다.');
});
Redux에서의 미들웨어
Redux는 React 애플리케이션의 상태를 관리하기 위한 자바스크립트 라이브러리입니다. Redux는 미들웨어를 통해 액션과 리듀서 사이에 작업을 수행할 수 있는 확장성을 제공합니다.
Redux에서 미들웨어를 사용하는 가장 일반적인 방법은 redux-thunk 미들웨어를 사용하는 것입니다. redux-thunk는 비동기 작업을 처리하고 액션의 디스패치를 지연시킴으로써 Redux 스토어 내에서 비동기 동작을 수행할 수 있습니다.
미들웨어를 Redux에 추가하는 예제는 다음과 같습니다:
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(thunkMiddleware)
);
위의 예제에서 redux-thunk 미들웨어를 applyMiddleware 함수에 전달하여 Redux 스토어에 미들웨어를 추가하고 있습니다.
요약
MERN 스택에서는 Express.js와 Redux를 사용하여 자바스크립트 미들웨어를 활용할 수 있습니다. Express.js에서는 app.use() 함수를 통해 미들웨어를 추가하고, Redux에서는 redux-thunk 미들웨어를 사용하여 비동기 작업을 처리할 수 있습니다.
미들웨어는 강력한 기능을 제공하여 앱의 기능을 확장하고, 코드를 깔끔하게 유지하는 데 도움이 됩니다.