[node.js] 프레임워크 없이 CRUD 구현해보기

📌 CRUD (Create, Read, Update, Delete)

Create -> post

read -> get

update -> put

delete -> delete

 

📍req, res 

req(uire) : 브라우저에서 들어온 요청

res(ponse): 요청에 따른 서버의 응답

 

http 따라야 하는 규약

 

📍 nodemon 사용

"scripts": {
    "server": "nodemon js/main.js",
    "dev": "nodemon --watch \"./js/*.js\" --exec \"npm run server\""
  },

package.json 파일 수정 

sass 처럼 특정 파일에게 --watch 걸어 줄 수도 있음 

변화가 일어나면 --exec 옵션으로 명령어 실행 가능 

 

📍 HTTPie

서버에서 post 요청 

 

✅ 코드 전체 흐름 

// @ts-check

const http = require('http');

const posts = [
  {
    id: 1,
    title: '첫번째 블로그 글',
    content: '첫번째 내용입니다',
  },
  {
    id: 2,
    title: '두번째 블로그 글',
    content: '두번째 내용입니다',
  },
];

const server = http.createServer((req, res) => {
  console.log('@@@', req.url);
  // req.url이 존재하면 req.url.split('/'), 존재하지 않으면 빈배열 선언
  const urlArr = req.url ? req.url.split('/') : [];
  let id = '-1';
  if (urlArr.length > 2) {
    [, , id] = urlArr;
    // id = urlArr[2];
  }
  // console.log(urlArr);
  // console.log(urlArr[2]);

  /**
   * GET  /posts         목록 가져오기
   * GET  /posts/:id     특정 글 내용 가져오기
   * POST /posts        새로운 글 올리기
   * PUT  /posts/:id     특정 글 내용 수정하기
   * DELETE /posts/:id  특정 글 삭제하기
   */
  if (req.url === '/posts' && req.method === 'GET') {
    const result = {
      posts: posts.map((post) => ({
        id: post.id,
        title: post.title,
      })),
      // 전체 글 수 return
      totalCount: posts.length,
    };

    // response header 설정
    res.setHeader('Content-Type', 'application/json', 'charset = utf-8');
    res.statusCode = 200;
    res.end(JSON.stringify(result));
    console.log('블로그의 글 목록을 가져오는 API 입니다.');
  } else if (urlArr[1] === 'posts' && req.method === 'GET') {
    res.statusCode = 200;
    console.log('블로그에 특정 글 내용을 보여주는 API 입니다.');
  } else if (req.url === '/posts' && req.method === 'POST') {
    res.statusCode = 200;
    console.log('블로그의 새로운 글을 올릴 때 호출할 API 입니다');
  } else if (urlArr[1] === 'posts' && req.method === 'PUT') {
    res.statusCode = 200;
    console.log('블로그의 글을 수정 때 호출할 API 입니다');
  } else if (urlArr[1] === 'posts' && req.method === 'DELETE') {
    res.statusCode = 200;
    console.log('블로그의 글을 삭제 때 호출할 API 입니다');
  } else {
    res.statusCode = 400;
    res.end('Not Found');
    console.log('해당 API를 찾을 수 없습니다.');
  }

  // 서버가 정상일 때 200이라는 코드를 내보냄
  // res.statusCode = 200;
  // res.end('hello, back-end');
});

const PORT = 4000;

server.listen(PORT, () => {
  console.log(`해당 서버는 ${PORT}번 포트에서 작동 중입니다.`);
});

 

✅ Read -> GET 구현 (목록 가져오기)

제일 위 코드에서 GET 부분 수정 

  if (req.url === '/posts' && req.method === 'GET') {
    const result = {
      posts: posts.map((post) => ({
        id: post.id,
        title: post.title,
      })),
      // posts: posts,
      // 전체 글 수 return
      totalCount: posts.length,
    };
    res.statusCode = 200;
    // JSON 형태로 읽을 수 있는 문자열로 바꿔서 전달해줌
    res.end(JSON.stringify(result));
    console.log('블로그의 글 목록을 가져오는 API 입니다.');
  }

 

✅ Read -> GET 구현 (특정 id 값을 가지는 글 가져오기)

특정 id 값을 가지는 글의 정보를 모두 가져올 수 있다 

배열의 find method를 이용하여 id가 겹치는 데이터를 찾아서 반환 

단, 해당 id 값을 가지는 데이터가 없을 경우 404 err 출력(예외 처리)

id 값을 number로 하기로 했으니 id를 분리하는 코드 수정 

 

제일 위 코드에서 GET(else if (id !== -1 && req.method === 'GET')) 부분 수정 

else if (id !== -1 && req.method === 'GET') {
    const result = posts.find((post) => post.id === id);
    if (result) {
      res.statusCode = 200;
      res.end(JSON.stringify(result));
      console.log('블로그의 특정 글 내용을 보여줄 API 입니다');
      console.log(`Post ID 값은 ${id} 입니다`);
    } else {
      res.statusCode = 404;
      res.end('포스트를 찾을 수 없습니다.');
      console.log('포스트를 찾을 수 없습니다.');
    }
  }

 

✅ Create -> POST 구현

제일 위 코드에서 POST 부분 수정 

else if (req.url === '/posts' && req.method === 'POST') {
    req.setEncoding('utf-8');
    req.on('data', (data) => {
      const newPost = JSON.parse(data);
      // posts.push(newPost);
      posts.push({
        id: posts[posts.length - 1].id + 1,
        title: newPost.title,
        content: newPost.content,
      });
    });
    res.statusCode = 200;
    res.end('새로운 글이 등록 되었습니다.');
    console.log('블로그의 새로운 글을 올릴 때 호출할 API 입니다');
  }

 

✅ Update -> PUT 구현(기존 포스트 수정하기)

제일 위 코드에서 PUT 부분 수정

else if (id !== -1 && req.method === 'PUT') {
    req.setEncoding('utf-8');
    req.on('data', (data) => {
      const updatePost = JSON.parse(data);
      updatePost.id = id;
      posts[id - 1] = updatePost;
    });
    res.statusCode = 200;
    res.end(`수정 된 포스트의 id는 ${id}번 입니다.`);
    console.log('블로그의 글을 수정 때 호출할 API 입니다');
  }

 

✅ DELETE 구현(기존 포스트 삭제하기)

제일 위 코드에서 DELETE 부분 수정

else if (id !== -1 && req.method === 'DELETE') {
    // index id-1인 값 하나만 지워
    posts.splice(id - 1, 1);
    res.statusCode = 200;
    res.end(`id ${id}번인 포스트를 삭제 했습니다`);
    console.log('블로그의 글을 삭제 때 호출할 API 입니다');
  }

 

✅ 예외처리 

else {
    res.statusCode = 400;
    res.end('Not Found');
    console.log('해당 API를 찾을 수 없습니다.');
  }

 

프레임워크에 감사함.... ㅎㅎ...