<C.R.U.D>

강민수·2021년 12월 15일

백엔드

목록 보기

10/21

이번 시간에는 c.r.u.d라는 것에 대해 한 번 살펴보고자 한다.

c.r.u.d는 용어만으로 보면,

create, read, update, delete의 의미다.

즉, 한국말로 만들고, 읽고, 정보를 갱신하고 삭제한다는 것이다.
물론, 이렇게 추상적으로만 말하면 못 알아먹는다. 그래서 이게 왜 필요한 지에 대해서부터 한 번 살펴보고, 이후 이에 대해 한 번 코드 상의 구현 방식에 대해 간단한 예제로 살펴보겠다.

1) 필요성?

일단, 백엔드적인 관점에서 보면 대개 api통신을 하면서 해당 데이터 베이스를 만지게 된다. 즉, 백엔드의 일련의 과정중 아주 큰 부분이 db가 필요한 경우 만들고 또 그걸 쓸수 있게 만들어 주고, 한 편으로는 정보의 변화에 따라 주기적으로 최신 업데이트를 해줘야 만 한다. 이를 통해 더 필요하지 않은 정보의 경우 삭제하는 과정까지 필요하다.

이제 이해가 되는가? 결국 백엔드 개발자가 해야할 일련의 db 상의 모든 과정을 통칭하는 것이 crud라는 사이클이다.

2)crud의 적용 예시.

대표적인 예시중 하나로 웹툰 사이트를 하나 들고 왔다.

우리가 흔히 아는 네이버 웹툰이다. 해당 웹사이트의 url만 봐도 해당 사이트의 crud를 구조를 어느 정도는 파악할 수 있다.

위 아래의 페이지에서 뭐가 다른 지 확인 하셨는가?

url? 당연히 해당 상세 웹툰 페이지로 갔으니 그것은 당연한 것이다. 조금 더 자세히 살펴보기 위해 개발자 도구의 네트워크 창을 열어 비교해 보겠다.

자~ 옆에 보면 엄청난 데이터 파일과 통신이 이뤄지고 있음을 알 수 있다. 즉, 하나의 화면에 웹툰은 이렇게 매주, 매일 바뀌기 때문에 수많은 정보가 만들어지고, 읽어져야 하고, 또 업데이트 된다. 물론 연재가 끝난 작품은 메인 페이지에서 삭제해 줘야 하는 작업까지 필요하다. 그때 백엔드 단에서 해당 데이터를 프론트 단에 계속 연결시켜 줘야만한다.

그래야만 사용하는 사용자가 불편함 없이 정보를 볼 수 있고, 해당 웹이 생산성있게 작동할 것 이다.

3) crud의 샘플 코드

물론 실제 현업에서는 이보다 복잡한 코드와 수많은 데이터가 연결될 것이나, 간단하게 이렇게 코드 구성을 통해 원리가 적용된다는 정도만 알아두면 되겠다.

1. Read

리드 자체는 어려운 것이 없다. 사실상 여기서는 실제 api를 불러오는 것이 아니기에 json파일로 데이터를 대체했고, 기본적으로 코드 상에서 중요한 인자가 있다. 바로 req= request와 res=response 다. 이름 대로 req는 요청을 하는 클라이언트 단의 반응이고, 그에 따라 res는 백엔드 단에서 클라이언트에게 그 해당 반응에 따라 반응하는 구조다. 그래서 이번에는 응답으로 해당 db를 읽어온 것이다.

const sendPosts = (req, res) => {
  res.json({ // 위에서 작성한 sendPosts 함수와 비교했을 때,
  // express 덕분에 JSON.stringify 함수를 사용할 필요없이
  // response 객체의 json 메소드를 활용합니다.
    products: [
      {
        id: 1,
        title: 'node',
        description: 'node.js is awesome',
      },
      {
        id: 2,
        title: 'express',
        description: 'express is a server-side framework for node.js',
      },
    ],
  })
}

