node.js(4) - Express.js 시작하기

웹 개발/node.js

node.js(4) - Express.js 시작하기

SolartheNomad 2023. 4. 15. 02:05

🐥 express 시작하기

✍ 명령어 입력하기

$ npm i express
$ npm i -D nodemon

✍ package.json의 scripts 수정하기

  "name": "learn-express",
  "version": "0.0.1",
  "description": "익스프레스를 배우자",
  "main": "app.js",
  "scripts": {
    "start": "nodemon app"
  },
  "author": "ZeroCho",
  "license": "MIT"
}

start 속성 : nodemon app을 하면 app.js를 nodemon으로 실행함

app.js

- 서버가 됨

const express= require('express');

const app = express();
app.set('port', process.env.PORT || 3000);

app.get('/', (req,res) => {
    res.send('Hello, Express');
});

app.listen(app.get('port'), ()=>{
    console.log(app.get('port', '번 포트에서 대기 중'));

});

express 모듈 안에 http 모듈이 내장되어 있으므로 서버의 역할을 해준다.

app.set('port', 포트)

- 서버가 실행될 포트를 설정함

- process.env 객체에 PORT 속성이 있다면 그 값을 사용하고, 없다면 기본값으로 3000번 포트를 이용하게 한다.

app.get('주소', 라우터)

- 주소에 대한 GET 요청이 올 때 어떤 동작을 할지 적는 부분

- req : 요청에 관한 정보가 들어 있는 객체

- res : 응답에 관한 정보가 들어 있는 객체

- 여기서는 GET / 요청 시 응답으로 Hello, Express를 전송

같은 의미로 app.post, app.put, app.patch. app.delete, app.options 메서드가 있음

res.Sendfile(__dirname, '응답으로 클라이언트에게 하고 싶은 html 파일 이름')

- HTML파일로 응답하기 위한 메서드

- 파일의 경로를 path 모듈을 사용하여 지정해야 함

index.html

<html>
<head>
  <meta charset="UTF-8" />
  <title>익스프레스 서버</title>
</head>
<body>
  <h1>익스프레스</h1>
  <p>배워봅시다.</p>
</body>
</html>

app.js

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

const app = express();
app.set('port', process.env.PORT || 3000);
app.get('/', (req, res) => {
  // res.send('Hello, Express');
  res.sendFile(path.join(__dirname, '/index.html'));
});

app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기 중');
});

미들웨어

- 요청과 응답의 중간(middle)에 위치함

- 라우터, 에러 핸들러를 가르킴

- 요청과 응답을 조작해 기능을 추가하기도 하고, 나쁜 요청을 걸러내기도 함

- app.use(미들웨어) 형태로 사용된다.

- 위에서부터 아래로 순서대로 실행되면서 요청과 응답 사이에 특별한 기능을 추가하는 것도 가능함

✍ app.js

- 서버와 미들웨어 연결하기

const express= require('express');

const app = express();
app.set('port', process.env.PORT || 3000);

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

app.get('/', (req, res, next)=>{
    console.log('GET / 요청에서만 실행됩니다.');
    next();
}, (req, res)=>{
    throw new Error('에러는 에러 처리 미들웨어로 갑니다.')
});

app.use((err, req, res, next) => {
    console.error(err);
    res.status(500).send(err.message);

});

app.listen(app.get('port'), ()=>{
    console.log(app.get('port', '번 포트에서 대기 중'));

})

next() 함수

app.use((req, res, next) => {
    //실행 함수
    next();

- 다음 미들웨어로 넘어가는 함수

- next가 실행되지 않으면 다음 미들웨어가 실행되지 않는다.

- app.use, app.get의 파라미터가 될 수 있다.

미들웨어가 실행되는 경우

- app.use나 app.get 같은 라우터에 미들웨어를 여러 개 장착할 수 있게 할 수 있다.

- 주소를 첫 번째 인수로 넣어주지 않는다면 미들 웨어는 모든 요청에서 실행되고, 주소를 넣는 다면 해당한느 요청에서만 실행된다.

💚 에러 처리 미들웨어

app.use((err, req, res, next) => {
    console.error(err);
    res.status(500).send(err.message);

});

- 매개변수가 err, req, res, next로 네 개가 반드시 들어가야 한다.

- err에는 에러에 관한 정보가 담겨 있게 된다.

✍ morgan, cookie-parser, express-session, dotenv 설치하기

npm i morgan cookie-parser express-session dotenv

💚 dotenv

- process.env를 관리하기 위한 패키지

- .env 파일을 만들어주어야 한다.

app.js

//설치한 패키지들인 morgan, cookie-parser, express-session(session) dotenv, express, path 모두 불러옴

const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const session = require('express-session');
const dotenv = require('dotenv');
const path = require('path');
//환경설정 적용 : dotenv.config()
dotenv.config();
//const app = express(서버를 app으로, 서버는 express로 구축함)
const app = express();
//app.set( ) : 포트 연결
//process.env :  보안과 설정의 편의성 ,  .env에 비밀 키를 적어두고 dotenv 패키지로 비밀 키를 로딩해준다.
app.set('port', process.env.PORT || 3000);


//위에서 설치한 패키지들을 app.use 미들웨어로 연결한다.
//morgan 미들웨어 사용하기 
app.use(morgan('dev'));
//static 미들웨어 사용하기 
app.use('/', express.static(path.join(__dirname, 'public')));
//body-parser 미들웨어 사용하기
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
//cookie-parser 미들웨어 사용하기
app.use(cookieParser(process.env.COOKIE_SECRET));
// express-session 미들웨어 사용하기
app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false,
  },
  name: 'session-cookie',
}));

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

