#1. Express

1. Express의 개념

1) Express란?

  • Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크라고 한다.
  • 즉 쉽게 말해 Node.js를 사용하여 서버를 개발할 때 서버를 쉽게 구성할 수 있게 도와주는 프레임워크이다.
yarn add express

 

※ 프레임워크

  • 프로그램을 만드는데 기본적으로 제공되는 기본 골격.
  • 전체적인 틀이 이미 정해져 있기 때문에 개발자는 자신이 목표로 하는 세부 기능에만 집중할 수 있다.
  • 코드 품질이 일정하게 유지될 수 있다.

 

2) 서드파티 패키지

Express와 함께 사용할 수 있는 서드파티 패키지 (아래 나와있는 패키지 외에 다수 존재)

- express-useragent

yarn add express-useragent
  • 접근한 클라이언트의 정보(운영체제 정보, 브라우저 정보, IP주소 등)를 취득할 수 있는 기능을 제공한다.

 

- server-static

yarn add serve-static
  • 특정 폴더를 통째로 웹에 노출시키는 기능 (폴더 구조가 그대로 URL에 노출됨)
  • img, css, js, 정적 html 파일 등을 호스팅 하고자 할 때 사용한다.

 

- server-favicon

yarn add serve-favicon
  • favicon 파일을 브라우저에 전달한다.

 

2. Express 사용하기

1) 기본 사용방법

  • Express 홈페이지에 나와있는 기본적인 사용방법.
const express = require('express')
const app = express()
const port = 3000

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

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

 

2) 응용하기

// ES6 문법으로 모듈 참조
import express from 'express';

// 객체 생성
const app = express()
const port = 3000

// url, (호출, 응답)
app.get('/test', (req, res) => {
  // 화면에 띄울 내용 정의
  let html = 
  `
    <h1>테스트 페이지</h1>
    <h2>Express로 구현한 Node.js 백엔드 페이지</h2>
  `;
  
  // status로 상태값 전달하고, send로 화면에 띄울 내용을 전달한다.
  res.status(200).send(html);
})

