728x90

웹브라우저가 상호작용하는 과정에서 2가지 방법이 있다.

GET 방식과 POST 방식이 있다.

GET 방식은 지금까지 사용했던 것 (웹브라우저에서 웹서버로 정보를 요청할 때 사용. 디폴트가 GET)

POST를 알게 됨으로써 GET을 더 잘 이해할 수 있게 된다.

 

애플리케이션을 이용하기 위해 애플리케이션에 접속하면,

애플리케이션은 사용자의 접속(사용자의 요청)에 따라 어떠한 정보를 응답한다.

사용자는 그 정보를 가져온다.

이 방식이 GET이다.

 

http://a.com/topic?id=1 같은 경우 GET 방식이다. (query string이 없이 /topic 만으로 접속했을 때에도 GET 방식이다.)

어떤 정보를 서버에 요청해서 가져오는 방식은 GET 방식이다.

 

한 마디로 정리하자면 아래와 같다.

GET : 사용자가 서버에 있는 정보를 GET
POST : 사용자의 정보를 서버에 전송 (예 : 로그인)

 

 

 

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

우선 views 디렉토리 에 form.pug 파일을 생성하고 위와 같은 코드를 작성한다.

 

 

 

doctype html
html
    head
        meta(charset='utf-8')
    body

form.pug 파일은 이처럼 작성하면

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body></body>
</html>

해당 /form 웹페이지는 다음과 같은 페이지 소스를 갖게 된다.

tag 뒤에 ( )를 붙여 사용하면 ( )안에 있는 속성을 사용할 수 있다.

 

 

 

doctype html
html
    head
        meta(charset='utf-8')
    body
        input(type='text')

input(type='text')를 추가하면 웹페이지에 글씨를 입력할 수 있는 텍스트박스가 한 개 생성된다.

하지만 이는 한 줄 밖에 표시할 수 없다.

그래서 여러 줄을 표시하기 위해 textarea를 사용한다.

 

 

 

p 태그를 추가해서 줄바꿈을 한다.
(p 태그는 화면 전체를 사용하기 때문에 줄바꿈이 자동으로 된다.)

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

input(type='submit')을 사용해서 제출 버튼을 만들었다.

그리고 form 태그를 이용해 컨트롤들을 하나의 form으로 묶었다.

form(action='/form_receiver')을 사용해 컨트롤들을 이용해 입력받은, 제출할 정보들을 /form_receiver 로 보낸다.

그러면 텍스트박스 2개를 모두 입력하고 제출버튼을 누르면 url이 http://localhost:3000/form_receiver? 로 변경되면서 이동되는 것을 확인할 수 있다.

 

하지만 사용자가 텍스트박스 2개에 입력한 정보들을 서버가 알 수 있어야하므로 input과 textarea를 각각 input(type='text' name='title'), textarea(name='description')으로 속성값을 준다.

 

그리고 텍스트박스에 각각 hello, world를 작성했을 때 url은 http://localhost:3000/form_receiver?title=hello&description=world 로 바뀌게 된다.

 

query string이 자동으로 생성된다. 이는 웹브라우저가 만든 것이다.

 

 

 

그럼 /form_receiver 라는 라우터를 만들어보자.

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

다음과 같이 만들었다.

각각 title, description 변수에 req의 query의 값들을 대입했다.

그리고 새로고침하면 hello,world 가 정상적으로 출력되는 것을 확인할 수 있다.

html에서 form이라는 존재는 url을 생성해주는 작은 프로그램이라고 볼 수 있다.

사용자가 form에 값을 입력하면 웹브라우저는 form 태그에 따라서 적당한 url을 자동으로 생성해서 그것을 서버에 보내주는 역할을 한다.

 

/form_receiver는 사용자가 전송한 title, description이라는 값을 저장할 수 있게 된다.

이것은 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')

위에서 method='get'을 생략할 수 있는데 생략하게 되면 디폴트 값으로 GET방식이 적용되게 된다.

 

만약 method='post'으로 작성한다면 POST방식으로 변경되어 /form_receiver를 찾을 수 없다고 뜬다.

이는 데이터 전송이 실패한 것이 아니라, url을 통해 데이터를 전송하지 않고  우리 눈에 보이지 않는 방식으로 데이터를 전송하기 때문에 url에 query string이 붙지 않은 것이다.
다음 글에서 더 자세히 살펴볼 것이다.

 

 

 

<form.pug 전체코드>

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')

 

<app.js 전체코드>

var express = require('express');
var app = express();
app.locals.pretty = true;
app.set('view engine', 'pug');
app.set('views', './views');
app.use(express.static('public'));
app.get('/form', function (req, res) {
    res.render('form');
});
app.get('/form_receiver', function (req, res) {
    var title = req.query.title;
    var description = req.query.description;
    res.send(title + ',' + description);
});
app.get('/topic/:id', function (req, res) {
    var topics = [
        'Javascript is ...',
        'Nodejs is ...',
        'Express is ...'
    ];
    var 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><br>
     ${topics[req.params.id]}
    `
    res.send(output);
});
app.get('/topic/:id/:mode', function (req, res) {
    res.send(req.params.id + ',' + req.params.mode)
});
app.get('/template', function (req, res) {
    res.render('temp', {time: Date(), title: 'Pug'});
});
app.get('/', function (req, res) {
    res.send('Hello home page');
});
app.get('/dynamic', function (req, res) {
    var lis = '';
    for (var i = 0; i < 5; i++) {
        lis = lis + '<li>coding</li>';
    }
    var time = Date();
    var output = `
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
    </head>
    <body>
        Hello, Dynamic!
        <ul>
          ${lis}
        </ul>
        ${time}
    </body>
  </html>`;
    res.send(output);
});
app.get('/test', function (req, res) {
    res.send('Test, <img src="/test.png">')
});
app.get('/login', function (req, res) {
    res.send('<h1>Login please</h1>');
});
app.listen(3000, function () {
    console.log('Conneted 3000 port!');
});

'NODE.JS > NODE.JS' 카테고리의 다른 글

[Node.js] Express, POST 방식을 이용한 정보 전달 - GET과 POST 차이, 용도  (0) 2024.07.08
[Node.js] Express, POST 방식을 이용한 정보 전달 - POST  (0) 2024.07.08
[Node.js] Express, URL을 이용하여 시멘틱 URL 사용  (0) 2024.07.08
[Node.js] Express, URL을 이용하여 query 객체 사용  (0) 2024.07.08
[Node.js] Express 템플릿 엔진 (Pug)  (0) 2024.07.08

티스토리툴바