<세팅목록>
1. 디렉토리/파일목록 세팅
2. Git 세팅
3. 라이브러리 세팅
4. node서버와 react 연결, 프록시 개발환경 설정
5. 디렉토리에 따른 코드스플리팅과 라우터설계
6. DB세팅
7. 로그세팅
8. 에러핸들러 미들웨어 세팅 // 여기부터
9. 쿠키파서/서드파티 미들웨어 세팅 // 이거는 나중에 쓸 거 있을 때 해야겠다
...
1. 에러핸들러 미들웨어
/middleware/errorHandler.js 생성
const { logEvents } = require('./logger');
const errorHandler = (err, req, res, next)=>{
logEvents(`${err.name}: ${err.message}\t${req.method}\t${req.url}\t${req.headers.origin}`, 'errLog.log');
// console.log(err.stack+'error stack');
const status = res.statusCode ? res.statusCode : 500 //server error
res.status(status);
res.json({ message : err.message })
}
module.exports = errorHandler;
- 이전시간에 사용했던 logEvent 함수를 가져와서 미들웨어를 만들어준다.
- res.statusCode가 있으면 쓰고 없으면 500 서버에러를 뿜는다.
- res.json으로 에러메시지를 보낸다.
app.js
const express = require('express');
const app = express();
const router = require('./routes');
const path = require('path');
const { logger } = require('./middleware/logger');
const errorHandler = require('./middleware/errorHandler');
const cookieParser = require('cookie-parser');
//environment variables setting
require('dotenv').config();
const ENV = process.env;
app.use(logger); //로거는 여기
// cors setting
const cors = require('cors'); //cors옵션 변경
let corsOption = {
origin: (origin, callback) =>{
if(`http://localhost:3500`.indexOf(origin) !== -1 || !origin){ //허용 주소
callback(null, true) //콜백으로 그냥 넘어감
}
else{
callback(new Error('Not allowed by CORS')) //Error를 뿜어서 에러핸들링 미들웨어로 던져준다.
}
},
credentials: true, // true시 설정 내용을 응답헤더에 추가해 줌
optionSuccessStatus : 200
}
app.use(cors(corsOption)); // CORS 미들웨어 추가
// body-parser setting (4.16버전 이상 express에 내장되었다.)
app.use(express.json());
app.use(express.urlencoded({extended: false}));
//cookie-parser
app.use(cookieParser());
// static path
app.use(express.static(path.join(__dirname, 'public')))
app.use(errorHandler) //마지막에 추가해준다.
router(app);
module.exports = app;
- cors 미들웨어를 좀 수정했다.
- 프론트엔드의 .env파일에서 PORT를 3000으로 수정했다. 3000에서 service-worker 관련 충돌이 나는 바람에 3500으로 이사갔다..
- localhost 3500을 허용해주었다.
- 테스트를 위해 프론트엔드를 3600으로 옮겨서 켜보고 테스트한다.
- 3600에서 버튼을 누르면
- 다시 백엔드에서 확인해보면
- 에러 로그가 정상적으로 잘 찍혔다
- 그렇다면 3500에서는 ?
- 정상적으로 작동한다.
- 백엔드에서 확인해보자
- 정상적으로 로그가 찍혔다.
- 당연히 db에서도 잘 작동한다.
'더이상 하지 않는 망한 프로젝트 > 프로젝트 개발 과정' 카테고리의 다른 글
[앱삼] 4. (frontend) Redux-toolkit 구조 세팅 (0) | 2023.03.02 |
---|---|
[앱삼] 3. DB연결 구조 개선하기 (0) | 2023.02.27 |
[앱삼] 2. MERN 풀스택 환경 기본세팅 - 3 (0) | 2023.02.26 |
[앱삼] 2. MERN 풀스택 환경 기본세팅 - 2 (1) | 2023.02.26 |
[앱삼] 2. MERN 풀스택 환경 기본 세팅 - 1 (0) | 2023.02.26 |
댓글