KDT 5th 웹개발 입문수업 24일차

  • by

express Routing

프론트에서 백엔드로 요청을 보낼 때 주소 값을 다르게 보내 요청합니다.

따라서 백엔드에서는 각 주소에 따라 다른 역할을 수행할 수 있습니다.

➡️ 주소에 따라 다른 역할을 수행하는 방법을 Rounting 라고 한다.

  1. 메소드 특정 요청을 통한 라우팅
    1. app.post()
    2. app.get()
    3. app.put()
    4. app.delete()
  2. Express router 미들웨어 -> express.Router()

express.Router() 를 사용하면 특정 URL 요청에 대한 내용을 함께 처리할 수 있습니다.

그 라우터, 미들웨어를 사용하기 위해 app.use (사용할 주소, 라우터 이름) 로 설정합니다.

인기글

라우터를 구성한 후에는 라우터 이름을 사용하여 서버를 구성할 수 있습니다.

const express = require('express');
const app = express();
const userRouter = express.Router();
const PORT = 4000;

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

// http://localhost:4000/users 가 됨
userRouter.get('/', (req, res) => {
  res.send('회원 목록');
});

userRouter.get('/id/:id', (req, res) => {
  res.send('특정 회원 목록');
});

userRouter.post('/add', (req, res) => {
  res.send('회원 등록');
});

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

app.listen(PORT, () => {});

* localhost 는 127.0.0.1 로 대체가 가능!

즉, http://localhost:4000은 http://127.0.0.1:4000과 동일합니다.

  • 위의 userRouter는 http://localhost:4000/user를 의미합니다.

  • http://localhost:4000/user/ –> 회원 목록
  • http://localhost:4000/user/id/ID –> 특정 회원 목록
  • http://localhost:4000/user/add –> 회원 등록

회원 관련 API 생성

const express = require('express');

const app = express();
const userRouter = express.Router();
const userModify = express.Router();
const userDelete = express.Router();

const PORT = 4000;

//TEMP DATA
const USER = {
  1: {
    id: 'test',
    name: '홍길동',
  },
};

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

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

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

// 회원 추가
userRouter.post('/add', (req, res) => {
  if (!
req.query.id || !
req.query.name) return res.send('쿼리 입력 오류');

  const newUser = {
    id: req.query.id,
    name: req.query.name,
  };
  USER(Object.keys(USER).length + 1) = newUser;

  res.send('회원 등록 완료');
});

// 회원 수정
userRouter.use('/modify', userModify);
userModify.put('/:uid', (req, res) => {
  if (!
req.params.uid || !
req.query.id || !
req.query.name)
    return res.send('쿼리 입력 오류');

  if (req.params.uid in USER) {
    // USER(req.params.uid).id = req.query.id;
    // USER(req.params.uid).name = req.query.name;
    USER(req.params.uid) = {
      id: req.query.id,
      name: req.query.name,
    };
    res.send('회원 수정 완료');
  } else {
    res.send('쿼리 입력 오류');
  }
});

// 회원 삭제
userRouter.use('/delete', userDelete);
userDelete.delete('/:uid', (req, res) => {
  if (!
req.params.uid) return res.send('쿼리 입력 오류');

  delete USER(req.params.uid);
  res.send('회원 삭제 완료');
});

// 서버 오픈
app.listen(PORT, () => {});

쉽게 객체 형식으로 받고 처리

서버를 재시작하면 오브젝트 정보가 재설정되기 때문에 해당 정보는 별도로 DB 처리하십시오.

서버에서 받은 데이터로 전면에서 그리기

res.write()로 하나씩 그릴 수 있다.

res.writeHead()에서는태그에 들어가는 정보를 설정할 수 있습니다.

userRouter.get('/show', (req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html; charset=UTF-8' });
  res.write('<h1>Hello Dynamic Web PAge</h1>');

  for (let i = 0; i < USER_ARR.length; i += 1) {
    res.write(`<h2>USER ID is ${USER_ARR(i).id}</h2>`);
    res.write(`<h2>USER NAME is ${USER_ARR(i).name}</h2>`);
  }
  res.end();
});

—> 불편하기 때문에 거의 사용하지 않음

대신 View Engine 사용 -> SSR이 기본!

1. ejs : 가장 기본적인 View Engine, HTML 문법 사용/레이아웃 기능 X