module.exports = { sendPosts } // routing.js 에서 사용하기 위해 모듈로 내보낸다.

2. Create

다음 크리에이트에서는 항목이 만들어지는 함수가 작성되었다.
아래 추가적인 설명을 기재했으니 참고 바란다.

postings.js

const createProduct = (req, res) => {
  const products = [] // 임의의 빈 배열에다가 상품 정보를 저장하겠습니다.
  console.log('Request body: ', req.body) // client로 부터 받은 정보를 확인합니다.
  const { title, description } = req.body // client로 부터 전달받은 정보를 활용합니다
  const product = {
//  id : uuid.uuid()  // 추가사항
    title : title,
    description : description
  } // 전달 받은 키를 이용해 객체를 만듭니다.
  
  products.push(product) // 새로만든 객체를 상품 정보 배열에 추가해줍니다.
  res.json({ data: products }) // 새로 생성된 배열을 client에게로 반환해줍니다.
}

module.exports = { sendPosts, createProduct } 
// routing.js 에서 사용하기 위해 모듈로 내보낸다.

server.js
여기서 중요한 점이 이 라우팅이다. 결국 라우팅을 해서 요청하는 페이지에 제대로 전달이 가야하므로 라우팅 코드 잘 작성해야 한다. 보통 양식은 이러하다.
app.(데이터 전달 방식)(경로, 적용 함수) 순이다.
여기서 짚고 넘어가야 할 점은 데이터 전달 방식이다. 아래처럼 메소드와 crud를 인식하여 적용시켜줘야 한다.

app.post('/signup', () => console.log('signed up!')) // 첫번째 인자에는 endpoint url 을 기입하고,
app.post('/login', () => console.log('logged in!')) // 각각의 요청에 대해 핸들링 하는 함수를 두번째 인자로 넣습니다.
app.get('/products', sendPosts)
app.post('/products', createProduct) // <<----- routing을 추가해줍니다 :)

이후 업데이트와 딜리트도 함수만 조금씩의 차이가 있을 뿐, 전반적인 코드 구동방식은 동일하다.

3. Update

postings.js

const updatePost = (req, res) => {
  const products = [
    {
      id: 1,
      title: 'node',
      description: 'node.js is awesome',
    },
    {
      id: 2,
      title: 'express',
      description: 'express is a server-side framework for node.js',
    },
  ]
  const { id } = req.body
  const posting = postings.filter((posting) => posting.id === id)
  posting.title = "new title"

  res.json({ data: products })
}

module.exports = { sendPosts, createPost, updatePost }

server.js

app.post('/signup', () => console.log('signed up!')) // 첫번째 인자에는 endpoint url 을 기입하고,
app.post('/login', () => console.log('logged in!')) // 각각의 요청에 대해 핸들링 하는 함수를 두번째 인자로 넣습니다.
app.get('/products', sendPosts)
app.post('/products', createProduct)
app.put('/products', updatePost) // <<----- routing을 추가해줍니다 :)

4. Delete

postings.js

const deletePost = (req, res) => {
  const postings = [
    {
      id: 1,
      title: 'node',
      description: 'node.js is awesome',
    },
    {
      id: 2,
      title: 'express',
      description: 'express is a server-side framework for node.js',
    },
  ]
  const { id } = req.body

  for (let i = 0; i < postings.length; i++) {
    const posting = postings[i]
    if (posting.id === id) {
      delete posting[i]
    }
  }
  return res.json({ data: postings })
}

module.exports = { sendPosts, createPost, updatePost, deletePost }

server.js

app.post('/signup', () => console.log('signed up!')) // 첫번째 인자에는 endpoint url 을 기입하고,
app.post('/login', () => console.log('logged in!')) // 각각의 요청에 대해 핸들링 하는 함수를 두번째 인자로 넣습니다.
app.get('/products', sendPosts)
app.post('/products', createProduct)
app.put('/products', updatePost)
app.delete('/products', deletePost) // <<----- routing을 추가해줍니다 :)