Nodejs CRUD보드 만들기 [1]

Nodejs CRUD보드 만들기 [1]

nodejs와 mongoDB로 가볍게 만들어서 원리를 파악하려고 한다.

다른 블로그를 많이 참조해서 내 나름대로 각색하였다.

https://peachsoong.tistory.com/19?category=880414 https://zellwk.com/blog/crud-express-mongodb/

여기서는 express, mongoDB, ejs를 사용한다.

먼저 폴더를 하나 생성한다. 그 후에 터미널을 실행해 다음 문장을 입력하여 초기 설정과 express를 설치한다.

npm init -y npm install express

설치가 정상적으로 완료됐다면 package.json이 생성되고 그 파일의 dependecies에 다음과 같이 입력되어 있다.

"dependencies": { "express": "^4.17.1", },

이제 클라이언트의 요청을 처리하기 위한 server.js 파일을 생성해준다. 그 후 다음 문장을 입력한다.

//server.js const express = require('express'); const app = express(); app.listen(3000, function() { console.log('listening on 3000') })

require을 통하여 express 모듈을 불러온다.

그 후에 라이브러리가 정상작동 하는지 확인하기 위하여 3000포트로 설정하고, 터미널에 메세지를 출력해본다.

서버를 실행시키려면 다음 문장을 입력한다.

node server.js

그러면 터미널에 "listening on on 3000"이 출력되는 것을 확인할 수 있다.

이 후에 인터넷 브라우저를 실행하여 localhost:3000에 접속하면..

다음과 같이 나타난다. server.js에서 클라이언트에게 아무 것도 보내지 않았기 때문에 나타나는 당연한 결과이다.

그럼 이제부터 한번 클라이언트와 서버가 상호작용 하도록 만들어보자.

READ

먼저 express의 get 메소드를 사용하여 GET request를 다뤄보자.

//server.js const express = require('express') const app = express() app.listen(3000, function() { console.log('listening on 3000...') }) app.get('/', (req, res) => { res.send("hello world") })

get 메소드에 첫번째 인자로 endpoint를 넣어주고, 뒤에 콜백 함수를 넣어준다.

이후 다시 서버를 실행시키면 ..

이렇게 떴다면 정상적으로 작동한 것 이다.

이제 이것을 활용하여 클라이언트에게 html 파일을 보낼 수 있다.

현재 경로에 새로운 파일 index.html을 하나 만든다.

//index.html Document hi hello

그리고 server.js의 get 메소드 부분을 Index.html을 응답으로 보내도록 수정한다.

//server.js const express = require('express') const app = express() app.listen(3000, function() { console.log('listening on 3000...') }) app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html') })

__dirname이란 nodejs에서 현재 파일만을 제외한 절대 경로를 나타내는 변수다.

예를 들어, a/b/c.js 이란 구조가 있을 때, c.js에서 __dirname을 호출하면 __dirname은 a/b가 된다.

이제 다시 서버를 실행하면 ,,

이렇게 떴다면 성공이다.

지금까지 한 것을 정리하자면, 클라이언트가 서버에게 localhost:3000/ 요청을 보내고,

우리가 작성한 서버 코드에는 / 에 오는 get request를 받았을 때, index.html을 보내라고 작성해놓았기 때문에 클라이언트에게 index.html을 전송한다.

CREATE

다음은 POST request를 다뤄보자.

POST request를 서버에 보내서 우리는 create 작업을 할 수 있다.

먼저 html의 form을 이용하여 값들을 받아보자.

//index.html Document hi hello Submit

위와 같이 index.html을 수정해준다.

클라이언트는 post나 put request를 이용하여 위에 작성한 것 처럼 body를 포함하여 보낼 수 있는데,

express에서 body를 파싱해서 해석할 때 미들웨어가 필요하다. 그것이 body-parser 모듈인데....

자세한 정보는 이 블로그에 있으니 참조바란다.

https://velog.io/@yejinh/express-%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4-bodyParser-%EB%AA%A8%EB%93%88

이 body-parser 모듈은 nodejs 특정 버전 이상에서는 기본적으로 내장되어 있다.

nodejs를 최신으로 깔면 body-parser 모듈을 npm을 이용하여 따로 설치할 필요가 없다 !

나는 body-parser 모듈이 내장되어 있다는 전제로 코드를 작성하겠다.

//server.js const express = require('express') const app = express() app.use(express.urlencoded({ extended: true })) app.listen(3000, function() { console.log('listening on 3000...') }) app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html') }) app.post('/quotes', (req, res) => { console.log(req.body) })

위와 같이 작성해주고 서버를 실행하면..

그리고 값을 입력해준 뒤 submit을 누르면,

위와 같이 출력되는 것을 볼 수 있다.

정리하면, 클라이언트가 post request를 이용하여 body를 담아 서버의 localhost:3000/quotes에 전송한다.

서버는 코드에 작성된대로, req.body를 미들웨어를 사용하여 파싱 후 출력해준다.

다음 글에서는 여기에 mongoDB를 추가하여 create update delete 3가지 동작을 수행해보겠다.

from http://smgthings.tistory.com/8 by ccl(A) rewrite - 2021-08-19 17:00:04