진행한 내용

댓글에 대한 작성, 수정, 삭제, 조회 + 공지사항 페이지네이션

댓글 리스트

댓글 리스트 페이지입니다. 기본적으로 작성자, 내용, 작성일자가 표시되며 로그인 한 사용자와 댓글 작성자의 아이디 값이 같으면 수정 및 삭제가 가능합니다.

댓글 작성

현재는 공지사항 쪽만 만들어져 있지만 이후 피드, 앨범, 이벤트 등등 여러 페이지를 만들기 위해 설계해 놨고 대부분의 페이지에서 댓글 기능이 필요하기 때문에 댓글을 작성할 때 path라는 값을 같이 저장해 주도록 데이터베이스를 설계했습니다. 공지사항의 경우 path="notice" 라고 주어 댓글들을 구분해 두었습니다.

댓글 수정

로그인 한 유저와 댓글 작성자가 같은 경우 수정이 가능하며, 수정 버튼을 누를 경우 내용에 해당하던 부분이 input으로 바뀝니다. 우측 상단의 수정 + 삭제 버튼은 삭제 버튼만 남게 되며 하단에 작성일자가 사라지고 우측 하단에 취소 및 수정 버튼이 생기게 됩니다.

React를 기반으로 작성을 하지만 React의 핵심 개념인 컴포넌트 기반 라이브러리라는 점을 참 활용하지 못하고 있구나 라고 느낀 파트였습니다. 아쉽게도 처음 리액트를 배웠을 때부터 지금까지 리액트 관련해서 코드 리뷰를 해 줄 사람이 없어 제 코드는 아주 난장판이며 아주 멍청합니다.

댓글 수정 같은 경우도 내용과 input이 번갈아가며 되어야 하는데 이를 위해 생각했던 첫 번째 방법은 댓글 변수(Object)에 isEditMode(Boolean) 이라는 값을 추가해 전체 댓글들을 매번 돌면서 해당 변수를 변경해주려 했습니다. 하지만 당연히 이 방법은 좋지 않습니다.

그때 velog가 생각났고 velog 코드가 공개되어 있다는 것도 생각났습니다. 바로 해당 코드를 확인했고 컴포넌트 라는 개념을 사용은 했지만 귀찮다는 이유로 제대로 사용하지 않았던 저를 반성하게 되었습니다. 댓글 하나를 컴포넌트로 만들어 사용하면 변수 하나를 만들어 수정 모드를 바꿀 수 있었고, 전체 댓글들을 탐색하지 않아도 됐기에 당연히 성능면으로 뛰어날 수 있었습니다.(감사해요 벨로퍼트!!)

댓글 삭제

로그인 한 유저와 댓글 작성자가 같은 경우 삭제가 가능합니다. 여긴 프론트 쪽에서는 딱히 할 말이 없고 백엔드 쪽에서 댓글을 삭제할 때 유저의 댓글과 공지사항에서의 댓글 또한 삭제시켜줘야 합니다. (위에서 댓글에 path라는 칼럼이 있다고 설명드렸기 때문에 path에 따라 해당 path의 댓글을 삭제해줘야 합니다.)

페이지네이션

원래 댓글 쪽도 페이지네이션으로 구현할까 생각했으나.. velog의 여러 글들을 보며 생각한 것은 "인기가 엄청 많은 글이라도 댓글 수는 몇십개에 불과하고 몇십개 정도는 그냥 리스트로 쭉 뽑는게 오히려 UX적으로 낫겠구나" 였습니다. 그렇게 댓글 쪽은 페이지네이션을 하지 않았고, 공지사항 리스트 쪽에만 페이지네이션을 구현했습니다.

백엔드에서 전에 공지사항의 갯수를 가져와 해당 내용을 가지고 계산했습니다. 한 페이지당 8개의 공지사항, 페이지 단위는 5개씩으로 기준을 잡고 계산했으며 양쪽 화살표는 5n+1 번째 페이지로 이동합니다. 화살표 같은 경우 더 이상 이동할 수 없으면 비활성화 처리가 돼 클릭이 불가능하게 했으며 css의 pointer-events를 사용했습니다.

추가로 생각한 잡다한 내용들

첫 번째는 리덕스에 관한 생각입니다. 정말... 너무할 정도의 코드량은 저를 미치게 합니다. 또한 이전에도 말씀드렸다 시피 노마드 코더의 캐럿마켓을 보며 리덕스가 아닌 다른 구조를 고민하고 있다고 했죠. 하지만 이번 프로젝트에서는 리덕스를 끝까지 고집하려 합니다. 첫 번째 이유는 여전히 많은 기업에서 리덕스를 사용하고 있기 때문입니다. 리덕스가 싫다... 미친다 말은 많지만 여전히 많은 기업에서 리덕스를 사용하고 있다고 알고 있습니다.(제 생각일지도?) 두 번째 이유는 Redux-toolkit과 Redux+typescript 조합을 이 프로젝트에서 처음 써봤기 때문입니다. 아무리 제가 힘들어도 처음 써보는 조합은 공부할게 많다고 생각합니다. 최소한 해당 조합으로 프로젝트 하나 정도는 해봐야 아쉬움이 남지 않을 것 같습니다.

두 번째는 제 코드에 대한 아쉬움입니다. 위에 댓글 수정의 경우와 같이 컴포넌트화 되지 않은 여러 중복 코드가 있습니다. 또한 styled-components의 제 멋대로의 사용으로 인해 벌써부터 어지러운 여러 styled-components명이 있습니다. 마지막으로 Hook의 사용 능력이 아직 미약합니다. 예를 들어 현재 페이지네이션의 경우 라이브러리의 도움 없이 자바스크립트로만 작성되어 있고 이와 관련된 내용은 컴포넌트로 만들거나 Hook으로 만들 수 있습니다. 이에 대해 꽤 많은 도전을 했지만 실패했고 여전히 도전 중입니다.

마치며

최근 회사 프로젝트가 끝나 다시 여유가 생겼습니다. 하지만 주니어 개발자들이 흔히 그런지는 모르겠는데 점점 코드들을 더 효율적으로, 더 깔끔하게 만드는 것이 조금 더 중요하다는 생각을 많이 하고 있고, 생각도 정말 많아지고 있습니다. 사이드 프로젝트가 얼마나 걸릴지는 모르겠습니다만 이제 공지사항 하나 대충 끝냈고(물론 아직 못한 부분이 많아 보이지만... 나중에 해도 될만한 부분이라 생각합니다. 일단 틀 정도는 다 만들어 놔야죠) 이제 피드로 넘어갈 생각입니다. 피드 파트에 대한 구조부터 설계까지 해서 다시 돌아오겠습니다.

예아 화이팅