Express

Express

▽ 기본 Node.js 틀

const http = require('http');
const hostname = '127.0.0.1';
const port = 1337;

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

하지만 위 방법보다도 더 간단히 웹서버를 만들 수 있다.
→ Node.js 로 만들어진 프레임워크인 express 사용!

---

Express 다운로드

생성하려는 폴더를 npm init 으로 패키지화 하고 npm 명령어로 다운받아야 한다.

다운로드 명령어 : npm install express (--save)

---

Express로 웹서버 만들기

Node.js문법을 최소화 한 것

var express = require('express');  // express 모듈
var app = express();  // express 모듈로 app 객체 만들기
app.get('/', function(req, res){ // get 함수
  res.send('Hello home page'); // node의 end == express의 send(둘다 '' 안에 html을 받음)
});
app.get('/login', function(req, res){
  res.send('Login please');
});
// get방식 즉, url로 접속한 사용자를 받기 위한 메서드 : get
// get 메서드는 첫번째 인자로 접근한 사용자가 있을때 function을 실행하도록 설계되어 있음
app.listen(3000, function(){
  console.log('conneted 300 port!');
});

get방식 즉, url로 접속한 사용자를 받기 위한 메서드를 이용해 라우팅해준다.
get 메서드는 첫번째 인자로 접근한 사용자가 있을때 function을 실행한다.
(Node.js의 if 문과 비슷한 기능)

이러한 일을 '라우팅'이라 한다. => 라우트는 길을 찾는다는 뜻
get 함수 사용자와 컨트롤러의 중개하여
사용자의 요청에 따라 어떤 컨트롤러를 실행할 것인지 결정하는 역할을 한다.

---

Express 로 정적파일 제공하기

정적 파일이란?
정적 파일이란, 직접 값에 변화를 주지 않는 이상 변하지 않는 파일이다.

Ex. html 파일, image, css 파일, js 파일 등

정적 파일 제공하기
app.use(express.static('public'));
express 변수에는 stastic이라는 메서드가 포함되어있다.
이 메서드를 미들웨어로서 로드해준다.
여기서 'public'은 디렉토리의 이름이다. (관습적으로 public으로 이긴 함)

따라서 'public' 이라는 디렉토리 밑에 있는 데이터들을 웹브라우저의 요청에 따라 제공해줄 수 있다.

가령, 사용자가 127.0.0.1:3000/images/cat.jpg 로 접근한다면, 해당 파일을 public/images/cat.jpg에 존재하는지 검색하게 된다. → 사용자 기준에서 폴더의 경계가 없어지는 것!

이와 같은 방법은
1) public에 저장된 파일만을 제공한다 (보안)
2) 메인인 app.js의 코드를 단순화 할 수 있다 (간결)
는 점에서 이점이 있다.

정적파일과 동적 파일의 차이
use(express.static('')) 으로 불러온 폴더는 변경사항이 바로 적용된다.
(app.js를 키고 끄지 않아도 새로고침으로 반영 가능)
반면 app.js 의 변경사항은 저장, 서버끄기, 서버 재실행을 해야 적용이 되는데
이는 동적, 정적 파일의 차이이다.

동적파일 → 변경사항 있으면 서버 껐다 켜야 적용됨 (다시 읽어와야 하므로)
정적파일 → 변경사항 바로 적용됨

---

템플릿 엔진 PUG

템플릿 엔진은 그 자체로 분야가 될 만큼 규모가 있으므로 개요만 짚고 넘어가자
이번에 다뤄볼 템플릿 엔진은 pug 이다.

1) pug 다운로드
npm install pug --save

2) express 객체와 pug 연결
app.set('view engine','pug');

3) 템플릿이 있는 디렉토리 표시 (./views)
기본적으로 views 폴더를 찾도록 세팅되어 있지만 혹시 모르니 쓰는게 좋음

