.post() method 연습해보기

.post() method를 이용해 주어진 회원가입 폼의 내용들을 첫째주에 만들었던 자신의 페이지에 보내보고 그 결과를 페이지에 나타내보세요.

1. 우선 가장 먼저해야할 일은 html을 수정해야 합니다. 폼에 method, action 태그를 추가해서 어떤식으로 데이터를 보내야할지 정해줍니다. 일단 그대로 따라해주세요.

2. 이후에 해야할 일은 각각의 input에 name태그를 설정해줘야합니다. name태그의 이름은 아무거나 상관없습니다.

3. 그럼 결과적으로 Sign Form의 HTML 모습은 이것과 비슷한 모습일 것입니다.

4. 간단하게 의미를 설명하면, 각각 name이 설정된 input값을 /vanns/signForm 이라는 URL에 POST 방식으로 보내준다는 것입니다.

5. 그럼 이제 app.js를 확인해볼까요? 일단 그대로 따라해주세요.

//* app.js *//		
app.post('/vanns/signForm', admin.vannsSignForm)

6. 간단하게 설명하자면, /vanns/signForm 이라는 URL에 POST 방식으로 routes폴더안의 admin.js파일의 vannsSignForm이라는 이름의 function을 실행시켜주라는 의미입니다. app.get이 아닌 app.post인 것을 주의해주세요!

7. 그럼 이제 routes폴더의 admin.js 파일을 확인해 볼까요?

//* routes/admin.js *//
exports.vannsSignForm = function (req, res) {
    var user = {
        name: req.body.name,
        email: req.body.email,
        password: req.body.password
    };         
  res.render('./vanns/vannsIntro', user);
};

8. 뭔가 복잡하죠? 일단 아까전의 HTML에서 포스트 해주었던 것이 어떤식으로 돌아갈까를 생각해야 합니다. 일단 여기서 중요한것은 req 즉, request입니다. req.body.email의 의미는 전에 HTML의 폼에서 name태그에 email로 지정해주었던 input값을 request 즉, 요청한다는 의미입니다. 물론, 우리는 input이 name, email, password 3개였으니 3개를 요청해주면 됩니다.

9. 이를 user라는 변수로 선언해줍니다. 일반적으로 위와 같은 방식으로 정의하는 것을 json방식이라고 하는데 이는 나중에 설명하도록 하겠습니다. 마지막으로는 지난시간에 배웠던 render를 통해 데이터와 함께 페이지를 그려주는 것입니다. 이제 "기본주소/vanns/signForm"에 접속하면 view폴더의 vanns안의 vannsIntro.html이 방금전 지정해주었던 user라는 데이터와 함께 보여지게 됩니다.

	
 {{ name }} 
	
 {{ email }} 
	
 {{ password }} 

10. 이제 마지막으로 결과물을 출력해볼까요? 이제 view폴더안의 vannsIntro.html에 name, email, password을 {} 2개 중첩해서 입력하고 Submit 해보세요!
그럼 이제 폼에 입력했던 내용이 첫째주에 만들었던 페이지에 나타날것입니다. 이러한 방식은 swig engine을 이용한 방식인데 이는 차후에 설명하도록 하겠습니다.

※ 이 내용은 node.js, mongoDB 스터디페이지 codeMembersPage에서 진행되는 내용을 정리한 것입니다. 모든 저작권은 본인에게 있으며 상업적 이용, 컨텐츠 변경 가능하며 저작자 표기만 해주시면 됩니다.