node.js 및 express로 서버구축

출처

간단한 설치 및 내용은 이곳에 자세히 설명되어있다.

---

폴더 형태

• node_modules(자동 생성)
• data
  • data.json
  • db.js
• public
  • js
    ○ app.js
  • index.html
• index.js
• package.json (자동 생성)

---

/data/db.js

const fs = require('fs')
// data.json만 사용할 것입니다.
const path = __dirname + '/data.json'
const getData = _ => new Promise((resolve, reject) => {
  fs.readFile(path, 'utf-8', (err, data) => {
    err ? reject(err) : resolve(JSON.parse(data || null))
  })
})
const setData = data => new Promise((resolve, reject) => {
  fs.writeFile(path, JSON.stringify(data), 'utf-8', err => {
    err ? reject(err) : resolve()
  })
})
module.exports = {getData, setData}

---

/data/data.json

{
    "folder": [],
    "task": []
}

---

index.js

// 외부 모듈 import
const express = require('express')
const db = require('./data/db.js')
const app = express()
// middle ware 등록
app.use(express.json())  // request body를 사용하기 위함
app.use(express.static('public')) // static file을 사용하기 위함
// index page
app.get('/', (req, res) => {
  res.render('index') // index.html render
})
// folder
app.route('/api/folder')
  .get(async (req, res) => {
    const result = {success: true}
    try {
      const json = await db.getData()
      result.data = json.folder
    } catch (err) {
      result.success = false
      result.err = err
    }
    res.json(result)
  })
  .post(async (req, res) => {
    const result = {success: true}
    const folder = req.body.folder
    try {
      const json = await db.getData()
      json.folder = folder
      await db.setData(json)
    } catch (err) {
      result.success = false
      result.err = err
    }
    res.json(result)
  })
// task

app.route('/api/task')
  .get(async (req, res) => {
  const result = {success: true}
  try {
    const json = await db.getData()
    result.data = json.task
  } catch (err) {
    result.success = false
    result.err = err
  }
  res.json(result)
})


app.route('/api/task/:parent')
  .get(async (req, res) => {
    const result = {success: true}
    const parent = req.params.parent
    try {
      const json = await db.getData()
      list = []
      json.task.forEach((v, idx) => {
        if (v.parent === parent) {
          v.idx = idx
          list.push(v)
        }
      })
      result.data = list
    } catch (err) {
      result.success = false
      result.err = err
    }
    res.json(result)
  })
  .post(async (req, res) => {
    const result = {success: true}
    const task = req.body.task
    const parent = req.params.parent
    try {
      const json = await db.getData()
      task.parent = parent
      json.task.push(task)
      await db.setData(json)
    } catch (err) {
      result.success = false
      result.err = err
    }
    res.json(result)
  })
  .put(async (req, res) => {
    const result = {success: true}
    const task = req.body.task
    const idx = req.params.parent
    try {
      const json = await db.getData()
      json.task[idx] = task
      await db.setData(json)
    } catch (err) {
      result.success = false
      result.err = err
    }
    res.json(result)
  })
app.listen(3000)

---

index.js 코드분석

app.route('/api/folder') => get 메소드

app.route('/api/folder')
  .get(async (req, res) => {
    const result = {success: true}
    try {
      const json = await db.getData()
      result.data = json.folder
    } catch (err) {
      result.success = false
      result.err = err
    }
    res.json(result)		// response형태로 result에 모은 내용을 보낸다.
  })

http://127.0.0.1:3000/api/folder 로 접속 했을때의
get 메소드에서(가져오기)
try 메소드를 통해 db(const db = require('./data/db.js'))에 있는 파일을 json 변수에 가져오는데 해당 json의 folder 프로퍼티 부분만 result라는 결과의 data 프로퍼티로 가져오는 처리를 한다.

---

ex) 만약 db.js가 아래와 같다면
db.js

{
  "folder": [
    {"name": "첫번째 폴더입니다."}
  ],
  "task": []
}

http://127.0.0.1:3000/api/folder 에 접속하면 아래와 같이 folder프로퍼티만 data프로퍼티로 처리되어 나타난다.