// 실행할 포트 번호 입력 및 서버 구동시 실행될 내용
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}/test`)
})

서버 구동시 콘솔창에 출력
3000/test URL로 접속시 보여지는 페이지

 

3. 파라미터 값 가져오기 (GET)

1) GET 파라미터

  • URL 뒤에 물음표(?) 를 기준으로 이름=값&이름=값 형식으로 변수를 포함시키는 방법이다.
  • ?이름=값&이름=값 형식의 문자열을 QueryString 이라고 하며 클라이언트 측 에서는 window.location.search로 문자열 전체를 취득하여 이를 활용할 수 있다.
  • 주로 링크를 클릭한 경우 어떤 링크를 선택했는지를 감지하기 위해 사용한다.
  • 모든 변수가 URL에 노출되기 때문에 상대적으로 보안에 좋지 않다.

- HTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>백엔드에 링크로 GET 파라미터 전송하기</h1>

    <h2>100 + 200 = ?</h2>

    <ul>
      <!-- 링크에 QueryString 값 지정 -->
      <li><a href="/send_get?answer=100&message=helloworld">100</a></li>
      <li><a href="/send_get?answer=200&myname=nodejs">200</a></li>
      <li><a href="/send_get?answer=300&language=javascript">300</a></li>
      <li><a href="/send_get?answer=400&age=10&height=175&weight=80">400</a></li>
      <li><a href="/send_get?answer=500&position=backend">500</a></li>
    </ul>
  </body>
</html>

 

- Node.js

// express 호출
import express from 'express';
// 특정 폴더의 파일을 URL로 노출시킴
import serveStatic from 'serve-static';

// express 사용
const app = express();
// 포트 번호 지정
const port = 3001;

// public 폴더에 있는 정적 파일을 URL에 노출시킨다.
app.use('/', serveStatic('public'));

app.get('/send_get', (req, res, next) => {
  // ex) ?answer=400&age=10&height=175&weight=80
  // GET 파라미터들은 req.query 객체의 하위 데이터로 저장된다.
  console.log('[프론트엔드로부터 전달 받은 GET 파라미터]');
  for(let key in req.query) {
    const str = `\t >> ${key} = ${req.query[key]}`;
    // const str = '\t >> ' + key + '=' + req.query[key];
    console.log(str);
  }

  // /send_get?answer=0000 형태로 접근한 경우 answer 파라미터 값 추출
  // const answer = req.query['answer'];
  const answer = req.query.answer;
  let html = null;

  // ?answer의 값을 정수로 변환 후 같다면?
  if(parseInt(answer) === 300) {
    html = "<h1 style='color:#0066ff'>정답입니다.</h1>";
  } else {
    html = "<h1 style='color:#ff6600'>틀렸습니다.</h1>";
  }
  
  // 프론트엔드에 상태값과 내용을 전달
  res.status(200).send(html);
});

// 서버 구동
app.listen(port, () => {
  console.log('-----------------------------------');
  console.log('|       Start Express Server      |');
  console.log('-----------------------------------');
});

 

2) PATH 파라미터

  • URL 안에 변수값을 폴더 이름처럼 숨겨 놓은 형태이다.
  • PATH 파라미터는 변수의 전달 형태만 다를 뿐 URL을 통해 전달한다는 점에서 GET 파라미터의 한 종류로 구분한다.
http://<hostname>:<port>/페이지이름/변수1/변수2

 

- path 파라미터 직접 호출

  • url 입력창에 직접 path파라미터를 입력하여 호출한다.
import express from 'express';
const app = express()
const port = 3000

app.get('/test/:id/:password', (req, res) => {
  const html = 
  ` 
    <h1>
      아이디는 <span style="color:#0066ff">${req.params.id}</span> 이고,
      패스워드는 <span style="color:#ff6600">${req.params.password}</span> 입니다.
    </h1>
  `;
  
  // 프론트엔드에 상태값과 내용을 전달
  res.status(200).send(html);
})

// 서버 구동
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
});

 

4. POST, PUT, DELETE

1) POST 파라미터

  • HTML의 <form> 태그에서 method 속성을 POST로 부여한 경우를 의미한다.
  • 변수가 URL에 노출되지 않기 때문에 상대적으로 보안에 유리하지만, 전송되는 변수를 아예 볼 수 없다는 것은 아니다.
  • Node.js 에서는 POST 파라미터를 처리하지 못하므로 아래 패키지를 추가 설치해야한다.
yarn add body-parser

※ express 4.x 버전이 되면서 내장 모듈이 됐기 때문에 따로 설치할 필요는 없다.

- Node.js

// express 호출
import express from 'express';
// POST 파라미터 처리
import bodyParser from 'body-parser';

// express 사용
const app = express();
// 포트 번호 지정
const port = 3001;

/** POST 파라미터 수신 모듈 설정, 추가되는 미들웨어들 중 가장 먼저 설정해야한다. */
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
// extended: ture -> 지속적 사용
// extended: false -> 한번만 사용
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.text());  // TEXT형식의 파라미터 수신 가능
app.use(bodyParser.json());  // JSON형식의 파라미터 수신 가능

/** POST 파라미터를 처리하기 위한 라우터 등록 */
app.post('/send_post', (req, res, next) => {
  // URL 파라미터들은 req.body 객체의 하위 데이터로 저장된다.
  console.log('[프론트엔드로 부터 전달받은 POST 파라미터]');
  for(let key in req.body) {
    const str = `\t >> ${key} = ${req.body[key]}`;
    console.log(str);

    const html = 
      `
        <h1>
          <span style="color:#0066ff">${req.body.username}</span>님의 이메일 주소는 
          <span style="color:#ff6600">${req.body.email}</span> 입니다.
        </h1>
      `;
	
    // 프론트엔드에 상태값과 내용을 전달
    res.status(200).send(html);
  }
});

app.listen(port, () => {
  console.log('-----------------------------------');
  console.log('|       Start Express Server      |');
  console.log('-----------------------------------');
});

 

2) PUT, DELETE 파라미터

  • HTTP 1.1에서는 지원하지 않는 속성 (HTTP 2.0부터 지원)
  • HTML의 <form> 태그는 이 방싯을 지원하지 않는다.
  • 기본적으로 POST 방식과 동일하면서 전송방식의 이름만 변경한 형태이다.
  • Node.js 스스로는 PUT, DELETE 파라미터를 처리하지 못하므로 아래 패키지를 추가 설치해야 한다.
yarn add mehod-override

 

- Node.js

// express 호출
import express from 'express';
// POST 파라미터 처리
import bodyParser from 'body-parser';
// PUT 파라미터 처리
import methodOverride from 'method-override';

// express 사용
const app = express();
// 포트 번호 지정
const port = 3001;

/** POST 파라미터 수신 모듈 설정, 추가되는 미들웨어들 중 가장 먼저 설정해야한다. */
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
// extended: ture -> 지속적 사용
// extended: false -> 한번만 사용
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.text());  // TEXT형식의 파라미터 수신 가능
app.use(bodyParser.json());  // JSON형식의 파라미터 수신 가능

/** HTTP PUT, DELETE 전송방식 확장 */
// 브라우저 개발사들이 PUT, DELETE 방식으로 전송하는 HTTP Header 이름
app.use(methodOverride('X-HTTP-Method'));   // 마이크로소프트
app.use(methodOverride('X-HTTP-Method-Override'));   // 구글/GData
app.use(methodOverride('X-Method-Override'));   // IBM
// HTML 폼에서 PUT, DELETE로 정송할 경우 POST방식을 사용하되, action 주소에 "?_method" 라고 추가.
app.use(methodOverride('_method'));   // HTML form, 안해도 된다고 함.

/** PUT 파라미터를 처리하기 위한 라우터 등록 */
app.put('/send_put', (req, res, next) => {
  // URL 파라미터들은 req.body 객체의 하위 데이터로 저장된다.
  console.log('[프론트엔드로 부터 전달받은 PUT 파라미터]');
  for(let key in req.body) {
    const str = `\t >> ${key} = ${req.body[key]}`;
    console.log(str);

    const html = 
      `
        <h1>
          <span style="color:#0066ff">${req.body.username}</span>님은 
          <span style="color:#ff6600">${req.body.grade}</span>학년 입니다.
        </h1>
      `;

    res.status(200).send(html);
  }
});

/** DELETE 파라미터를 처리하기 위한 라우터 등록 */
app.delete('/send_delete', (req, res, next) => {
  // URL 파라미터들은 req.body 객체의 하위 데이터로 저장된다.
  console.log('[프론트엔드로 부터 전달받은 DELETE 파라미터]');
  for(let key in req.body) {
    const str = `\t >> ${key} = ${req.body[key]}`;
    console.log(str);

    const html = 
      `
        <h1>
          <span style="color:#0066ff">${req.body.username}</span>님의 점수는 
          <span style="color:#ff6600">${req.body.point}</span>점 입니다.
        </h1>
      `;
      
    // 프론트엔드에 상태값과 내용을 전달
    res.status(200).send(html);
  }
});

// 서버 구동
app.listen(port, () => {
  console.log('-----------------------------------');
  console.log('|       Start Express Server      |');
  console.log('-----------------------------------');
});

PUT 파라미터
DELETE 파라미터

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

'국비수업 > Node.js' 카테고리의 다른 글

[Node.js/express] 메일보내기  (0) 2022.07.01
[Node.js/express] Cookie / Session  (0) 2022.06.30
[Node.js] HTTP Server  (0) 2022.06.28
[Node.js] HTTP Client  (0) 2022.06.27
[Node.js] Scheduler  (0) 2022.06.27

+ Recent posts

티스토리툴바