[생활코딩] Node.js 를 이용해 웹애플리케이션 만들기(3)

쿼리스트링

http://a.com/topic?id=1
protocol / domain / path / query string

쿼리스트링에 따라 같은 path에서도 다른 페이지를 보여줄 수 있다

app.get('/topic', function(req, res){
    let topics = [
        'Javascript is...',
        'Nodejs is...',
        'Express is...'
    ];
    let str = `
    <a href="topic?id=0">JavaScript</a><br>
    <a href="topic?id=1">Nodejs</a><br>
    <a href="topic?id=2">Express</a><br>
    `
    let output = str + topics[req.query.id];
    res.send(output);
});

a태그를 이용해서 쿼리스트링을 바꿔준다

 

app.get('/topic',function(req, res){
    let topics = [
        'javascript is...',
        'nodejs is...',
        'express is...'
    ];
    let output = `
        <a href="/topic?id=0">JavaScript</a><br>
        <a href="/topic?id=1">Nodejs</a><br>
        <a href="/topic?id=2">Express</a><br>
        ${topics[req.query.id]}
    `
    res.send(output);
})

이런 식으로도 나타낼 수 있음

app.get('/topic',function(req, res){
    res.send(req.query.id);
})

이 코드는 id라는 property의 값이 출력된다!

 

 

app.get('/topic',function(req, res){
    res.send(req.query.id+','+req.query.name);
})

http://localhost:3000/topic?id=2&name=이름

이런 식으로 여러 property를 가져올 수 있다

 

 

 

시멘틱 URL

 

app.get('/topic/:id',function(req, res){
    let topics = [
        'javascript is...',
        'nodejs is...',
        'express is...'
    ];
    let output = `
        <a href="/topic/0">JavaScript</a><br>
        <a href="/topic/1">Nodejs</a><br>
        <a href="/topic/2">Express</a><br>
        ${topics[req.params.id]}
    `
    res.send(output);
})

시멘틱 URL이란 쿼리스트링과 다르게 처음부터 id를 받을 것이라는 것을 알려주고 /를 통해 구분한다

 

app.get('/topic/:id/:mode', function(req,res){
    res.send(req.params.id+','+req.params.mode);
})

이렇게 여러 정보를 받을 수 있다

 

 

 

GET & POST

 

GET 방식: 어떤 정보를 서버에게 요청해서 가져옴 (URL에 정보 포함)

 

POST 방식: 사용자의 정보를 서버에게 전송

 

 

*get 방식

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

이렇게 form.pug 파일을 연결해 준 후

 

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

form.pug 파일을 작성해준다

여기서 form 태그는 새로운 URL을 생성해주는 작은 프로그램이라고 생각해도 좋다

 

action 뒤의 form_receiver를 써주면 http://localhost:3000/form_receiver?title=hello&description=world 이런 페이지가 생성된다

 

form.pug에서 text의 이름을 title로, textarea의 이름을 description으로 지정해주었기 때문에 http://localhost:3000/form_receiver?title=hello&description=world 이러한 URL이 생성되게 된다

 

app.get('/form_receiver', function(req, res){
    let title = req.query.title;
    let description = req.query.description;
    res.send(title+', '+description);
})

/form_receiver의 라우터를 이렇게 써준다

 

 

get 방식: URL에 정보가 포함되어있다

 

이때 form 태그 method의 기본 속성으로 get으로 지정되어 있고 다시 get 방식으로 지정해줄 수도 있다

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

하지만 post 방식으로 지정해주게 되면 제대로 실행되지 않는다

(URL의 정보를 이용하는 것은 post 방식이 아닌 get 방식에서만 사용되기 때문이다)

 

 

*post 방식

app.post('/form_receiver', function(req, res){
    let title = req.body.title;
    let description = req.body.description;
    res.send(title+', '+description);
})

app.get이 아닌 app.post를 사용하고 query 대신 body를 사용해준다

 

그러면 위와 같은 에러가 생기고, body parser을 이용해주면 된다

 

먼저 설치를 해준다!

 

let bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({extended:false}))

이런 코드를 포함한 후 아까 썼던 것처럼 post 방식을 사용하게 되면 body 객체를 사용할 수 있게 된다!

 

흐음...

이 강의가 몇 년 전 강의라 그런지 많은 것들이 달라진 것 같다...ㅜ

jade -> pug도 그렇고.. 일단 강의 다 듣고 따로 알아봐야겠다

아까 get 방식과는 다르게 URL에 다른 정보가 포함되어있지 않은 것을 볼 수 있다!!

 

GET 방식: 정보에 대한 주소를 다르게 표현하고 싶을 때 사용(쿼리스트링)

POST 방식: 아이디, 비밀번호 등 URL에 정보를 노출시키고 싶지 않을 때, 용량이 큰 data를 전달할 때(GET 방식을 이용하면 URL에서 끊김) 사용

 

나머지는 다음 편에서!