9/5 TIL : express로 API 만들기, view engine(EJS), express 폴더 구조

KDT/TIL

9/5 TIL : express로 API 만들기, view engine(EJS), express 폴더 구조

ebulsok 2022. 9. 18. 20:11

🔎 Express를 이용해서 간단한 api 만들기(DB 사용하지 않음)

// @ts-check
const express = require('express');

const app = express();
const PORT = 4000;
const userRouter = express.Router();
const postsRouter = express.Router();
const USER = [
  {
    id: 'bulsok',
    name: 'ebulsok',
  },
  {
    id: 'test',
    name: '테스트',
  },
];

app.use('/users', userRouter);
app.use('/posts', postsRouter);

🚩 회원 목록 보여주기 api

GET localhost:4000/users

userRouter.get('/', (req, res) => {
  res.send(USER);
});

🚩 특정 회원 정보 보여주기 api

GET localhost:4000/users/:id

userRouter.get('/:userID', (req, res) => {
  const userData = USER.find((user) => user.id === req.params.id);
  if (userData) res.send(userData);
  else res.end('ID not found');
});

🚩 회원 추가하기 api

POST localhost:4000/users?id=test&name=test

userRouter.post('/', (req, res) => {
  if (req.query.id && req.query.name) {
    const newUser = {
      id: req.query.id,
      name: req.query.name,
    };
    USER.push(newUser);
    res.send('회원 등록 완료');
  } else res.end('Unexpected query');
});

🚩 회원 수정하기 api

PUT localhost:4000/users/:id?id=test&name=test

userRouter.put('/:userID', (req, res) => {
  if (req.query.id && req.query.name) {
    const arrIndex = USER.findIndex((user) => user.id === req.params.userID);
    if (arrIndex !== -1) {
      USER[arrIndex].id = req.query.id;
      USER[arrIndex].name = req.query.name;
      res.send('회원정보 수정 완료');
    } else res.end('회원정보가 없습니다.');
  } else res.end('Unexpected query');
});

🚩 회원 삭제하기 api

DELETE localhost:4000/users/:id

userRouter.delete('/:userID', (req, res) => {
  const arrIndex = USER.findIndex((user) => user.id === req.params.userID);
  if (arrIndex !== -1) {
    USER.splice(arrIndex, 1);
    res.send('회원 삭제 완료');
  } else res.end('회원정보가 없습니다.');
});

🔎 View Engine

🚩 EJS

가장 기본이 되는 view engine
HTML 문법을 사용
단, 레이아웃 기능 X

🚩 pug

HTML 문법을 단순화하여 사용
레이아웃 기능 O

🚩 NUNJUCKS

HTML 문법을 그대로 사용
레이아웃 기능 O

[터미널] npm i -D ejs
express에게 어떤 view engine으로 웹페이지를 그릴 것인지 알려주기

app.set('view engine', 'ejs');
app.set('views', 'views');

폴더 가장 외부에 views 폴더 만들기
views 폴더 내부에 index.ejs 파일 만들고 코드 입력하기
localhost:4000/users 기본 요청이 들어오면 index.ejs 파일 띄우기

userRouter.get('/', (req, res) => {
  // res.send(USER);
  res.render('index');
});

res.render('ejs 파일명', { 전달하고 싶은 데이터 });

오브젝트로 전달된 데이터는 ejs 파일 내부에서 <%= %>를 사용하여 오브젝트의 필드명으로 호출

<body>
    <h1>회원 목록</h1>
    <h2>총 회원 수: <%= userCounts %></h2>
    <ul>
        <li>
            <p>ID: <%= USER[0].id %></p>
            <p>NAME: <%= USER[0].name %></p>
        </li>
    </ul>
</body>

🚩 if / for 문 사용하기: <% %>

<body>
  <h1>회원 목록</h1>
  <h2>총 회원 수: <%= userCounts %></h2>
  <ul>
    <% if (userCounts > 0) { %>
    <% for(let i = 0; i < userCounts; i++) { %>
    <li>
      <p>ID: <%= USER[i].id %></p>
      <p>NAME: <%= USER[i].name %></p>
    </li>
    <% } %>
    <% } else { %>
    <li>
      회원 정보가 없습니다!
    </li>
    <% } %>
  </ul>
</body>

🚩 CSS 적용하기

views/css/style.css 생성
index.js 파일에 <link rel="stylesheet" href="./css/style.css"> 걸었을 때 안되는 이유: URL과 back-end 폴더 구조가 동일하다면 해킹 위험성이 높기 때문에 express 같은 프레임워크에서는 static이라는 미들웨어를 제공

app.use(express.static('views'));

static을 사용하면 프로젝트에서 사용하는 폴더 경로의 시작점은 localhost:4000/views가 됨
여러개 폴더를 등록하는 것이 가능하지만 보통 public이라는 폴더를 기본으로 설정해놓고 브라우저에서 사용하는 css, js, 이미지 등을 위치시킴

