C portfolio

들어가기 전에...

- Post 형식으로 라우팅 해서 연결하는 단계 까지 할 것이다.

- 파일은 app_file.js 로 설정했고 템플릿 엔진(PUG) 는 views_file 폴더에 넣어 뒀다.

코드는 아래와 같다.

먼저 express 를 require 로 불러온다. (express 설치가 선행되어야 함.)

그리고 var app 을 통해 express 정의한 뒤, 템플릿 엔진을 사용하여 html 소스코드가 깔끔하게 보이게 하기 위하여 app.locals.pretty = true; 코드를 입력해 준다.

그 후 템플릿 엔진 'pug' 를 사용하기 위해 

app.set('views', './views_file');

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

코드를 입력해 준다. 

그 다음 pug 템플릿 엔진으로 사용할 text 에 아래 코드를 입력한다.

form 문에서 action 으로 정보를 보낼 곳 을 지정해 준 뒤, method는 post 로 지정해준다.

그리고 아래 코드를 통해

app.get('/topic/new', function(req, res){

  res.render('new');

})

new.pug 파일을 랜더링 해준다.

그리고 아래 코드를 입력하여 3000 포트에 listen 해주고,

app.post 에 'Hi post') 를 입력하여 post 형식이 연결 되었는지 확인한다.

 app.post('/topic', function(req, res){

  res.send('Hi, post');

})

app.listen(3000, function(){

  console.log('connected, 3000...')

})

참고) 들어가기 전에 form 문

- pug 안에서 사용한다.

- URL 을 생성하는 역할을 함.

- 그것을 get 하면 된다.

- form 에서 method=get 을 생략하면 명시적으로 get 으로 인식한다.

method 에서 'post' 를 입력 할 경우 정보를 post 로 받게 된다. ( mothod 를 생략할 경우 자동으로 get 형식으로 받게 된다. )

post 방식을 이용할 때는 get 방식을 이용할때 app.get 을 하는것 처럼 app.post 로  코드를 입력받는다. (라우트)

즉. app.post('form_receiver', function(req, res){ ......

var title = req.body.title;

var description = req.body.description;

res.send( <- 이런 식으로. 그리고 위의 코드처럼 post 방식에서는 

req.query 대신에 body 객체를 이용한다.

 하지만 이렇게 하면 에러가 발생하는데, 이는 req 안에 body 객체가 존재하지 않기 때문이다. 이를 해결하려면 body-parser 라는 미들웨어 (확장모듈) 을 cdm 에서 설치해야한다. 설치를 하게 되면 body 객체를 사용할 수 있다.

그리고 express.js 홈페이지 설명서를 참고하면

var bodyParser = require('body-parser') 과 app.use(bodyParser.urlencoded({extended: false})) 

코드를 추가 시키라고 한다. 두 코드를 적당한 위치에 넣어주면 body 객체를 사용 할 수 있다. 이는 바디 파서를 리콰이어 한 뒤 app.use 를 통해 붙여 넣는것으로 이해하면 편하다.

그러면 바디라는 객체를 사용하여 get 방식과 처럼 정보를 얻을 수 있다.

1. 쿼리스트링을 이용하는 경우

2. 시멘틱 URL 을 이용하는 경우