2. pug(jade) : HTML 문법을 간소화/레이아웃 기능 O

3. Nunjucks : HTML 문법 그대로 사용 / 레이아웃 기능 O

ejs

npm i -D ejs 로 설치

express에 어떤 View Engine에서 웹 페이지를 그릴 것인가요?

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

동적 웹페이지는 views 폴더에서 관리 (직접 만들어야 함)

파일 확장자는 .ejs로 작성

userRouter.get('/ejs', (req, res) => {
  res.render('index.ejs', { USER_ARR, userCounts: USER_ARR.length });
});

get() 메소드로 res.렌더(파일명, 건네준 데이터) 함수로 파일명을 입력하면 파일의 내용대로 그려집니다.

데이터는 객체 형태로 전달됩니다.

위와 같이 객체에 전달된 데이터는 ejs 파일에서 <%=%> 문법을 사용하여 res.render()에 넣은 데이터의 객체 필드 이름으로 즉시 호출이 가능합니다.

즉, 데이터를 받을 때는<%= %> 문법을 사용!

<h1>회원 목록</h1>
  <h2>
    총 회원 수 : <%= userCounts %> 명
  </h2>
  <ul>
    <li>
      <p>
        ID : <%= USER_ARR(0).id %>
      </p>
      <p>
        NAME : <%= USER_ARR(0).name %>
      </p>
    </li>
  </ul>

이상한

ejs if, for 문 사용

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

</li>
    <% } %>
  </ul>

JS 문법을 HTML 코드에 적용하고 싶습니다.

 그렇다면, <%%> 안에 코드를 사용하면 된다.

ejs 확장 프로그램—–




index.ejs 파일에 CSS 적용

views 폴더에 css 폴더를 만들고 style.css 파일을 만듭니다.

아는 정보로 에서 css를 연동해 주려고 하지 말라.이것은 해킹 방지의 일환으로

static 미들웨어를 사용해 준다.

static

브라우저(프런트 엔드)로 액세스 가능한 폴더의 위치를 ​​백엔드상에서 지정해 주는 것!

app.use (express.static ( ‘폴더 위치’)) 형태로 사용

해당 미들웨어를 사용하면 프로젝트에서 사용할 폴더 경로의 시작점이 지정되므로,

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

위의 코드에 의한 폴더 경로의 시작점은 localhost:4000/views/와 같은 위치를 가리키는 것입니다.

static으로 폴더의 위치를 ​​지정해 주면, 복수의 폴더를 각각 조사해 간다.

(파일이 없으면 오류 발생)

절대 경로: __dirname

현재 파일이 위치하는 절대 경로, node.js에서 제공해주는 속성입니다.

app.use(express.static(__dirname + '/views'));
app.use(express.static(__dirname + '/js'));

상기 폴더 위치를 보다 정확하게 지정할 수 있다.

// app.use(express.static(__dirname + '/views'));
app.use('/css', express.static(__dirname + '/views/css'));

// app.use(express.static(__dirname + '/js'));
app.use('/js', express.static(__dirname + '/js'));

또한 두 매개 변수를 사용할 때 첫 번째 매개 변수에 프런트 엔드에서 요청한 경로에 따라 폴더를 별도로 지정할 수 있습니다.

express.static() 주의사항

브라우저에서 액세스할 수 있는 디폴트 폴더를 설정하는 만큼, 너무 많은 폴더를 결정하는 것은 지양하는 것이 좋다.

통상은 Public이라는 폴더를 기본으로 설정해 두고, 그 폴더만을 설정해, 클라이언트가 액세스 가능한 폴더로서 css, js, 이미지등을 위치시켜 준다.

Express 기본 폴더 구조




public 폴더로 관리

public 폴더에 css, js, image 폴더를 만들고 관리합니다.

app.use(express.static(__dirname + '/public'));


기능을 파일로 분할

각각의 기능을 파일로 나눈 후 모듈 타입으로 라우팅 처리를 해준다.

모듈 빼기

module.exports = router;

단일 모듈로 호출하기 위한 선언

사용하려는 js 파일에서 require()로 해당 모듈을 호출할 수 있습니다.

const userRouter = require('./routes/users');

메인 서버 부분에는, 위와 같이 user 에 관련한 모듈을 호출해 사용해 준다.