[Node.js/ Express] 간단한 CRUD 작업해보기

오늘은 express를 통해서 간단한 crud 작업을 해볼 예정이다.
crud란 create, read, update, delete
서버 입장에서 post, get, put, delete 를 생각하면 된다.

우선 express 서버를 하나 만들어보자.

const dotenv = require('dotenv')  //.env파일에 접근하기 위한 모듈
dotenv.config() //.env파일에 접근가능. 

const express = require('express') 
const morgan = require('morgan') //서버 요청을 쉽게 확인할 수 있는 모듈

const app = express() 
app.set('port', process.env.PORT || 3000) //port라는 전역변수? 생성. env파일에 PORT 정해져있지 않으면 default 3000
app.use(morgan('dev'))   				  
app.get('/', (req, res) => {res.send("메인화면입니다")}) 
app.listen(app.get('port'), () => {console.log(`서버 ${app.get('port')}번 포트에서 연결됨) 

다음과 같이 간단한 서버를 만들어보았다.
.env 파일에 PORT가 지정되어있지 않으므로 3000번 포트에 연결되었다.
서버 연결에 성공하면 콘솔에 서버 3000번 포트에서 연결됨 이 로깅될 것이다. localhost:3000 에 접속하면 메인화면입니다 라는 문자열이 보일 것이다.

Get

get 요청은 위에서도 해보았지만 이는 문자열(html)을 보여주는 get요청에 불과했다. 이번에는 데이터를 가져오는 get요청을 진행해보자. db가 없으니 직접 만들어보자.

const housedata = [
  { 
	id: 1, 
    owner: "홍길동",
    builtyear: 2001, 
    description: "빨간 벽돌로 지어진 집" 
  }, 
  { 
  	id: 2, 
    owner: "철수",
    builtyear: 1998, 
    description: "녹물 나오지만 시세는 비싼 집"
  }
]    

집과 관련된 데이터를 직접 만들어보았다.
localhost:3000/houses라는 url로 접속했을때 클라이언트가 해당 데이터를 볼 수 있도록 해보자. 맨 위 서버 코드를 수정하자.

...(중략)
const app = express()
app.set('port', process.env.PORT || 3000) 
app.use(morgan('dev')) 

app.get('/', (req, res) => {res.send("메인화면 입니다")}) 

app.get('/houses, (req, res) => {res.send(housedata)}) //위에서 만든 데이터 보냄. 

app.listen(app.get('port'), () => {console.log(`서버 ${app.get('port')}번 포트에서 연결됨)

postman에서 url을 접속하면 다음과 같은 결과가 나온다.

그렇다면 이번엔 url뒤에 id를 붙였을 경우 해당 id 에 관련된 자료만 send해보자.

app.get('/houses/:id', (req, res) => {
	const correctdata = housedata.find( house => house.id === parseInt(req.params.id)) 
    
    if (!correctdata) {
    	res.status(404).send("해당 id의 데이터를 찾을 수 없습니다") 
    } else {
    	res.status(200).send(correctdata)
    }
})

id가 없을 경우 404 오류를 띄우며 데이터를 찾을 수 없다는 문자열을 보여주고, id가 있으면 해당 데이터를 추출하여 보여준다. parseInt를 쓴 이유는 req.params.id가 숫자가 아닌 문자이기 때문이다.

localhost:3000/houses/1 의 결과를 보자.

id가 1인 집의 데이터가 성공적으로 보여진다.
다음은 id가 3인 결과를 보자.

id와 관련된 데이터가 없으므로 오류 메시지가 뜬다.
다음은 post 작업을 해보자.

POST

post는 req.body에서 데이터를 가져오기 때문에 서버단에서 이를 해석해주어야한다. json 형식의 데이터를 해석해주는 express.json()을 사용 해야한다. 

app.use(morgan('dev')) 뒤에
app.use(express.json())을 추가하자. 

housedata에 req.body에서 받아올 데이터를 추가해보자.

app.post('/houses', (req, res) => { 
    const newdata = {
        id: housedata.length+1,
        owner: req.body.owner,
        builtyear: req.body.builtyear, 
        description: req.body.description
    }

    if(!req.body.owner || !req.body.builtyear || !req.body.description){
        res.status(404).send("필수 데이터가 없습니다")
    }
        housedata.push(newdata)
        res.status(200).send("데이터가 저장되었습니다")
    
})

body에서 보내는 데이터 중 owner, builtyear, description 등이 없으면 404, 필수 데이터가 누락되었다는 문자열을 보내고 모두 있다면 데이터를 저장한다.

영희의 집에 대한 데이터를 다음과 같이 json 형태의 파일로 보내면, 데이터가 저장되었다는 문자열을 볼 수 있다.

그리고 나서, get을 통해 해당 데이터를 열람해보자. 위에
app.get('/houses', ... 중략) 을 통해 데이터를 받아왔었다. 동일한 작업을 하면

다음과 같이 영희의 데이터가 housedata에 추가된 것을 볼 수 있다.
다음은 put 작업을 해보자.

PUT

post가 완전한 데이터를 생성해주는 역할을 한다면 put은 데이터를 수정하는 역할을 한다.
데이터를 수정하는 코드를 다음과 같이 짜보았다.

app.put('/houses/:id', (req, res)=> {
    const correctdata = housedata.find( house => house.id === parseInt(req.params.id)) 
    
    if (!correctdata) {
    	return res.status(404).send("해당 id의 데이터를 찾을 수 없습니다") 
    } 

    for (key in req.body) {
        correctdata[`${key}`] = req.body[`${key}`] 
    }

    housedata[parseInt(req.params.id)-1] = correctdata
    res.send("데이터를 성공적으로 수정하였습니다.")
})

우선 post때랑 동일하게 housedata로 부터 해당 id의 데이터가 있는지 확인하고 없으면 404(에러)를 띄운다.
만약 correctdata (우리가 수정하고자 하는 데이터)가 있으면 해당 데이터의 각 항목 값을 req.body에 실려온 수정사항으로 바꾼다.

req.body에 for 문을 쓴 이유는, req.body에 들어있는 항목만 바꿔주기 위해서이다.
해당 라우터를 통해 id: 1 인 홍길동의 데이터를 바꿔보자.

알고보니 '홍길동'의 집이 2001년이 아닌 1998년에 지어졌다고 하며, 빨간 벽돌이 아니라 회색 벽돌로 지어진 집이었다고 해보자.

성공적으로 데이터가 바뀌었음을 알 수 있다. 그렇다면 마지막으로 delete를 통해 데이터를 삭제해보자.

Delete

delete는 비교적 간단하다. javascript의 splice 메서드를 통해 작업을 진행해보았다.

app.delete("/houses/:id", (req, res)=> {
    const correctdata = housedata.find( house => house.id === parseInt(req.params.id)) 
    
    if (!correctdata) {
    	return res.status(404).send("해당 id의 데이터를 찾을 수 없습니다") 
    } 

    housedata.splice(parseInt(req.params.id)-1,1)
    res.send("데이터를 성공적으로 삭제했습니다")
})

위와 마찬가지로 해당 id가 있는 데이터를 찾고 없으면 에러를 반환한다. 해당 id가 있는 데이터를 원본(housedata)에서 삭제해주었다.

delete : localhost3000/houses/1 을 실행하였더니 홍길동의 집에 대한 데이터를 사라지고 철수와 영희의 데이터만 남았다.

결론

파이어베이스로 어플의 백엔드를 구현시켜놓아서 백엔드의 경험이 전무했는데
노드와 express 를 사용하여 직접 데이터를 가공해보니 나름 흥미가 생기는 것 같다.
아직 초보지만 얼른 배워서 실무에 적용시켜보고 싶다. 달려보자~!!