오늘은 11월 25일 25일차이다.
목표
- maker가 loadPage에서 자신의 wordle을 지울 수 있도록 구현
진행
loadPage에 delete wordle 버튼을 추가했다. 버튼을 클릭하면 서버에 DELETE /load/delete/:maker 요청이 가서 세션을 지우고, maker 테이블에서 요청으로 받은 닉네임에 해당하는 데이터를 지운다. solver 테이블과 maker 테이블은 on delete cascade로 연결되어 있기 때문에 solver 테이블까지 자동으로 지워진다.
코드
const onClickDelete = e => {
client.delete(`/load/delete/${nickname}`)
.then(navigate('/'));
};delete 버튼에 달려있는 onClickDelete 함수이다. 클릭 시 DELETE /load/delete/:maker로 요청을 보낸다. 이후 응답이 오면 / 페이지, 즉 wordle maker 페이지로 리다이렉트한다.
router.delete('/delete/:maker', async (req, res) => {
try {
req.session.maker = null;
await Maker.destroy({
where: {
nickname: req.params.maker,
}
});
res.end();
} catch (error) {
console.error(error);
}
});서버에서 DELETE /load/delete/:maker 요청을 처리하는 라우터이다. 요청이 오면 우선 세션을 지워주고, 파라미터로 온 maker의 닉네임을 활용해 데이터베이스에서 삭제해준다.
loadPage의 모습이다.
버튼을 클릭하면 wordle maker 페이지로 리다이렉트되는 모습이다.
내일 할 것
- 페이지들끼리 연결
- delete 시 다시 확인하는 과정 추가
마무리
오늘은 쉽게 끝낼 수 있었다. 클라이언트에서 닉네임을 처리하는 과정에서 문제가 좀 있어서 코드를 살짝씩 변경한 것 말고는 큰 문제는 없었다. 내일은 현재 3개의 페이지로 분리되어 있는데, 이것을 어떻게 연결할 것이지 생각해보고, 구현해야겠다. 그리고 delete 버튼을 누르면 너무 멋없게 삭제되는 것 같아서 중간에 애니메이션을 넣던가 아니면 재차 확인하는 과정을 넣어야겠다.
