Node.js 기초반 2주차

안준·2021년 9월 5일
1

1주차에 Express 설치하고 서버를 만드는 것 까지 배웠고, 2주차에 Express의 Routing, Middleware과 템플릿 엔진까지 배웠다.
간단하게 복습을 하고 넘어가도록 하겠다.

Node.js 기초반 2주차

1. 오늘 배울 것

  • Express의 라우팅에 대해 배운다. 이를 이용해 각각의 url에 따라 다른 결과물을 보여줄 수 있다.
  • Express의 미들웨어에 대해 배운다. 이전에 배운 웹 프레임워크의 특징, 반복해서 자주 해야하는 동작들을 아주 간단하게 처리할 수 있다.
  • EJS를 사용해서 View를 생성한다.

2. Express - Routing

  • express에서 router는 어떤 특징을 가지고 경로를 구분할까?
```jsx
app.get('/', (req, res) => {
  res.send('Hello World!')
})
  • 위는 path가 '/'일 때, (그냥 도메인 주소만 입력하고 뒤에 아무것도 안 붙었을 때) "Hello World!"를 응답한다는 이야기이다.
  • 위와 같이 다른 경로일때는 다른 내용을 보여줄 수 있다.
app.get('/hi', (req, res) => {
  res.send('Hi. This is express router')
})

3. Express - Router 객체 사용하기

  • 활용해야 하는 페이지 url이 많이 늘어날 경우 index.js 파일에 app.~~가 계속 추가되게 되는데, 이 경우 관리가 어려워져서 Express는 이를 방지하기 위해 Router 객체를 제공해서 비슷한 Route끼리 묶어서 파일로 분리시킬 수 있게 해 준다.
  • 상품 페이지를 위해 goods.js를 따로 만들고 메인 index.js 파일 코드는 다음과 같이 수정해 준다.
app.get('/goods/list', (req, res) => {
  res.send('상품 목록 페이지')
})

app.get('/goods/detail', (req, res) => {
  res.send('상품 상세 페이지')
})

app.get('/user/login', (req, res) => {
  res.send('로그인 페이지')
})

app.get('/user/register', (req, res) => {
  res.send('회원가입 페이지')
})

4. Express - Middleware

  • 우리가 매 route를 생성할 때마다 공통된 처리를 하고 싶은 경우, 예를 들어 요청이 들어올 때마다 이 요청이 어떤 유저의 요청인지 인증검사를 해야 할 수 있다. 그런 경우에 코드를 작성하게 되면 route를 하나 만들 때마다 매번 유저 인증을 확인하는 코드를 넣어야 한다. 이런 반복되는 작업들, 혹은 우리가 정의한 route에 오기 전에 중간에서 미리 처리해야 할 것들을 정의해둔 것을 미들웨어 라고 한다. (route마다 반복되는 것들은 한 번만 앞에서 정의해 놓기..)
const express = require('express');
const app = express();

app.use((req, res, next) => {
  console.log(req);
  next();
});

app.get('/', (req, res, next) => {
  res.send('Welcome Home');
});

app.listen(3000);
  • 위 예시코드를 보면, 중간에 app.use라고 하는 것이 미들웨어로 쓰겠다고 하는 부분이다. 저 코드를 사용하면 어떤 요청이 들어오든 req를 로그로 찍고 나서 실제 route로 전달되게 된다.
  • 데이터 가공 용도의 미들웨어도 있다 : express.json(), express.urlencoded() ; 우리가 웹서버에 요청할 때 단순히 url 외에 추가적인 정보를 전달할 수 있다. POST 메서드의 body정보인데, 이 데이터를 바로 사용하기 쉽게 가공해주는 미들웨어가 express.json()이다.
  • Express 애플리케이션의 정적 자산을 제공하는 역할을 하는 static이다. 이를 이용하면 express에서 정적 파일을 제공할 수 있다.
app.use(express.static('public'));

5. Express - 템플릿 엔진

  • 템플릿 엔진은 사용하면 일관된 양식의 HTML 파일에다가 그때그때 원하는 데이터를 동적으로 삽입해서 우리가 원하는 형태의 홈페이지를 구성할 수 있게 됩니다.
  • 템플릿 엔진의 장점
    ① 많은 코드를 줄일 수 있다.
    → 대부분의 Template Engine은 기존의 HTML에 비해서 간단한 문법을 사용한다.
    ② 재사용성이 높다.
    → 웹페이지 혹은 웹앱을 만들 때 똑같은 디자인의 페이지에 보이는 데이터만 바뀌는 경우가 굉장히 많다.
    ③ 유지보수에 용이하다.
    → 하나의 Template을 만들어 여러 페이지를 렌더링하는 작업에는 또 다른 이점이 있다.

여기까지 해서 express에서 사용가능한 템플릿 중 EJS를 설치하고, ejs 파일을 생성해 주었다.

profile
개발자 궁금해서 왔습니다.

0개의 댓글