• 읽어올 폴더를 설정했으므로 폴더명/파일명.pug 가 아니라 파일명만 써도 알아먹음
  app.set('views', './views');

var express = require('express');
var app = express();
app.set('view engine','pug'); // express 객체와 pug 연결
app.set('views', './views');   // pug 파일을 읽어올 디렉토리 표시

app.get('/template', function(req, res){
  res.render('index');
  // 템플릿엔진으로 작성된 파일을 읽어올때는 render메서드 사용
  // render은 index.pug를 렌더링하여 전송함
});

---

pug의 간단한 문법

테그안에 테그가 들어간다 : tab (들여쓰기)
나란히 쓰인다 : tab 상 같은 위치
테그안에 내용이 들어간다 : 띄어쓰기
테그의 속성 : (속성명 = '속성값')
템플릿 안에서 javascript를 사용할때 : 앞에 - (Ex. -for)
변수 생성 : 텍스트 안에서는 #{변수이름}, 속성 뒤에서는 = 변수이름
공백 포함하는 텍스트일때 : |
변수에 값 전달 : js 파일에서 res.render(파일명, {변수이름 : 값})
Ex. res.render('index', {time:Date(),title:'Jade'});
cf. if문과 each문은 - 없이 그냥 쓸 수 있음

// index.pug
html
  head
    title= title
  body
    h1 hello jade
    ul
      -for(var i =0; i<5 ; i++)
        li coding
    div= time

---

Express에서 쿼리스트링으로 라우팅하기 (Get 방식)

express 가 없는 node js 에서는 아래와 같은 방법으로 라우팅했다.

var http = require('http');
var url = require('url');

var app = http.createServer(function(req,res){
	var _url = req.url;
	var queryData = url.parse(_url, true).query;
	var pathname = url.parse(_url, true).pathname;
	if(pathname == '/topic'){
		if(queryData.id == '1'){}
		if(queryData.id == '2'){}
		if(queryData.id == '3'){}
	}
});
app.listen(3000);

위의 과정을 express는 더 간단하게 만든다.
req 객체와 query 객체를 직관적으로 이용할 수 있기 때문 ⇒ req.query.id

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

app.get('/topic', function(req,res){
  var ids = [
    'Javascript is ...',
    'Nodejs is ...',
    'Express is ...'
  ];
  res.send(ids[req.query.id]);
});
app.listen(3000);}
);

---

Express 에서 Post 방식으로 데이터 전달하기

// form.pug
doctype html
html
  head
    meta(charset='utf-8')
  body
    form(action='form_receiver' method='post')
      p
        input(type='text' name='title')
      p
        textarea(name='description')
      p
        input(type='submit')

var express = require('express');
var app = express();
app.locals.pretty = true; 
app.set('view engine','pug');
app.set('views', './views');

app.get('/form',function(req,res){
  res.render('form');
})

이때 form테그의 method속성 기본값이 get 이므로
method="post" 가 없으면 쿼리스트링 형식으로 데이터 전송됨
Ex. http://localhost:3000/form_receiver?title=비빔면&description=먹고싶다

---

Express 에서 Post 방식으로 라우팅하기

기본적으로 express는 post 방식의 데이터는 지원하지않음
post 방식으로 전달하려면 body-parser 등의 미들웨어(확장기능)를 사용해야 함
body-parser는 req에 body 라는 객체를 생성해서 form 테이터에 접근할 수 있게 해줌
⇒ body parser 와 body 객체로 post 방식으로 전달된 데이터를 라우팅 할 수 있음

var express = require('express');
var app = express();
var bodyParser = require('body-parser'); // body-parser 미들웨어
app.use(bodyParser.urlencoded({extended: false}));
app.get('/form',function(req,res){
  res.render('form');
});
app.post('/form_receiver',function(req,res){
  var title = req.body.title; // query객체 말고 body 객체
  var description = req.body.description;
  res.send(title+','+description);
});