[Node.js] React와 Express로 CRUD 게시판 웹 서버 만들기 - 2 (REST API)

지난내용

https://hyunki99.tistory.com/44

[Node.js] Express 웹 서버 만들기 (mySQL 연동) - 1

 

지난 포스팅에서 Express와 mySQL의 연동을 성공했습니다.

 

Create : 게시글 쓰기

Read : 게시글 조회

Update : 게시글 수정

Delete : 게시글 삭제

 

위 기능들을 Express를 사용해서 REST API를 구현해 봅시다.

REST API는 오늘날 웹에서 가장 많이 사용되고 있는 유연한 API입니다.

클라이언트가 서버에 데이터와 함께 요청을 전송하면

서버가 내부 함수를 시작하고 출력 데이터를 응답합니다. 

 

🔥 REST API란 무엇인가요?

REST는 Representational State Transfer의 줄임말입니다. REST는 클라이언트가 서버 데이터에 액세스하는 데 사용할 수 있는 GET, PUT, DELETE 등의 함수 집합을 정의합니다. 클라이언트와 서버는 HTTP를 사용하여 데이터를 교환합니다.REST API의 주된 특징은 무상태입니다. 무상태는 서버가 요청 간에 클라이언트 데이터를 저장하지 않음을 의미합니다. 서버에 대한 클라이언트 요청은 웹 사이트를 방문하기 위해 브라우저에 입력하는 URL과 유사합니다. 서버의 응답은 웹 페이지의 일반적인 그래픽 렌더링이 없는 일반 데이터입니다.  -AWS

 

 

---

✨ Front - End

 

서버를 만들기 전에 데이터를 요청하고 표시할 게시판을 React로 만들었습니다.

디자인은 상관 없으니 자유롭게 만들어 주시면 됩니다. 

 

---

📝 Create 게시글 쓰기

 

 

⦁ Express 소스코드

//글 작성
app.post('/questions', (req, res) => {
//파라미터를 받아오는 부분
    let post_title = req.body.params.post_title;
    let post_content = req.body.params.post_content;
    let post_nickname = req.body.params.post_nickname;
    let post_user_id = req.body.params.post_user_id;
    let values = [post_title, post_content, 0, post_nickname, post_user_id]

//SQL 코드
    const sql = "INSERT INTO condb.post_info(post_title, post_content, post_like_count, post_nickname, post_user_id) VALUES(?, ?, ? ,?, ?)"
    db.query(sql,values,
        (err, result) => {
            if (err)
                console.log(err);
            else
                res.send(result);
        });
});

 

✔ 먼저 프론트단에서 입력한 데이터를 가져와야 합니다.

쿼리를 사용하는 방법이 있고 직접 body에서 가져오는 방법이 있습니다.

# 프론트에서 데이터를 가져오는 2가지 방법
req.body.params.데이터이름
req.query.데이터이름

 

✔ 그 후 db.query() 메서드를 통해 mySQL에 쿼리 문의 결과를 가져옵니다.

db.query("쿼리문", ?에 할당할 변수, (err, result))

 

물론 변수에 할당하지 않고 직접 넣어도 동작합니다.

또한, 두 번째 매개변수는 ?를 사용하지 않았다면 생략 가능합니다.

 

대부분 글의 제목과 내용은 사용자의 입력에 따라서 항상 바뀌기 때문에 ? 로 들어갈 자리를

비워주고 query() 메서드의 2번째 매개변수에 넣는 것이 바람직합니다. (배열도 넣을 수 있습니다.)

 

res.send()를 통해 최종적으로 프론트에 결과를 응답해줍니다.

 

⦁ React 소스코드

const newPosting = () => {
    axios.post('http://localhost:3001/questions',{
      params: {
        post_title: postId,
        post_content: desc,
        post_nickname : sessionStorage.getItem('user_nickname'),
        post_user_id : sessionStorage.getItem('user_id'),
      }
    })
      .then(res => {
        console.log(res.data)
        alert("글 작성이 완료되었습니다.")
        document.location.href = '/'
      })
      .catch(function(error){
       console.log(error);
    })
}

//render 부분에 작성
<Button onClick = {newPosting}/>

 

✔ newPosting 메서드를 버튼의 onClick 이벤트에 넣어줍니다.

 

 

⦁ Params 설명

// 다음과 같이 자유롭게 파라미터를 넘겨주세요.
params: {
    post_title: 글 제목,
    post_content: 글 내용,
    post_nickname : 닉네임,
    post_user_id : 작성한 사용자 아이디,
}

프론트에서 요청을 보낼 때 {키 : 값} 처럼 생긴 데이터 형식으로 전송합니다.

서버와 프론트의 통신에서 데이터의 키가 다르면 undefined 에러가 발생합니다.

 

따라서 데이터를 잘 받기 위해서는 주고받는 키의 이름이 일치하는지 잘 확인해야 합니다.

 

