게시판 기능 리팩토링

오늘은 이제까지 만든 게시판 기능을 리팩토링하는 시간을 가졌다.

 

첫 번째로, 데이터를 fetch하는 코드(axios.get)에 async&await을 도입해주었다.

 

< Board.js >

useEffect( ()=>{
  async function getContent(){
    await axios.get('http://localhost:3002/board')
    .then((res) => {
    console.log(res.data);
    setViewContent(res.data);
    })
    .catch((err)=> { console.log(err); });
  }
  getContent();
}, []);

 

처음에 useEffect 훅에 바로 사용하려고 했더니, 아래와 같은 경고가 발생하였다.

그래서 useEffect 훅 안에 async, awiat을 사용한 함수를 만들고, 그 함수를 호출하였다.

 

 

두 번째로, 글 목록의 id 값을 조정해주었다.

글을 삭제하면 그 번호가 없어져 id가 연속되지 않는다. 나는 이것이 보기 거슬려서 수정하려고 한다.

중간의 id가 빈 모습

 

나는 글 목록을 담당하는 router에 '우선 id를 재조정하고, 글 목록을 전송해'라고 하고 싶다.

그러기 위해서는 router에서 여러 줄의 쿼리를 작성해야 한다. 하지만 이는 그냥 되지 않고, db 정보에 'multipleStatements: true'를 추가해주어야 한다. 

 

< db.js >

const db = mysql.createConnection({
    connectionLimit: 20,
    host: 'localhost',
    user: 'root',
    password: '비밀',
    database: 'yeonmovie',
    multipleStatements: true
});

 

< board.js 중 글 목록을 담당하는 router 부분 >

router.get('/', (req, res)=>{
    const sqlQuery = `
    SET @CNT=0;
    UPDATE board SET board.id=@CNT:=@CNT+1;
    SELECT * FROM board;
    `;
    db.query(sqlQuery, (err, result)=>{
        if(err) throw err;
        res.send(result);
    });
});

 

여기서 끝나지 않고 ! 클라이언트 단의 코드도 수정해주어야 한다.

우리가 원하는건 세 번째 쿼리에 대한 정보인데, 3개의 쿼리를 작성하였기 때문에 첫 번째, 두 번째 쿼리에 대한 정보도 res.data에 전송되었다. 그러므로 Board.js에서 res.data > res.data[2]로 수정해주자.

useEffect( ()=>{
  async function getContent(){
    await axios.get('http://localhost:3002/board')
    .then((res) => {
    console.log(res.data[2]);
    setViewContent(res.data[2]);
    })
    .catch((err)=> { console.log(err); });
  }
  getContent();
}, []);

 

마지막으로, 처음에 API 연습을 위해 만들었던 API router과 navigation을 지워주었다.

 

끝 (●'◡'●) !

---

참고

• https://zionh.tistory.com/26
• https://velog.io/@he0_077/useEffect-%ED%9B%85%EC%97%90%EC%84%9C-async-await-%ED%95%A8%EC%88%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0