Express_Server2

1. Router

1-1. express.Router

Express의 express.Router 기능을 사용하면 여러 라우트를 하나의 모듈로 그룹화할 수 있어, 애플리케이션의 구조를 더욱 모듈화하고 관리하기 쉽게 만들 수 있다. 이를 통해 app.js 파일의 길이를 줄이고, 관련된 라우트들을 하나의 파일로 관리할 수 있다.

1) 기본 사용법

 - express.Router()를 호출하여 새로운 라우터 인스턴스를 생성한다.

 - 해당 라우터 인스턴스에 라우트를 추가한다.

 - 모듈로 내보내어 app.js에서 사용한다.

const express = require('express');

const router = express.Router();

// GET / 라우터
router.get('/', (req, res) => {
  res.send('Hello, Express');
});

module.exports = router;

index.js

const express = require('express');

const router = express.Router();

// GET /user 라우터
router.get('/', (req, res) => {
  res.send('Hello, User');
});

module.exports = router;

user.js

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();
const indexRouter = require('./routes');
const userRouter = require('./routes/user');

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

app.use(morgan('dev'));
app.use('/', express.static(path.join(__dirname, 'public')));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false,
  },
  name: 'session-cookie',
}));

app.use('/', indexRouter);
app.use('/user', userRouter);

app.use((req, res, next) => {
  res.status(404).send('Not Found');
});

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'), '번 포트에서 대기 중');
});

app.js

① 라우터 모듈 생성: 각 라우터 파일에서 express.Router()를 사용하여 라우터 인스턴스를 생성하고, 라우트를 정의한 후, 이를 모듈로 내보낸다.

② 라우터 모듈 사용: app.js에서 이러한 라우터 모듈을 가져와(require) 사용한다. app.use('/경로', 라우터) 형식으로 라우터를 적용한다.

 - indexRouter는 / 경로에, userRouter는 /user 경로에 적용된다.

2) 라우트 매개변수

 - 동적 라우팅: :id와 같이 콜론(:)으로 시작하는 부분은 라우트 매개변수로, 동적으로 변하는 값을 처리할 때 사용된다.

 - 접근 방법: req.params.id를 통해 해당 값에 접근할 수 있다.

 - 순서 중요성: 일반 라우터보다 뒤에 위치해야 한다. 그렇지 않으면 동적 라우트가 일반 라우트를 오버라이드할 수 있다.

const express = require('express');

const router = express.Router();

// GET /user 라우터
router.get('/', (req, res) => {
  res.send('Hello, User');
});

router.get('/:id', function(req, res) { 
	console.log(req.params, req.query);
});


module.exports = router;

3) 404 미들웨어

 - 목적: 요청과 일치하는 라우터가 없는 경우, 즉 404 상황을 처리한다.

 - 구현: app.use((req, res, next) => { res.status(404).send('Not Found'); });

app.use((req, res, next) => {
  res.status(404).send('Not Found');
});

4) 라우터 그룹화

 - 목적: 동일한 경로에 대해 다른 HTTP 메서드를 사용하는 라우트를 그룹화한다.

 - 방법: router.route('/경로')를 사용하여 같은 경로에 대한 GET, POST 등의 요청을 하나의 블록에 넣을 수 있다.

const express = require('express');

const router = express.Router();

// GET / 라우터
router.get('/', (req, res) => {
  res.send('Hello, Express');
});

router.get('/abc', (req, res) => {
	res.send('GET/abc');
});
router.post('/abc', (req, res) => {
	res.send('POST/abc');
});

module.exports = router;

2. Req & Res 객체

Express의 req (요청)과 res (응답) 객체는 HTTP 요청과 응답을 다루는 데 있어 핵심적인 역할을 한다. 각 객체에는 다양한 속성과 메서드가 있어, 요청 정보를 읽고 적절한 응답을 생성하는 데 사용된다.

2-1. req (Request) 객체

1) req.app: 이 속성을 통해 Express 애플리케이션 인스턴스에 접근할 수 있다. 이를 통해 애플리케이션의 설정값을 가져오거나, 다른 미들웨어/라우트와 공유하는 데이터에 접근할 수 있다.

2) req.body: body-parser 미들웨어가 파싱한 요청의 본문입니다. 클라이언트가 서버로 보낸 데이터를 담고 있으며, 주로 POST나 PUT 요청에서 사용된다.

3) req.cookies: cookie-parser 미들웨어를 사용할 때, 클라이언트로부터 전송된 쿠키를 파싱하여 객체 형태로 제공한다. 예를 들어, req.cookies.username은 사용자 이름을 담은 쿠키 값을 반환할 수 있다.

4) req.ip: 요청을 보낸 클라이언트의 IP 주소를 문자열 형태로 반환한다. 이는 클라이언트의 위치나 요청 출처 추적에 사용될 수 있다.

5) req.params: 라우트 매개변수를 포함하는 객체이다. 예를 들어, 라우트가 /users/:userId 형태인 경우, req.params.userId는 해당 사용자의 ID를 반환한다.

6) req.query: URL의 쿼리 스트링 파라미터를 객체 형태로 반환한다. 예를 들어, /search?q=express의 경우 req.query.q는 'express'를 반환한다.

7) req.signedCookies: 서명된 쿠키들은 여기에 저장된다. 이는 cookie-parser 미들웨어가 제공하는 기능으로, 쿠키의 진위를 검증하는 데 사용된다.