🔎 express 기본 폴더 구조

/public : 외부(브라우저 등 클라이언트)에서 접근 가능한 파일 모아둠(/images, /js, /css)
/routes : 페이지 라우팅과 관련된 파일 저장
/views : jade, ejs 파일 등 템플릿 파일 모아둠. 웹 서버 사용 시 이 폴더의 파일들을 사용해 렌더링
/app.js : 핵심적인 서버 역할, 미들웨어 관리가 이루어짐, 라우팅의 시작점
/package.json : npm의 의존성 파일, 현재 프로젝트에 사용된 모듈을 설치(npm install)하는데 필요한 내용을 담음
/bin/www : 서버를 실행하는 스크립트, 프로젝트 돌아가는 포트번호 바꿀 수 있음

🚩 기능을 파일로 분리하고 모듈화하기

// app.js
const userRouter = require('./routes/users');
app.use('/users', userRouter);

// routes/users.js
module.exports = router;

<!-- index.ejs -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index</title>
</head>

<body>
  <h1>Hello, Express Service</h1>
  <h2><a href="/users">Move to USER service</a></h2>
</body>

</html>

🔎 Error 핸들링

서버 err가 발생하면 정석적으로는 err를 발생시킨 다음 메시지와 statuscode를 전달해줘야 함

// 회원 목록
router.get('/', (req, res) => {
  const userLen = USER.length;
  res.render('users', { USER, userCounts: userLen, imgName: 'img1.jpg' });
});

// 회원 정보(id)
router.get('/:userID', (req, res) => {
  const userData = USER.find((user) => user.id === req.params.userID);
  if (userData) res.send(userData);
  else {
    const err = new Error('ID not found');
    err.statusCode = 404;
    throw err;
    // res.end('ID not found');
  }
});

// 회원 등록
router.post('/', (req, res) => {
  if (req.query.id && req.query.name && req.query.email) {
    const newUser = {
      id: req.query.id,
      name: req.query.name,
      email: req.query.email,
    };
    USER.push(newUser);
    res.send('회원 등록 완료');
  } else {
    const err = new Error('Unexpected query');
    err.statusCode = 404;
    throw err;
  }
});

// 회원 정보 수정
router.put('/:userID', (req, res) => {
  if (req.query.id && req.query.name && req.query.email) {
    const arrIndex = USER.findIndex((user) => user.id === req.params.userID);
    if (arrIndex !== -1) {
      USER[arrIndex].id = req.query.id;
      USER[arrIndex].name = req.query.name;
      USER[arrIndex].email = req.query.email;
      res.send('회원정보 수정 완료');
    } else {
      const err = new Error('ID not found');
      err.statusCode = 404;
      throw err;
    }
  } else {
    const err = new Error('Unexpected query');
    err.statusCode = 404;
    throw err;
  }
});

// 회원 삭제
router.delete('/:userID', (req, res) => {
  const arrIndex = USER.findIndex((user) => user.id === req.params.userID);
  if (arrIndex !== -1) {
    USER.splice(arrIndex, 1);
    res.send('회원 삭제 완료');
  } else {
    const err = new Error('ID not found');
    err.statusCode = 404;
    throw err;
  }
});

app.js의 미들웨어 중 마지막에 throw된 err를 받는 미들웨어를 추가

app.use((err, req, res, next) => {
  console.log(err.stack);
  res.status(err.statusCode);
  res.send(err.message);
});

해당 미들웨어는 err인자와 res를 같이 써야 하므로 app.use() 메소드의 인자를 전부 사용해야 함.
3개만 쓸 경우 req, res, next로 인식하기 때문에 err를 받지 못 함

저작자표시 비영리 변경금지

'KDT > TIL' 카테고리의 다른 글

9/14 TIL : 게시판 기능에 MongoDB 적용, 서버 배포 (0)	2022.09.20
9/7 TIL : form 태그로 데이터 전달, fetch, MongoDB (0)	2022.09.18
9/2 TIL : 전개 구문, yarn, postman, express router (0)	2022.09.18
8/31 TIL : File-system(JS, Promise, async/await), Routing w/o framework (0)	2022.09.18
8/29 TIL : JSDoc, 프레임워크 없이 CRUD 구현, JS module (0)	2022.09.15

현재글9/5 TIL : express로 API 만들기, view engine(EJS), express 폴더 구조

괴발개발

9/5 TIL : express로 API 만들기, view engine(EJS), express 폴더 구조

'KDT > TIL' 카테고리의 다른 글

'KDT/TIL'의 다른글

티스토리툴바

9/5 TIL : express로 API 만들기, view engine(EJS), express 폴더 구조

'KDT > TIL' 카테고리의 다른 글

'KDT/TIL'의 다른글

관련글

티스토리툴바