위의 app.use가 계속 중복사용하는 것이 별로 이쁘지 않아서, 동시에 여러 미들웨어를 하나로 묶어서 작성해주자

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

💚 morgan 미들웨어

- 인수로 dev 외에 combined, common, short, tiny 등을 넣을 수 있다.

- 개발 환경에서는 dev를, 배포 환경에서는 combined을 사용한다.

app.use(morgan('dev'));

위의 코드를 콘솔 창에 찍어보면,

에서 맨마지막의 GET / 500 7.409 ms - 50 로그는 미들웨어에서 나오는 것이다.

- [HTTP 메서드] [주소] [HTTP 상태 코드] [응답 속도] - [응답 바이트]를 의미함

💚 static 미들웨어

- 정적인 파일들을 제공하는 라우터

- 기본적으로 제공되기에 따로 설치할 필요 없이 express 객체 안에서 꺼내 장착하면 됨

static 미들웨어 형태

app.use('요청 경로', express.static('실제 경로'));

app.use('/', express.static(path.join(__dirname, 'public')));

- public : 실제 서버의 폴더 경로

- 요청주소에는 public이 들어 있지 않기 때무네 서버의 폴더 경로와 요청 경로가 다르므로, 보안적 측명 강화

- 요청 경로에 해당되는 파일이 없으면 내부적으로 next를 호출하고, 만약 파일이 존재한다면 다음 미들웨어는 실행된다.(응답으로 파일을 보내고 next를 호출하지 않기 때문)

body-parser 미들웨어 사용하기

- 요청의 본문에 있는 데이터를 해석해서 req.body 객체로 만들어준다.

- 폼 데이터나 AJAX 요청의 데이터를 처리함

- 멀티파트(이미지, 동영상, 파일) 데이터 처리는 불가능함

- JSON과 URL-encoded 형식의 데이터 외에도 Raw, Text 형식의 데이터 역시 해석하는 것이 가능하다.

✍ 설치 명령어

$ npm i body-parser

- body-parser가 내장되어있을 때는 쓸 필요 없지만 npm에 들어가 있지 않아 따로 설치가 되어 있지 않으면 다음을 app.js에 추가해주어야 사용이 가능하다.

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

💚 body-parser 미들웨어 형태

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

🧃 express.json

- JSON 형식의 데이터 전달 방식

- JSON 형식의 데이터인 { name: 'zerocho', book: 'nodejs' }를 본문으로 보낸다면 req.body에 그대로 들어가게 된다.

🧃 express.urlencoded

- 주소 형식으로 데이터를 보내는 방식

🧃 express.urlencoded({ extended: false })

- false이면 노드의 querystring 모듈을 사용해 쿼리스트링을 해석하고, true이면 qs 모듈을 사용해 쿼리스트링을 해석한다.

- URL-encoded 형식으로 name=zerocho&book=nodejs를 본문으로 보낸다면 req.body에 { name: 'zerocho', book: 'nodejs' }가 들어간다.

📌 qs 모듈

- 내장 모듈이 아니라 npm 패키지임

- querystring을 더 확장한 것

- 설치 방법

npm i install qs

💚 cookie-parser의 미들웨어

- 동봉된 쿠키를 해석해 req.cookies 객체로 바꿈

cookie-parser 미들웨어 형태

app.use(cookieParser(비밀 키));

app.use(cookieParser(process.env.COOKIE_SECRET));

- name=zerocho 쿠키를 보냈다면 req.cookies는 { name: 'zerocho' }임

- 서명이 붙으면, name=zerocho.sign이 되게 되고 req.signedCookies 객체에 들어가게 됨

📌 쿠키의 생성과 삭제

// 쿠키 생성
res.cookie('name', 'solarthenomad', { 
  expires: new Date(Date.now() + 900000),
  httpOnly: true, 
  secure: true,
});
//쿠키 삭제
res.clearCookie('name', 'zerocho', { httpOnly: true, secure: true });

express-session 미들웨어

- express-session은 세션 관리 시 클라이언트에 쿠키를 보낸다.

express-session 미들웨어 형태

app.use(session({
  resave: false, // resave : 요청이 올 때 세션에 수정 사항이 생기지 않더라도 세션을 다시 저장할지 설정하는 것
  saveUninitialized: false, //  saveUninitialized : 세션에 저장할 내역이 없더라도 처음부터 세션을 생성할지 설정하는 것
  secret: process.env.COOKIE_SECRET, //  cookie-parser의 secret과 같게 설정해주기
  cookie: { 
    httpOnly: true,
    secure: false, // secure= false로 해서 https가 아닌 환경에서도 사용할 수 있게 함, 배포시에는 true로 바꿔주기
  },
  name: 'session-cookie', //name 설정을 안해주면 기본 세션 이름은 connect.sid이다.
}));

- store라는 옵션도 있긴한데, 메모리에 세션을 저장하도록 함. 그런데 한 번 서버를 재시작하면 메모리가 초기화되면서 세션이 모두 날아간다. ➡ 이를 방지하기 위해 store에 데이터베이스를 연결해 세션을 유지하는데, redis가 사용됨

세션 생성&제거

req.session.name = 'solarthenomad'; // 세션 등록
req.sessionID; // 세션 아이디 확인
req.session.destroy(); // 세션 모두 제거

next 동작 구조