8) req.get(헤더 이름): 특정 HTTP 요청 헤더의 값을 반환하는 메서드이다. 예를 들어, req.get('Content-Type')은 요청의 Content-Type 헤더 값을 반환한다.

2-2. res (Response) 객체

1) res.app: req.app과 유사하게, 응답 객체를 통해서도 Express 애플리케이션 인스턴스에 접근할 수 있다.

2) res.cookie(키, 값, 옵션): 클라이언트에 쿠키를 설정하는 메서드다. 옵션을 통해 만료 시간, 경로, 도메인, 보안 등의 쿠키 속성을 설정할 수 있다.

3) res.clearCookie(키, 옵션): 클라이언트의 특정 쿠키를 제거한다. 옵션을 사용하여 경로나 도메인 등을 지정할 수 있다.

4) res.end(): 데이터 없이 응답을 종료합니다. 주로 데이터 전송이 필요 없는 경우에 사용된다.

5) res.json(JSON): JSON 형식의 응답을 보낸다. 이 메서드는 자동으로 Content-Type을 application/json으로 설정한다.

6) res.redirect(주소): HTTP 리다이렉션을 수행한다. 클라이언트를 지정된 주소로 보내며, 주로 로그인 후 페이지 이동 등에 사용된다.

7) res.render(뷰, 데이터): 서버측 템플릿 엔진을 사용하여 HTML 뷰를 렌더링하고 클라이언트에게 보낸다.

3. 템플릿 엔진

3-1. 템플릿 엔진

템플릿 엔진은 HTML 파일을 동적으로 생성하는 데 사용되는 도구이다. 이는 서버에서 데이터를 HTML 형식으로 쉽게 렌더링하고 클라이언트에 전송하는 데 도움이 된다. 기본적으로 HTML은 정적이므로, 데이터의 변화나 조건에 따른 동적인 콘텐츠 표현에 제한적이다. 템플릿 엔진을 사용하면 반복문, 조건문, 변수 등의 프로그래밍 요소를 HTML에 삽입하여 동적인 페이지를 만들 수 있다. 

1) 주요 기능

 - 변수 사용: 서버에서 데이터를 템플릿 변수로 전달하고, HTML에서 이를 동적으로 표시한다.

 - 조건문과 반복문: 데이터의 조건에 따라 다른 HTML을 표시하거나, 데이터 배열을 순회하면서 HTML 요소를 반복적으로 생성한다.

 - 템플릿 상속과 포함: 기본 레이아웃을 정의하고, 다른 템플릿에서 이를 상속받아 사용하거나, 다른 템플릿을 포함시킬 수 있다.

3-2. pug

Pug는 Express와 함께 자주 사용되는 템플릿 엔진 중 하나다. Ruby와 유사한 문법을 사용하여, HTML보다 훨씬 간결한 코드로 템플릿을 작성할 수 있다.

1) Pug의 특징

 - 간결한 문법: 괄호, 닫는 태그 등을 생략할 수 있어 HTML보다 코드 양이 줄어든다.

 - 템플릿 기능: 변수, 반복문, 조건문, 템플릿 상속 등 다양한 템플릿 기능을 지원한다.

 - 익스프레스와의 연동: Express 애플리케이션에서 app.set을 사용하여 Pug를 템플릿 엔진으로 쉽게 설정할 수 있다.

2) Express에서 Pug 설정

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

// Pug 설정
app.set('view engine', 'pug');
app.set('views', './views'); // 'views' 폴더를 템플릿 파일의 위치로 지정

app.get('/', (req, res) => {
    res.render('index', { title: 'Hey', message: 'Hello there!' });
});

app.listen(3000);

app.set('view engine', 'pug')는 Express에게 Pug를 사용할 템플릿 엔진으로 설정하라고 지시한다. res.render('index', { title: 'Hey', message: 'Hello there!' })는 index.pug 템플릿 파일을 렌더링하면서, title과 message라는 데이터를 템플릿에 전달한다. 

3) Pug에서의 데이터 사용

 - 변수 렌더링: res.render 메소드를 사용할 때, 두 번째 인수로 전달된 객체 내의 데이터를 Pug 템플릿에서 변수로 사용할 수 있다.

 - res.locals: 이 객체에 데이터를 저장하면 다른 미들웨어와 공유할 수 있으며, Pug 템플릿에서도 접근 가능하다.

 - 문법: = 또는 #{}를 사용하여 템플릿에서 변수를 렌더링한다. = 다음에는 JavaScript 표현식을 사용할 수 있다.

4) Pug 내의 프로그래밍

 - 변수 선언: Pug 템플릿 내에서 - 사용하여 JavaScript 변수를 선언하고 사용할 수 있다.

 - 반복문: for in 또는 each in 구문을 사용하여 반복문을 처리할 수 있다.

 - 조건문: if, else if, else 구문을 사용하여 조건부 렌더링을 할 수 있다. case when 구문도 사용 가능하다.

5) Pug의 고급 기능

 - Include: 다른 Pug 파일을 포함시킬 수 있다. 이를 통해 헤더, 푸터, 내비게이션과 같은 공통 부분을 별도로 관리하고 재사용할 수 있다.

 - Extends와 Block: Pug에서 레이아웃을 정의할 수 있다. 공통 레이아웃을 별도로 관리하고, block을 사용하여 레이아웃의 특정 부분을 재정의할 수 있다. 이는 코드의 중복을 줄이고 유지보수를 용이하게 한다.