먼저 Form 전송을 하기 전에 사전 작업을 해주면 편한 것이 있다.
body-parser 라는 라이브러리인데 설정해 두면 후에 post 방식으로 form 전송 시 훨씬 편하게 작업할 환경이 구축된다.
Body-parser
- 데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리
- post로 정보를 전송할 때 body로 받을 수 있게 도와준다.
- 아래와 같이 app.js 에 선언해주면 된다.
app.use(express.urlencoded({extended: false}));
app.use(express.json());📔 Form
- 입력된 데이터를 한번에 서버에 전송하기 위해 사용됨.
- 속성 : action, name, target, method
- 구성요소 : input, select, textarea, button 등
1. Form 전송방식
✅ GET
-
데이터를 URL의 뒤에 ?를 붙여 전달
-
전송량에 제한이 있고, 사용자에게 데이터가 노출됨. URL 형식에 맞는 인코딩 필요
-
예시(GET)
✅ POST
- HTTP POST 요청은 클라이언트에서 서버로 전송할 때 추가적인 데이터를 body에 포함.
- 전송량에 제한이 없고, 사용자에게 데이터가 보이지 않음. (암호화는 안됨)
2. Form 사용방법
✅ method
- HTML의
<form>태그에 method="POST" 또는 method="GET"(기본값) 속성을 설정하여 사용할 수 있음.
✅ action
- form 으로 데이터 전송 시 데이터가 도착할 URL을 나타내줌
- ex) "/get" 으로 설정 시 localhost:8000/get 으로 데이터 전송
✅ button type
- button : 해당 버튼이 클릭할 수 있는 버튼임을 명시하며, 페이지를 이동하지 않고 보통 onclick 함수 선언 시 사용
- submit :
<form>action 속성에 지정한 위치로 페이지를 이동 - reset : 폼 데이터를 초기화 하는 버튼
3. Form 데이터 전송(Views/main.ejs)
<body>
<!-- GET 요청 -->
<div class="get">
GET 요청하기
<form method="get" action="/get">
<input type="text" name="name">
<input type="text" name="gender">
<button type="submit">전송</button>
<button type="reset">리셋</button>
</form>
</div>
=> input 값으로 홍길동, 남 을 입력해주면 다음과 같은 결과가 URL에 나타남.
=> localhost:8000/get?name=홍길동&gender=남
<!-- POST 요청 -->
<div class="post">
POST 요청하기
<form method="post" action="/post">
<input type="text" name="name">
<input type="text" name="gender">
<button type="submit">전송</button>
<button type="reset">리셋</button>
</form>
</div>
</body>
=> post는 URL에 개인 정보를 포함하지 않으므로 다음과 같이 나타남.
=> localhost:8000/post
4. 전송된 Form 데이터 받기(app.js)
app.get("/get", (req, res) => {
console.log(req.query);
});
app.post("/post", (req, res) => {
console.log(req.body);
});
- main.ejs(클라이언트) 에서 요청한 데이터를 app.js(서버) 에서 다음과 같이 받아줌.
- get 방식으로 전송한 데이터는 req.query로 받고, post 방식은 req.body로 받음.
생각 끄적이는 공간