[Node.js] 02. REST API

"Representational State Transfer” 의 약자

REST 는 네트워크 아키텍처 원리의 모음이다. 여기서 '네트워크 아키텍처 원리'란 자원을 정의하고 자원에 대한 주소를 지정하는 방법 전반을 일컫는다. 간단한 의미로는, 웹 상의 자료를 HTTP 위에서 SOAP이나 쿠키를 통한 세션 트랙킹 같은 별도의 전송 계층 없이 전송하기 위한 아주 간단한 인터페이스를 말한다.

출처: 위키백과

1. Postman을 사용하여 통신 확인

app.js에 작성해두었던

//익스프레스가 지원해주는 restAPI
app.get('/', function (req, res) {
  res.send('Hello World')
})

이 부분도 rest api에 해당하는 영역입니다.

여기서 app은 express모듈을 사용한다는 뜻이고,

get은 HTTP 메소드입니다.

그리고 '/' 해당 api의 경로입니다.

통신이 잘 이루어지는지 확인하기 위해 postman을 사용해보겠습니다.

없으신 분들은 postman을 설치하시고 실행해봅시다.

메소드를 get으로 선택하였으니 옵션을 get으로 설정합니다.

서버포트를 8080으로 열어주었으니

입력창에 아래와 같이 url을 입력한 후 send를 눌러봅시다.

서버주소  + 해당 api의 경로
[http://localhost:8080/]

res.send에 입력했던 'Hello World'가 잘나오네요.

여기서 res.send는 다양한 유형의 응답을 전송해줍니다.

express를 사용하는 데에 있어서 가장 기본적인 것은 req객체, res객체, express()함수를 사용하는 것입니다.

2. TodoList에 사용할 REST API 작성하기-create

TodoList를 사용하려면 해야할 일 목록을 작성해야 합니다.

그리고 이를 DB에 저장해야되겠죠.

const pool = require('./database');

app.post('/create', async (req, res) => {
  try{
    let {content} = req.body; // body에서 할일 내용을 입력받아옴
    console.log(content);
    const conn = await pool.getConnection(); // pool에서 커넥션을 가져오기
    let sql = 'insert into todotable (content) values(?)'; // db에 content를 넣는 쿼리문 작성;
    let data = [content]; // data에 content 담기
    console.log(data);
    const [rows] = await pool.query(sql,data); //쿼리문 실행 및 rows에 담기
    res.status(200).json({ result : rows }); // json형식으로 rows 전달
    conn.release(); // 커넥션을 다시 pool로 반환
  } catch (error){
    console.log(error); // 에러잡기
  }
});

데이터를 저장해야하니 get이 아니라 post를 사용합니다.

포스트맨을 이용해서 전송해보면,

아직 프론트가 없지만 프론트가 있다면 이러한 에러가 뜰 것이고,

서버에서도 이렇게 에러가 나는 것을 확인 할 수 있는데요.

이는 cors 모듈을 통해 해결할 수 있습니다.

$ npm install cors

cors 설치 후,

const cors = require('cors');

app.use(cors());
app.use(express.json())
app.use(express.urlencoded({ extended: false}))

이와 같은 내용을 app.js에 추가합니다.

 

urlencoded 메서드를 보면 { extended: false } 라는 옵션이 들어있다.

이 옵션이 false면 노드의 querystring 모듈을 사용하여 쿼리스트링을 해석하고,

true면 qs 모듈을 사용하여 쿼리스트링을 해석한다.

모듈을 사용하여 쿼리스트링을 해석하고, true면 qs모듈을 사용하여 쿼리스트링을 해석한다.

qs모듈은 내장 모듈이 아니라 npm패키지이며,

querystring모듈의 기능을 조금 더 확장한 모듈이다.

출처: https://backback.tistory.com/336

다시 서버를 키고 포스트맨을 이용해서 데이터를 전송해보면,

성공적으로 데이터가 들어간 것을 확인할 수 있습니다.

3. TodoList에 사용할 REST API 작성하기-read

app.get('/list', async (req, res) => {
  try{
    const conn = await pool.getConnection();
    const sql = 'select * from todotable';
    const [rows] = await pool.query(sql);
    res.status(200).json({ result : rows });
    conn.release();
  } catch (error){
    console.log(error);
  }
});

할일 목록을 입력했으면 할일 목록 리스트를 불러와야겠죠?

이미 있는 데이터를 조회하는 것이니 get을 사용합니다.

postman을 확인해봅시다.

성공적이네요.

4. TodoList에 사용할 REST API 작성하기-update

작성한 할일 목록을 수정할 수도 있어야 하겠죠.

app.post('/update', async (req, res) => {
  try{
    const {idx, content} = req.body;
    console.log(idx,content);
    const conn = await pool.getConnection();
    const sql = 'update todotable set content=? where idx=?';
    const data = [content,idx];
    const [rows] = await pool.query(sql,data);
    res.status(200).json({ result : rows });
    conn.release();
  } catch (error){
    console.log(error);
  }
});

body에서 수정할 할일의 고유번호인 idx값을 받아오고 content에는 수정할 내용을 입력하여 받아옵니다.

MySQL update문을 이용하여 body에서 받아온 값의 내용을 업데이트 시켜줍니다.

성공적으로 1번 항목의 내용이 변경되었네요.

5. TodoList에 사용할 REST API 작성하기-delete

마지막으로는 삭제입니다. 할 일을 달성하거나, 더 이상 필요 없는 목록은 제거해야겠죠?

app.post('/delete', async (req, res) => {
  try{
    const {idx} = req.body;
    console.log(idx);
    const conn = await pool.getConnection();
    const sql = 'delete from todotable where idx=?';
    const data = [idx];
    const [rows] = await pool.query(sql,data);
    res.status(200).send(rows);
    conn.release();
  } catch (error){
    console.log(error);
  }
});

지우고 싶은 내용에 해당되는 고유 번호 idx값을 body를 통해 전송해줍니다.

입력했던 2번 content가 깔끔하게 지워졌습니다.

이로써 투두리스트를 만들기 위한 CRUD 작성이 완료되었습니다.

다음 페이지에서 React를 이용하여 프론트를 만들어봅시다!