웹브라우저가 상호작용하는 과정에서 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')
bodyform.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!');
});'javascript > 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 |
