이제 실전 프로젝트가 어느정도 끝나간다. (그리고 또 일요일에 쓰지 못 한 나의 WIL...😢)
게임도 어느정도 안정적으로 돌아가고, 아직 WebRTC는 이해하기 좀 어렵지만, Websocket은 어느정도 이해가 된 것 같다.
내가 작업하지 않은 부분도 계속해서 코드를 읽다보니 점점 그림이 그려진다고 해야하나??
이래서 다른 사람이 작업한 코드를 몇번이고 반복해서 읽는 것도 공부가 되나보다!
이제 어느정도 서비스의 틀이 잡혔다고 생각했는데, 아니나 다를까 항상 사소한 문제는 일어난다.
❗️ 기본적인 CRUD라고 방심하지 말자!
항해에서 가장 많이 작업한 것은 댓글이나 게시글 CRUD였다. 그 동안은 전부 Redux-Toolkit으로 사용했는데, 댓글의 경우 무한 스크롤을 도입하려다보니 Redux-Thunk를 사용하지 않는 것이 더 낫다는 결론이 나왔다.
기존 API는 특정 게시글 조회 시 해당 게시글에 해당하는 댓글까지 자연스럽게 읽어올 수 있는 구조였는데, 무한 스크롤을 도입할 경우, 댓글만 불러올 수 있도록 변경이 필요하여 요청했었다.
물론 무한 스크롤은 내가 구현했던 부분은 아니지만, 기존 Redux-Thunk로 구현했던 부분이 전부 다 바뀌었을 때, CRUD중 그 어느것도 제대로 동작하지 않았었다. 그렇게 다시 제작에 투입되어서 코드를 살펴보았다.
지금까지 프로젝트들을 진행하면서 몇번이고 항해 강의에서 나온대로만 코드를 작성하는 관성이 위험하다고 생각했었는데, 이런 문제는 나 뿐이 아니라 항해를 통해 코딩을 접하는, 혹은 항해가 아니더라도 부트캠프를 통해 코딩을 처음 접하는 사람들의 문제인 것 같다.
항해에서 보통 서버로부터 전달받는 response를 받고, 해당 reponse.data에 있는 내용을 토대로 CRUD 구현 작업을 진행했었다. 현업에서는 어떨지 모르겠지만 우리는 이런 방식에 매우 익숙했고, 그러다보니 내가 작업하는 case에 대한 생각보단 response.data를 사용하는 관성에 익숙해서 무조건 response부터 찍고 보는 것이다.
- 생각해보면
DELETE의 경우response를 받지 않을텐데... 관성에 익숙해져서 그냥 작성하는 것이다.
async function onClickDeleteComment() {
await instance.delete(`/posts/comments/${commentId}`).then((res) => {
const { comment } = res.data;
setComments((prev) => [...prev, ...comment]);- 다시
res값을 찍어보니 그냥 http statusMsg인 "삭제가 완료되었습니다!"와 같은 메세지만 담겨있었다. - 그래서 전반적으로 댓글관련 CRUD를 전부 수정해야했었다.
async function onClickDeleteComment() {
await instance.delete(`/posts/comments/${commentId}`).then(() => {
setComments(
comments.filter((comment) => {
return comment.id !== commentId;
}),
);
});DELETE의 경우,filter()를 사용해서 삭제된 commentID와 id값이 같지 않은 코멘트만 새로 리턴하도록 만들었다.
익숙함에 속아서 코드를 작성하면 안된다...!
자주하던 실수였기 때문에 번거로워도 console에 무조건 response를 찍어보며 코드를 작성해야겠다고 생각했다.
이 부분은 나중에 꼭 따로 작성해서 더 이상 실수하지 않도록 조심해야겠다.
이제 드디어 서비스 홍보가 남았다!! 여러가지 반응이 많았으면 좋겠다.