---

app.route('/api/folder') => post 메소드

app.route('/api/folder')
  .post(async (req, res) => {
    const result = {success: true}
    const folder = req.body.folder
    try {
      const json = await db.getData()
      json.folder = folder
      await db.setData(json)
    } catch (err) {
      result.success = false
      result.err = err
    }
    res.json(result)
  })

---

post 메소드 실행을 위한 postman 사용하기

Post 메소드를 이용해 body부분에 raw에서 JSON 형태로 send를 한다.
(JSON 형태로 하지않으면 제대로 전달되지않아 오류뜬다!!!!!)

• send 후 결과

---

전달했던 folder부분 내용이 http://127.0.0.1:3000/api/folder를 확인하며 저장된것을 알 수 있다.

실제 db.js 파일에도 send 후에 데이터가 추가된 것을 알 수 있다.

---

app.route('/api/task/:parent') => get 메소드

• get메소드 : 가져와서 보여준다.

app.route('/api/task/:parent')
  .get(async (req, res) => {
    const result = {success: true}
    const parent = req.params.parent
    try {
      const json = await db.getData()
      list = []
      json.task.forEach((v, idx) => {
        if (v.parent === parent) {
          v.idx = idx
          list.push(v)
        }
      })
      result.data = list
    } catch (err) {
      result.success = false
      result.err = err
    }
    res.json(result)
  })

마찬가지로 db에 존재하는 task프로퍼티를 순회하며 같은 값을 list에 넣어주며 저장된 list를 result data프로퍼티 형태로 처리한다.

---

app.route('/api/task/:parent') => post 메소드

app.route('/api/task/:parent')
  .post(async (req, res) => {
    const result = {success: true}
    const task = req.body.task
    const parent = req.params.parent
    try {
      const json = await db.getData()
      task.parent = parent
      json.task.push(task)
      await db.setData(json)
    } catch (err) {
      result.success = false
      result.err = err
    }
    res.json(result)
  })

---

post 메소드 실행을 위한 postman 사용하기

마찬가지로 task안에 넣어서 send한다.

이를 확인해보면 추가된 것을 확인할 수있고

db.js에서 또한 해당 부분이 추가된 것을 알 수 있다.

---

app.route('/api/task/:parent') => put 메소드

app.route('/api/task/:parent')
  .put(async (req, res) => {
    const result = {success: true}
    const task = req.body.task
    const idx = req.params.parent
    try {
      const json = await db.getData()
      json.task[idx] = task
      await db.setData(json)
    } catch (err) {
      result.success = false
      result.err = err
    }
    res.json(result)
  })

수정하는 put 형태를 만든다.

---

put 메소드 실행을 위한 postman 사용하기

put 메소드를 통해 name 부분을 수정한 것을 send하였다.

해당 결과로 기존의 내용이 수정되었고

db.js 또한 마찬가지로 수정되었다.

put 메소드 그냥 사용하는 방법

fetch('http://localhost:3000/api/task/0',{
  method:"PUT",
  headers : {"Content-Type" : "application/json"},
  body : JSON.stringify({
  "task": {
    "name": "첫번째 task 또 또 jj수정",
    "state": true,
    "parent": "0",
    "idx": 0
  }
})
})

---

정리하기

• get은 가져와서 보여주는 역할(read) / post는 새로운 것을 서버에 추가하는 역할(create) / put은 수정하는 역할 (update)
• 해당 관련 코드는 Node.js에서의 express를 이용해 비교적 간단히 적는다.
• postman을 이용해 간편하게 AJAX를 작동시킬 수 있고 해당시 주의할 점은 body부분에서 JSON형태를 꼭 설정해야 정상적으로 동작한다.
• nodemon 이라는 project혹은 js파일을 실행시킬 때, 변화를 자동으로 감지하여 수정이 있으면 다시 재실행 해주는 패키지를 알고 있는것이 좋다.
• express로 사용한 코드들의 마지막엔 res.json(변수) 부분을 생각하고 있는 것이 좋다.