Node.js, Express, MongoDB - CRUD 게시판 만들기(1)

티스토리 뷰

nodejs

Node.js, Express, MongoDB - CRUD 게시판 만들기(1)

코딩하는 둥아 2020. 7. 11. 16:16

728x90

node js의 express, MongoDB를 사용해서 CRUD 게시판을 만들어보자.

이 게시물은

https://zellwk.com/blog/crud-express-mongodb/

사이트를 참고하여 쓰여졌습니다!

CRUD - Create Read Update Delete

우선적으로 node js의 설치가 되어 있어야 한다.

터미널에서 node -v 명령어를 통해 버전을 체크해보자!

<기본 세팅>

1. 작업을 진행할 디렉토리를 하나 만든다.

2. npm init 명령어를 통해 package.json 파일을 생성한다.

모두 enter를 치면 default값으로 세팅되어 파일이 생성된다.

3. touch server.js 명령어를 통해 파일을 생성한다

안에 console.log('May Node be with you') 를 넣어준다.

4. node server.js 명령어로 파일을 생성한다

그러면 터미널 상에 'May Node be with you'문구가 출력된다!

'npm install express --save'

이 명령어를 통해 express를 설치할 수 있다.

실시한 후 package.json을 살펴보면

// package.json
"dependencies": {
    "express": "^4.17.1"
}

가 생긴것을 볼 수 있다.

<server.js>

const express = require('express');
const app = express();


// server와 browser가 연결될때까지 기다리는 것
app.listen(3000, function() {
        console.log('listening on 3000')
})

node server.js를 실행하면 console에 'listening on 3000'이라는 문구가 나온다.

그리고 localhost:3000에 접속하면

게 뜨는 것을 확인할 수 있는데, 이것은 브라우저를 통해 express와 통신할 수 있는 상태를 의미하므로 정상적인 결과이다!

--> serverd에서 browser에 아무것도 보내지 않았기 때문에 나오는 결과이다

<CRUD - READ>

Express에서, get method를 통해 GET request를 다룰 수 있다.

app.get(endpoint, callback)

endpoint: domain name 다음에 붙는 value

ex) https://zellwk.com/blog/crud-express-mongodb/
이 경우, domain name은 zellwk.com이 되고,

requested endpoint는 zellwk.com 뒤에 따라오는 /blog/crud-express-mongodb가 되는것이다!

callback: requested endpoint와 맞았을 때 서버가 무슨일을 할 지를 말해준다.

two argument 필요로 함 --> request object와 response object

// 두가지는 동일한 일을 수행하는 코드이다
app.get('/', function(req, res) {
	res.send("Hello World")
})

app.get('/', (req, res) => {
	res.send ("Hello World!")
})

// <server.js>를 바꿔보자!
// sendFile method를 통해 index.html파일로 연결하자
app.get('/', (req, res) => {
	res.sendFile(__dirname + 'index.html')
})

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MY APP</title>
</head>
<body>
  <h1> May Node and Express be with you. </h1>
</body>
</html>

localhost:3000에 접속하면 index.html의 내용이 나오는 것을 확인할 수 있다!

server를 자동적으로 다시 시작해주는 프로그램

npm install nodemon --save-dev

package.json file에

"scripts": {

"dev": "nodemon server.js"

}

를 추가해주면 nodemon server.js로 자동 실행할 수 있다!

실행 방법

npm run dev를 실행하면 자동으로 nodemon server.js를 실행된다.

<CRUD - CREATE>

서버에 POST request를 보낼때 우리는 브라우저에서 CREATE 작업을 수행할 수 있다

--> JavaScript나 <form> tag를 통해 post request 가능!

<form> 방법

action attribute
- 어디에 POST request를 보낼것인가?
- 이 예시의 경우 /quotes에 보내는 것
method attribute
- 어떤 방식으로 send request를 브라우저에 보낼 것인가?
name attributes on each <input> element

// index.html에 추가할 내용

<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>

// server.js에 추가할 내용
app.post('/quotes', (req, res) => {
	console.log("Hellooooooooo")
})

index.html의 form에 내용을 submit 하면 터미널에 Hellooooooo 문구가 출력된다!

npm install body-parser --save

middleware를 의미함.

crud handler앞에 body-parser를 둬서, 정보를 사용하기 쉽게 가공함

const bodyParser= require('body-parser')

app.use(bodyParser.urlencoded ({extended: true}))

app.get()~~
app.post~~

urlenconded method: <form>에서 데이터를 추출해 request object에 추가하는 역할

--> 이제 <form> element의 내용을 req.body에서 볼 수 있다!

여기까지의 최종적인 server.js와 index.html의 전체 코드이다.

// <server.js> 전체 코드
const express = require('express');
const app = express();
const bodyParser= require('body-parser')

// server와 browser가 연결될때까지 기다리는 것
app.listen(3000, function() {
        console.log('listening on 3000')
})


// body-parser
app.use(bodyParser.urlencoded({ extended: true }))


// crud handlers
// sendFile method를 통해 index.html파일로 연결하자
app.get('/', (req, res) => {
        res.sendFile(__dirname + '/index.html')
})

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


// <index.html> 전체코드
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MY APP</title>
</head>
<body>
  <h1> May Node and Express be with you. </h1>

        <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>
</body>
</html>

다음 포스팅에서는 MongoDB의 사용법에 대해 알아볼 것이다! :D

728x90

'nodejs' 카테고리의 다른 글

sqlite, Node.js, Express를 이용한 CRUD게시판 만들기 (2)	2020.07.16
Node.js, Express, MongoDB - CRUD 게시판 만들기(2) (0)	2020.07.13

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

코딩 일기장

티스토리 뷰