콘솔로그를 생활화 합시다.🤦‍♂️

 

❗ express에서 파라미터가 계속 undefined인 경우
axios의 2번째 매개변수에 null을 추가합니다.

axios는 'data'를 query로 변환해 주지 않는다고 해서 발생한 에러라고 합니다.

axios.post('http://localhost:3001/요청URL', null, {
        ⦁ ⦁ ⦁            
}

 

 

---

📝 Update 게시글 수정

 

 

⦁ 위의 코드를 이해했다면 쿼리문만 바꿔주면 Update와 Delete도 쉽게 구현할 수 있습니다.

저는 로그인이 구현되어 있기 때문에 본인만 수정할 수 있도록 조건문을 주었습니다.

 

📝 전체 소스코드 

⦁ Express 소스코드

//게시글 수정
app.post('update', (req, res) => {
    const post_id = req.body.params.post_id;
    const post_title = req.body.params.post_title;
    const post_content = req.body.params.post_content;
    const post_nickname = req.body.params.post_nickname;

    // 게시글 nickname과 동일한 nickname이 mysql에 있는지 확인
    const sql = "SELECT COUNT(*) AS result FROM user WHERE nickname = ?"

    db.query(sql, post_nickname, (err, data) => {
        if (!err) {
            // 결과값이 1보다 작다면(동일한 id 가 없다면)
            if (data.result < 1) {
                res.send("아이디가 존재하지 않습니다.")
            } else { // 동일한 nickname 있으면
                
                //업데이트할 게시글 찾아서 업데이트
                const sql2 = "UPDATE post_info SET post_title = ?, post_content=? where post_id = ?"
                const params = [post_title, post_content, post_id]
                db.query(sql2, params, (err, data) => {
                    if (!err) {
                        res.send("성공")
                    } else {
                        res.send(err)
                    }
                })
            }
        } else {
            res.send(err)
        }
    })
});

 

⦁ React 소스코드

// 수정요청
const onClickUpdate = () => {
    if (inputTitle != "" && desc != "") {
        axios.post('http://localhost:3001/onUpdate', {
            params: {
                post_id: 게시글번호,
                post_title: 글 제목,
                post_content: 글 내용,
                post_nickname: sessionStorage.getItem("user_nickname")
            }
        })
            .then(res => {
                console.log(res.data)
                alert("수정이 완료되었습니다.")
                document.location.href = '/'
            })
            .catch()
    }
    else {
        alert("글 혹은 내용을 입력해야만 합니다.")
    }
}

 

 

---

📝 Delete 게시글 삭제

 

 

⦁ Update와 비슷합니다. 글쓴이와 로그인한 사용자가 동일한 경우만 삭제가 가능합니다.

만약, 그냥 삭제만 하고 싶다면 앞에 조건문은 지우시고 사용하면 됩니다.

 

DELETE 열 FROM 테이블 WHERE post_id = 삭제할 게시글번호

위의 쿼리문을 사용해서 DB에서 삭제시키면 됩니다.

 

 

📝 전체 소스코드 

⦁ Express 소스코드

app.post('/delete', (req, res) => {
    const post_id = req.query.post_id;
    const post_nickname = req.query.post_nickname;

    // 게시글 nickname과 동일한 nickname이 mysql 에 있는 지 확인
    const sql1 = "SELECT COUNT(*) AS result FROM user WHERE nickname = '?'"

    db.query(sql1, post_nickname, (err, data) => {
        if (!err) {
            if (data.result < 1) {
                res.send('실패')
            } else { // 동일한 nickname 있으면
                //삭제할 게시글 찾아서 삭제
                const sql2 = "DELETE FROM condb.post_info WHERE post_id = ?"
                db.query(sql2, post_id,
                    function (err, result, fields) {
                        if (err) throw err;
                        console.log(result);
                        res.send('true');
                    });
            }
        } else {
            res.send(err)
        }
    })
});

 

⦁ React 소스코드

// 삭제 버튼 클릭 이벤트
const onClickDelete = () => {
    if (sessionStorage.getItem('user_id') == postData.post_user_id) {
        axios.post('http://localhost:3001/onDelete', null, {
            params: {
                'postnickname': 글쓴이 닉네임,
                'post_id': 게시글id
            }
        })
            .then(res => {
                alert('게시글이 삭제 되었습니다.')
                //삭제되면 새로고침
                document.location.href = '/'
                console.log(res.data);
            })

            .catch()
    }
    else {
        alert('작성자만 삭제 및 수정이 가능합니다.')
    }
}

 

 

---

 

---

 

 

CRUD 기능은 웹에서 가장 기본적이면서 중요합니다.

Express를 중심으로 포스팅 했는데,

다음에는 React 관련 포스팅을 하도록 하겠습니다.

 

 

---

참고 문헌 :