[NodeJs] Express init

Darcy Daeseok YU ·2023년 1월 13일
0

Npm Dependencies

  • npm i
  • express
  • express - session
  • morgan
  • cookie - parser
  • dotenv
  • body-parser : 필요한 경우
  • npm i express express-session morgan cookie-parser dotenv

Express

// 미들웨어 설정 app.use(미들웨어);
// case1-1 app.use((req, res, next) => {}); next를 가짐
// case1-2 app.use(url, (req, res, next) => {})
// case2 app.get(url , 미들웨어 , 핸들러)
// case2 app.post(url, (req, res, next) => {} // 특정 url
// case2 app.get(url , (req, res, next) => {} , (req, res) => {})

const express = require("express");

const app = express();

//case1 
// likewise 전처리 핸들러
app.use((req, res, next) => {
 console.log(`[ app.js ]:: 모든 요청에 다 실행되는 미들웨어 입니다.: `);
 next(); // 넥스트를 실행안하면 다음 단계로 안넘어감.
});

// case2 : URL , Middleware, Handler
app.get(
 "/",
 (req, res, next) => {
   console.log(`[ app.js ]:: get("/")의 미들웨어 실행됨: `);
   next();
 },
 (req, res) => {
   console.log(
     `[ app.js ]:: Handler 실행됨 : `,
     `${path.join(__dirname, "./index.html")}`
   );

   // throw new Error("에러는 에러 처리 미들웨어로 갑니다.");
   res.sendFile(path.join(__dirname, "./index.html"));
 }
);

// 에러 처리 미들웨어는 최하단에
app.use((err, req, res, next) => {
 console.log(`[ app.js ]:: Error 처리 미들웨어 실행됨: `, `${err.message}`);
 res.status(500).send(err.message);
});

app.listen(PORT, (req, res) => {
 console.log(PORT, "번 포트에서 대기 중");
});

Express settings : app.set & Static 미들웨어

static 미들웨어는 정적인 파일들을 제공하는 라우터 역할


// Map 형태로 set & get
app.set("port", process.env.PORT || 3000);
const PORT = app.get("port");

// static 미들웨어
// app.use('요청 경로', express.static('실제 경로'));
// 함수의 인수로 정적 파일들이 담겨 있는 폴더를 지정
// public/stylesheets/style.css는 http://localhost:3000/stylesheets/style.css로 접근할 수 있음
// public 폴더를 만들고 css나 js, 이미지 파일들을 public 폴더에 넣으면 브라우저에서 접근할 수 있게 됨
app.use("/", express.static(path.join(__dirname, "public")));

Body-parser

// body-parser 미들웨어의 일부 기능이 익스프레스에 내장됨 over express 4.16.0
// body-parser : 요청의 본문에 있는 데이터를 해석해서 req.body 객체로 만들어주는 미들웨어
// 단, 멀티파트(이미지, 동영상, 파일) 데이터는 처리하지 못함. 그 경우에는 multer 모듈을 사용
// body-parser를 직접 설치해야 하는 경우도 있습니다. body-parser는 JSON과 URL-encoded 형식의 데이터 외에도 Raw, Text 형식의 데이터를 추가로 해석할 수 있음
// Raw는 요청의 본문이 버퍼 데이터일 때, Text는 텍스트 데이터일 때 해석하는 미들웨어

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// body-parser
const bodyParser = require("body-parser");
app.use(bodyParser.raw());
app.use(bodyParser.text());

Cookie-parser

// 쿠키 파서 설정 ( COOKIE_SECRET 키 적용 ) 
app.use(cookieParser(process.env.COOKIE_SECRET));


//쿠키 추가
res.cookie('name', 'yuds', {
	expires: new Date(Date.now() + 900000),
    httpOnly:true,
    secure: true,
}

// 쿠키 삭제 
res.clearCookie('name', 'zerocho', { httpOnly: true, secure: true });

Express-Session


app.use(
  session({
    resave: false,
    saveUninitialized: false,
    secret: process.env.COOKIE_SECRET,
    cookie: {
      httpOnly: true,
      secure: false,
    },

    name: "session-cookie",
  })
);

Req/Res 로그

// [HTTP 메서드] [주소] [HTTP 상태 코드] [응답 속도] - [응답 바이트]
// GET / 500 12.107 ms - 50 요청 정보를 로그로 찍어줌
app.use(morgan("dev")); // dev
app.use(morgan("combined")); // production

정리

미들웨어는 req, res, next를 매개변수로 갖는 함수(에러 처리 미들웨어만 예외적으로 err, req, res, next를 가집니다)로서 app.use나 app.get, app.post 등으로 장착함
주소의 요청에만 미들웨어가 실행되게 하려면 첫 번째 인수로 주소를 넣으면 됨

일반적인 미들웨어 형태

app.use((req, res, next) => {
  console.log('모든 요청에 다 실행됩니다.');
  next();
});

에러처리 미들웨어

app.use((err, req, res, next) => {
  console.log('에러를 처리합니다.');
  next();
});

예제
next() 실행해줘야함.
라이브러리는 자체적으로 모듈안에 next() 가지고 있음

app.use(
  morgan('dev'),
  express.static('/', path.join(__dirname, 'public')),
  express.json(),
  express.urlencoded({ extended: false }),
  cookieParser(process.env.COOKIE_SECRET),
);

미들웨어 간에 데이터 전달

res.locals.data = {test: '테스트'} 저장 / 호출

미들웨어 확장

app.use(morgan('dev') 
// 같음 
app.use((req,res,next)=>{
	morgan('dev')(req,res,next);
});

조건문에 따른 미들웨어 적용 코드

app.use((req, res, next) => {
  if (process.env.NODE_ENV === 'production') {
    morgan('combined')(req, res, next);
  } else {
    morgan('dev')(req, res, next);
  }
});
profile
React, React-Native https://darcyu83.netlify.app/

0개의 댓글