[Node.js] Express와 MongoDB를 이용한 CRUD 프로젝트 - (2)

https://dev-raeun.tistory.com/26

저번시간이어서 진행!

[Server] Express와 MongoDB를 이용한 CRUD 프로젝트 - (1)

CRUD - CREATE

서버로 POST요청을 보낼때, 브라우저에서 CREATE 작업을 수행함

자바스크립트의 <form> tag를 이용하여 post request 가능

POST request를 보내려면 index.html 파일에 <form>을 추가하면 된다.

FORM 요소

• action attribute : 어디에 보낼것?
• method attribute : 어떻게 보낼것?
• name attributes on each <input> elements within the form

백문이 불여일견임,,!

index.html에 다음과 같은 <form> 형식을 써주자

<form action="/quotes" method="POST">
  <input type="text" placeholder="name" name="name">
  <input type="text" placeholder="quote" name="quote">
  <button type="submit">Submit</button>
</form>

• 첫번째 줄의 method: 우리가 어떤 형식의 요청을 보낼지 브라우저에게 알려준다.
  • 지금 우리 코드에선 ‘POST’ 요청을 보내고 있다
• 첫번째 줄의 action: 해당 속성은 브라우저가 어디로 ‘POST’ 요청을 보내야하는지 알려주고 있다.
  • 지금 우리 코드에서는 ‘/quotes’ 로 ‘POST’ 요청을 보내고 있다

우리는 위의 POST 요청을 server.js의 ‘POST’ 방법으로 처리할 수 있고, action 속성에는 경로를 나타내면 된다. server.js 에 다음과 같은 코드를 추가해주자.

app.post('/quotes', (req, res) => {
  console.log('안녕 quotes 페이지에 온걸 환영해!')
})

해당 칸에 ‘아무말’이나 적고 submit을 눌러보자.

누를 때 마다, 미리 써둔 것이 뜨는 것을 확인 할 수 있다.

자, 그럼 지금까지 Express가 어떻게 form을 다루는지 배웠다!

그렇다면 우리가 입력한 그 ‘아무말’은 어떻게 얻을 수 있을까?

Express는 <form>만으로는 ‘아무말’ data를 읽어들일 수 없다.

body-parser

body-parser라고 불리는 또다른 패키지를 설치해줘야 한다.

npm install body-parser --save

body-parser은 middleware이다.

이것은 request 객체를 사용하기 전으로 tidy up (= clean up) 할수 있게 도와준다.

이 middleware를 사용하려면 Express에서는 ‘use’ method를 사용하면 된다!

const express = require('express') //express 쓸게
const bodyParser= require('body-parser') //middleware 쓸게
const app = express() 

// Make sure you place body-parser before your CRUD handlers!
app.use(bodyParser.urlencoded({ extended: true }))

// All your handlers here...
app.get('/', (req, res) => {/*...*/})
app.post('/quotes', (req, res) => {/*...*/})

‘body-parser’내의 ‘urlencoded’ method는 ‘body-parser’가 <form>의 data를 추출하고, 이 data들을 request 객체의 body 속성에 더할 수 있게 해줌.

우리는 아까 형식에 맞춰서 이렇게 써준다.

그렇다면, 이제 req.body 안의 form요소들의 값을 볼 수 있다는 소리다.

server.js의 코드도 이렇게 바꿔주면 된다.

//server.js

app.post('/quotes', (req, res) => {
  console.log(req.body)
})

node를 재실행하고, form에 아무거나 입력해보고 console.log가 어떤지 확인해보자.

여기까지 아주 잘보인다. CREATE 까지도 완성이랍니다.

이제 다음엔 MongoDB와 연동하여 이 data를 index페이지에 나타내보자! 미니 게시판을 꾸려봅시다.

 

https://dev-raeun.tistory.com/28

[Node.js] Express와 MongoDB를 이용한 CRUD 프로젝트 - (3) Express, MongoDB 연동, CREATE