고정 헤더 영역
상세 컨텐츠
본문
반응형
전송방식
클라이언트단에서 고객이 데이터 입력 -> server.js -> 서버단에서 데이터 처리
1.server.js
server.js
const express = require('express');
const app = express();
app.get('/' , function(req,res){
res.send('main page'); // '/'경로로 오게 되면 res 는 클라이언트에게 'main page'라고 응답을 해준다
});
app.get('/' , function(req,res){
res.send('main page');
});
간단하게 '/' 페이지로 들어왔네? 그러면 응답해줄께 여기는 main page 야
서버를 재시작 하면 main page라고 적혀 있는 걸 확인 할 수 있다
2. form.html
form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Node.js Test</title>
</head>
<body>
<form action="/form_get" method="get">
<div>
<input type ="text" name ="title">
<p><textarea name="textare"></textarea></p>
<input type="submit" >
<div>
</form>
</body>
</html>server.js
//url이 form 이면 form.ejs로 이동
app.get('/form' , function(req,res){
res.render('form');
});
조금 응용해보면 /form 으로 들어왔네? 그러면 응답 한다 form.html 보여주는 걸로
render 는 HTML 템플릿을 동적으로 생성하여 클라이언트에게 보여 줄때 사용
3.get
server.js
//form 에서 get 방식으로 데이터 전송 query
app.get('/form_get' , function(req,res){
var title = req.query.title; // 클라이언트에서 입력한 값을 쿼리 형식으로 가져온다 req 는 클라이언트에서 title값은 뭐라고 요청을 했음
var textare = req.query.textare;
res.send(title+','+textare);
});form.html 에 <form action="/form_get" method="get"> 폼 태그를 보면 /form_get 으로 이동 한다라고 표기 해줬음
res는 응답 req는 요청 이다
req.query.title; 요청한다 쿼리스트링 형식으로 타이틀변수를
말이 좀 그럴 수 있는데 간단하게 클라이언트에서 내가 입력한 타이틀값은 title라고 서버에 요청 했다 라고 생각해도 된다
from.html에 입력하고 submit를누르면 값이 서버로 넘어간 걸 확인 할 수 있다
4.post
const express = require('express'); //express 모듈 사용
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended :false})); // 폼 데이터 post방식 사용위해 미들웨어설정
//url이 form 이면 form.ejs로 이동
app.get('/form' , function(req,res){
res.render('form');
});
//form 에서 post 방식으로 데이터 전송 body
app.post('/form_post' , function(req,res){
var title = req.body.title;
var textare = req.body.textare;
res.send(title+','+textare);
});post방식은 이때 까지 app.get으로 넘겼는데 post로 바꾸면 되겠네 생각 할 수 있지만 반은 맞고 반은 틀리다
post방식으로 전송 하기 위해서는 bodyParser라는 모듈을 설치 해줘야 한다
npm install body-parser
설치가 됐으면 express 선언 하듯이 const bodyParser = require('body-parser'); 선언 해주고
app.use(bodyParser.urlencoded({extended :false})); app.use 명령어로 해당 모듈을 사용 하겠다 적어준다
get 방식에서는 req.query.title 사용 하였지만 post 방식에서는 req.body.title 변경 해준다
또한 form.html 에 <form action="/form_post" method="post"> form 태그에 있던 값도 당연히 변경 해줘야 한다
from.html에 입력하고 submit를누르면 값이 서버로 넘어간 걸 확인 할 수 있다
5.get,post 차이
둘다 클라이언트에서 요청한 값을 서버로 가져온다는 개념은 똑같다
하지만 get 방식은 url창에 입력한 값이 다 보이게 되고 post방식은 보이지 않게 된다
그러면 어떤 상황에서 get,post 를 사용해야 될까?
- GET: 데이터를 요청하는 데 사용됩니다. 주로 데이터를 서버로 보내지 않고, 서버로부터 데이터를 가져올 때 사용됩니다. 주로 데이터를 검색하는 데 사용됩니다.
- POST: 데이터를 서버로 보내기 위해 사용됩니다. 주로 데이터를 서버로 제출하거나 업데이트하는 데 사용됩니다. 주로 데이터를 생성 또는 변경하는 데 사용됩니다
사용 하는 목적이 다르긴 하다 간단하게 말하면 회원가입,로그인을 할 때 정보를 노출하면 안된다 그러면 post를 사용한다
물품정보,url에 정보가 필요하다 하면 get 방식을 사용한다 post가 보안면에서 좋아서 다 post만 사용하면 안된다
전송속도는 get이 빠르기 때문에 다 post로 설정하면 해당 웹페이지는 사용하기 힘들다
반응형
'nodejs' 카테고리의 다른 글
| Error: ER_HOST_IS_BLOCKED: Host '192.168.5.5' is blocked because of many connection errors; (0) | 2023.10.24 |
|---|
댓글 영역