<form action="/add" method="post">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">할일</label>
<input type="text" class="form-control" name="title">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Due date</label>
<input type="text" name="date" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>🔍 form 태그에서 action 속성
form 태그에서 action 속성은 form 태그에 입력된 내용을 처리하는 서버의 URI를 지정하는 역할을 한다.
만약에 / 라고 지정했다면 app.post('/',()=>{}), 위처럼 /add 라고 지정했다면 app.post('/add',()=>{}) 식으로 작성하면 된다.
🔍 form 태그에서 method 속성
form 태그에서 method 는 정보를 어떤식으로 전송할것인지 결정하는 역할을 한다.
GET 속성은 get 요청, post는 post 요청이라고 생각하면 된다.
위에서는 즉 /add 경로로 post 요청을 전송한다고 생각하면 된다.
🔍 form 태그에서 name 속성
form 태그에서 name 속성은 한 문서에 여러개의 form 이 있을 경우에 그 form 들을 구분짓기 위해서 사용한다.
🔍 input 태그에서 name 속성
또한 input 태그에서 name 속성도 필요한데, form 태그가 여러개 있을때 name 으로 구분짓듯이, input 도 여러개일테니 name 속성을 이용해서 구분한다.
// 노드 코드
app.get('/write', (req, res) => {
res.sendFile(path.join(__dirname, '/write.html'));
})
app.post('/add', (req, res) => {
res.send('전송 완료');
})이제 저 write 페이지에서 폼 전송을 add 로 하면 전송 완료라는 문구가 띄어진다.
만약에 form 안에 있는 input 들의 내용을 적고 서버에 post 요청을 전송한다면, input 의 내용들은 어디로 가는것일까 ?
app.post('/add', (req, res) => {
//res가 응답을 해주는거라면, req 안에 요청에 대한 내용이 들어가있다.
})body-parser 미들웨어가 요청의 본문에 있는 데이터를 해석해서 req.body 객체로 만들어주는 것이다.
원래 body-parser 를 따로 설치해야했지만, 21년 이후의 프로젝트들은 express 안에 body-parser 가 내장되어 있으므로 따로 설치해줄 필요가 없다.
보통 폼 데이터나 AJAX 요청의 데이터를 처리한다.
🔍 body-parser 사용전 세팅
app.use(express.json());
app.use(express.urlencoded({ extended : false}));JSON은 JSON 형식의 데이터 전달 방식이고, urlencoded 는 데이터를 보내는 방식이다.
form 전송은 URL-encoded 방식을 주로 사용한다.
extended 가 false 일때는 querystring 모듈을 사용하여 쿼리스트링을 해석하고, true 면 qs 모듈을 사용하여 쿼리스트링을 해석한다.
qs 모듈은 내장 모듈이 아니라 npm 패키지이고, querystring 에서 조금 더 확장한 모듈이다.
🔍 querystring 모듈 이란?
기존 노드의 url 을 사용할때 search 부분을 사용하기 쉽게 객체로 만드는 모듈이다.
기존 사이트들을 보면
https://comic.naver.com/webtoon/detail?titleId=758037&no=106&weekday=mon메인 주소 뒤에 detail? titleID = 이런식으로 구분이 되어있는것처럼 보이는데,
querystring 은 사용자가 입력 데이터를 전달하는 방법중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다.
저 주소를 querystring 모듈이 객체화 해주는 것이다.
🔍 urlencoded 란?
HTTP 통신을 할때 데이터를 인코딩 하는 방식이다.
인코딩 방식은 요청을 할때, enctype 에 따라서 결정된다.
- enctype 3가지
1. application/x-www-form-urlencoded
<form action="/add" method="post" enctype="application/x-www-form-urlencoded"> </form>"URL encoded form"을 의미한다. enctype 을 따로 명시하지 않으면 디폴트 값으로 지정된다.
2. multipart/form-data
<form action="/add" method="post" enctype="multipart/form-data"></form>보통 파일 업로드를 할때 사용되는 타입이다.
3. text/plain
<form action="/add" method="post" enctype="text/plain"></form>단순 문자열이다. HTML5 부터 도입되었다.
만약에 JSON 형식으로 { name : "BRGNDY", age : "male"}을 본문으로 보낸다면, req.body 에 그대로 들어간다.
만약에 URL-encoded 형식으로 name=BRGNDY&age=male 를 본문으로 보낸다면, req.body에는
body-parser 가 알아서 객체화를 해주어서 { name : "BRGNDY", age : "male"} 로 들어간다.
🔍 form 전송 하기
app.post('/add', (req, res) => {
res.send('전송 완료');
console.log(req.body);
})
위에 input 창들에 name을 정해준곳에 입력한 값들이 콘솔창에 나타나는것을 볼 수 있다.
