Node에서 express 서버 미들웨어 적용하기 그리고 middleware를 쓰는 이유가 뭘까??
이전 포스팅 express 패키지 활용하여 서버 구축 및 html 서빙에 대해서
express에서 html 서빙 방법은 정말 간단합니다
express 내에서 html관련 패키지를 사용하고 있어
개발자들은 단지 메서드를 호출하는 것만으로 html 서빙을 할 수 있습니다
조금 더 자세한 내용을 알고 싶으시다면 아래의 링크를 클릭하시길 바랍니다
2022.09.14 - [IT_Web/Nodejs] - Node활용해서 express 서버로 HTML 노출 및 서빙하기
Node활용해서 express 서버로 HTML 노출 및 서빙하기
이전 글 Npm이 무엇이며 활용법에 대해서 node에서 npm을 빼고는 말을 할 수 없을 정도로 중요한 부분을 차지합니다 그 이유는 많은 사람들이 개발한 오픈 소스를 관리해 주기 때문이지요 npm을 잘
tantangerine.tistory.com
지금 글은 이전 포스팅과 이어지는 부분이 있으니
이전 포스팅이 궁금하시거나 필요한 부분이 있으면 위의 링크를 클릭하시길 바랍니다
express 서버 미들웨어 적용하기
일단 미들웨어란 무엇일까요??
사전적 의미로는 양 쪽을 연결하여 데이터를 주고받을 수 있도록
중간 매개 역할을 하는 소프트웨어라고 할 수 있습니다
express 서버의 미들웨어는 중간 매개 역할이 핵심이라고 할 수 있습니다
아래의 app.get() 메서드를 라우팅이라고 합니다
라우팅을 할 경우 에러가 발생할 경우
특정 api url이 호출될 경우
존재하지 않은 api url 호출될 경우
특정 함수를 실행,
에러 페이지를 노출,
특정 페이지를 노출 등
여러 가지의 공통 작업을 할 수 있습니다
express 서버 미들웨어 적용하기
아래의 코드를 보시면 app.use()가 정의되어있습니다
이 함수는 라우팅을 호출할 경우 app.use()가 실행합니다
즉, 라우팅 get()은 함수의 인자 값이
클라이언트에서 보낸 api 호출 url이 동일한 라우팅이 실행됩니다
이때 라우팅이 호출되면 라우팅 get()보다
우선 use()인 미들웨어가 호출을 감지하여 우선 실행합니다
그리고 next()를 실행하게 되면서 다음 미들웨어나 라우팅이 실행됩니다
이때 미들웨어의 위치도 중요합니다
기본적으로 실행 순서는 위에서부터 아래까지 실행합니다
그래서 라우팅이 호출될 때마다 미들웨어인 use()가 최상단부터 하단까지 실행된다고 생각하시면 됩니다
하지만 라우팅보다 미들웨어가 아래에 있다면 라우팅이 실행이 끝나는 순간
더 이상 실행하지 않고 종료가 됩니다
아래의 코드를 보면서 더 설명을 이어가겠습니다
const express = require('express');
const path = require('path');
const app = express();
app.set('port', process.env.PORT || 3000);
app.use((req, res, next) => {
console.log('Hello, Express ::: 1');
next()
},(req, res, next) => {
console.log('Hello, Express ::: 2');
next()
},(req, res, next) => {
console.log('Hello, Express ::: 3');
next()
})
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '/index.html'));
});
app.use((req, res) => {
res.send('페이지 호출 오류')
});
app.listen(app.get('port'), () => {
console.log(app.get('port'), '번 포트에서 대기 중');
});
위의 코드를 작성하고 npm start를 입력하고
인터넷 브라우저 주소창에 "http://localhost:3000/"를 입력하게 되면
아래와 같이 커맨드 창이 노출됩니다
오른쪽에 보시면 최상단에 위치한 미들웨어부터 실행되며
그다음 라우팅이 호출되어
주소창에 http://localhost:3000/에 "/"이 부분이 라우팅에 감지되어 위와 같은 결과가 노출됩니다
하지만 여기서 "/top"를 입력하면 아래와 같이 노출됩니다
top라는 라우팅 호출 주소가 동일하지 않아
최하단에 위치한 미들웨어가 실행되어 페이지 호출 오류 문구가 노출됩니다
이 결과 라우팅이 실행되지 않으면 미들웨어가 반응한다는 것을 알 수 있습니다
그리고 미들웨어 또한 호출 url주소를 감지할 수 있습니다
아래와 같이 코드를 변경해보도록 하겠습니다
위와 같이 코드를 변경하고 실행한 다음
브라우저 주소창에 "http://localhost:3000/"를 입력합니다
위의 결과와는 다르게 커맨드 창에 최상단 미들웨어가 실행되지 않은 현상을 확인할 수 있습니다
브라우저 주소창에 "http://localhost:3000/top"를 입력하면
아래와 같이 커맨드 창이 노출되는 것을 확인할 수 있습니다
미들웨어 에러 미들웨어 적용하기
이번에는 라우팅 내에서 Error가 발생할 경우
제어하는 에러 미들웨어를 만들어 보겠습니다
const express = require('express');
const path = require('path');
const app = express();
app.set('port', process.env.PORT || 3000);
app.get('/', (req, res) => {
try {
csole.log('Hello, Express ::: 1');
res.sendFile(path.join(__dirname, '/index.html'));
} catch (e) {
console.log('Error, Express ::: 00', e)
throw new Error(e)
}
});
app.listen(app.get('port'), () => {
console.log(app.get('port'), '번 포트에서 대기 중');
});
위의 코드를 실행하고 브라우저도 이전과 같은 주소를 입력합니다
그럼 아래와 같은 화면을 노출합니다
console.log()를 철자가 틀리게 일부러 코드 작성하였습니다
그래서 에러가 발생하였습니다
express에서는 기본적으로 에러가 발생하면 아래와 같이 화면을 처리합니다
하지만 아래와 같은 에러 페이지는 서버의 디렉터리 구조가 상세히 명세되어있습니다
그렇기 때문에 보안상 취약할 수밖에 없기 때문에 직접 처리해야 합니다
에러 미들웨어는 아래와 같이 코드를 최하단에 추가합니다
*app.listen() 위에 추가하셔야 합니다
코드 추가할 경우 error와 next매개변수의 위치를 꼭 지켜주셔야
에러 미들웨어를 구현할 수 있습니다
아래와 같이 에러 페이지를 노출됩니다
미들웨어 http 상태 코드 제어하기
아래와 같이 코드를 추가합니다
미들웨어는 next를 추가하는 것을 꼭 확인하세요
위와 같이 status(404)라고 호출한다면
아래와 같이 404로 http 상태 코드가 변한 것을 확인할 수 있습니다
미들웨어를 실행하면 에러가 아니기 때문에
위의 코드를 적용하지 않는다면 200번 코드가 표시됩니다
이것을 활용한다면 클라이언트에 모든 http 상태 코드를 일괄적으로 설정해서 보낼 수 있습니다
그렇게 일괄적으로 보내게 되면 개발하는데 어려움이 있을 수 있습니다
다만, 운영 단계의 서비스 경우에는
모든 에러가 404로 보내게 되면
해커들에게는 지금 어떤 에러가 발생하는지 알 수 없기 때문입니다
보안으로는 좋은 면이 있습니다
node에서 express는 아주 많이 사용되고 있으며,
서브 웹 서버로도 많이 사용하고 있습니다
SI 개발자라면 node보다는 자바를 많이 사용하며,
최근 react로 개발하는 프로젝트가 많아지면서
node의 중요성도 조금씩 높아지고
자연스레 express의 서브 웹 서버로써 활용도가
조금씩 높아지고 있습니다
SI 개발자라면 어떤 언어라도 공부를 해야겠지요
그러니 흥미가 가는 언어는 아무거나 공부를 하셔도 됩니다!
도움 안 되는 공부는 없으니까요
그렇게 공부하다 보면 코드를 간결하게 되며 함수적 프로그래밍도
자연스레 몸으로 습득할 수 있을 것입니다
그럼 우리의 IT 대모험을 위해서
파이팅 하시길 바랍니다
그럼 다음 포스팅에서 뵙겠습니다