[포스코x코딩온] 웹 풀스택 과정 5주차 회고 | Form 전송

※ 정보를 요청하는 쪽이 '클라이언트', 정보를 제공하는 쪽이 '서버'

form 전송

📌 form

form 이란, 클라이언트가 서버에 (사용자가 입력한) 데이터를 전송하는 방법으로, 속성 action, method 으로 각각 "데이터를 전송할 서버의 url"과 "전송하는 방식"을 지정할 수 있다.

form 태그 내에 입력받고자 하는 input 태그를 위치시킨다.

🚩 form 속성

• action: 사용자가 입력한 데이터를 전송할 서버의 url을 지정한다.
• method: 사용자가 입력한 데이터를 전송하는 방법을 지정한다. 전송 방법은 get, post가 있다.

<form action = "/getForm" method = "get">
  // /getForm 경로로 get 방식으로 데이터를 전송한다.
	<input type = "text">
</form>

• name: 폼을 식별하기 위한 이름
• target: action 속성값에 지정한 스크립트 파일을 다른 위치에서 열 수 있도록 한다. (_blank, _self)

🚩 get

• url에 파라미터 형태로 정보가 담겨 전송된다.
• url로 정보가 확인되기 때문에, password 같은 개인정보는 get방식으로 전송하면 안된다!

🚩 post

• url 상에서 정보가 표시되지 않는다.
• body에 담겨서 전송된다. (→ body-parser 미들웨어를 통해 body 받을 수 있음)

📌 form 정보 받기

• get 요청받은 경우, req.query 으로 전달받은 query string을 가져온다.

app.get("/getForm", (req, res) => { ///getForm 경로로 get 요청을 받았을 때
  	console.log(req.query);
})

• post 요청받은 경우,
  (i) 전송된 body 값을 받아올 수 있는 미들웨어(body-parser)을 설정해준다.
  (ii) req.body로 전달받은 body를 가져온다.

// body-parser
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// req.body
app.post("/postForm", (req, res) => { //postForm 경로로 post 요청을 받았을 때
	console.log(req.body);
})

• 객체로 저장하여 결과 페이지에 데이터를 추가할 수 있다.

node.js에서 정보를 전달받아, 객체로 저장하여 결과 페이지에 뜨도록 하는 전체 과정을 하나하나씩 정리하면서 보면 다음과 같다. (가독성을 위해 캡쳐함)

: express로 서버를 구축하기 위해 express() 호출하고, PORT 설정을 한다.

: body-parser(미들웨어)를 설정하고, ejs 사용을 위해 view engine을 설정한다.

: (i) /경로로 요청을 받았을 때, ./views의 index.ejs와 데이터(title: "폼 실습")를 렌더링한다.

 

※ userInfo: req.query 또는 userInfo: req.body와 같이 객체로 저장되어, 원하는 데이터를 userInfo.id, userInfo.pw 같은 형태로 뽑아 쓸 수 있다. (input 태그에서 설정해둔 name이 key 값으로 들어간다.)

 

  (ii) /getForm 경로로 get 요청을 받았을 때, 전달받은 정보(req.query)를 콘솔창에 띄운다. (제대로 정보 전달받았는지 확인하기 위해, 이 과정 필요!) & result.ejs와 데이터를 렌더링한다.

 

  (iii) /postForm 경로로 post 요청을 받았을 때, 전달받은 정보(req.body)를 콘솔창에 띄운다. & result.ejs와 데이터를 렌더링한다.