React 심화 과제 회고하며 한 번 더 정리하기!
Memorable 링크

기획

기획 figma

과제 때 튜터님께서 피그마를 이용해서 레이아웃을 보여주셨는데 매번 그려서 하는 나에게는 완전 강의 숙제부터 적용해봤다!
개인적으로 토이 프로젝트를 할 때는 미리 피그마를 통해서 레이아웃을 구상해보니 여백이나 크기 등을 미리 생각해서 그대로 css에 적용할 수 있으니 편한 것 같았다.
개발자로 근무하면서는 크게 만질 일이 없겠지만 알아두면 뭐 나쁠 건 없지!

CRUD 및 로그인/회원가입, 댓글, 좋아요 기능을 구현해야해서 예전 추억의 싸이월드가 생각나서 느낌을 내보려 조금 욕심내었다 ㅎㅎ

그럼 시작!

코드 진행 순서

1. 뷰 만들기 + 라우팅

• 피그마도 있고 주소 링크도 있어서 뷰 디테일은 생략!
• 파일을 나누면서 내가 어떤 모듈이 필요하고, 각각의 모듈에서 어떤 액션들이 필요한지까지 생각해보기!
• 현재 만들고있는 페이지를 확인하면서 하기 위해 라우팅 먼저 진행했다.

2. 기능 추가

memorable github

• redux-actions, immer를 이용하여 리덕스 구현

post.js

요런 액션들을 만들어 보았다! redux-actions와 immer를 사용하니 기초반에서 배웠던 리덕스의 형식과 또 달라져 리듀서를 작성하는 부분에서 어떻게 뷰를 그려야할지 조금 헷갈렸다.
이번에도 파이어베이스에 있는 파이어스토어를 이용해서 데이터를 저장했고, 포스트에 이미지를 업로드하는 부분이 있어서 image.js를 하나 더 만들어서 사진은 추가로 스토리지에 저장했다.

☝🏻 사진이 업로드 되는 루트

• 업로드 > 스토리지에 url 저장 > 스토리지에 있는 사진의 url을 포스트와 함께 파이어 베이스에 저장

post CRUD와 무한스크롤 시 확인을 위한 LOADING, 좋아요 기능을 위한 LIKE_TOGGLE 액션이 있다.

무한스크롤은 게시글을 원하는 만큼 끊어서 가지고 오는 것은 잘 되는데 노트북이 스크롤을 잘 먹지 못해서인지 화면 크기를 계산해서 스크롤을 줘도 인식하지를 못했다.
나중에 한 번 더 다시 도전해봐야하는 기능!
그래서 더보기 버튼을 만들어 원하는 만큼 게시글을 끊어서 표출하고 버튼을 누르면 다음 게시글이 나오는 형식으로 바꿔서 진행하였다.

좋아요 기능은 likeDB를 하나 더 만들어서 버튼을 눌렀을 때 해당 포스트와 현재 유저의 id값을 찾아 쿼리를 이용하여 해제 시 DB에서 값을 하나 빼고, postDB에서도 like_cnt에서 하나 빼주는 방식으로 진행했다. (버튼 클릭 시에는 반대로)

comment.js

댓글을 추가하고 로드해보았다.

댓글이 포스트와 다르게 조금 더 까다로웠던 부분은 포스트는 그냥 db에 저장해서 그 리스트를 다 가지고 오면 되는 부분이었는데 댓글의 경우 특정 포스트에 들어가는 부분이라 id를 비교해줘야했다.

느낀 점

아쉬운 점

• 기본 강의에 비해 코드가 길어지고 내용이 복잡해지다보니 스스로 정리가 안되고 그냥 이 전 코드를 참고한다는 느낌이 강했다.
• 생각보다 시간이 빠듯해서 무한스크롤이나 좋아요 실시간 반영 등 구현은 했지만 찝찝한 느낌이 있어서 한 번 더 만져봐야하는 기능인 것 같다.

좋았던 점

• 기능이 많아서 복잡했지만 그만큼 만들었을 때 '어! 이게 눌려서 반영이 되네?', '어 이미지가 올라가서 진짜 게시판의 느낌이 나네?'라고 생각이 들었다. 이 전 스타트업에 다닐 때 우리 회사에도 유저 커뮤니티가 있었고 거기에서 포토 후기, 일반 후기를 적을 수 있었다. 후기가 올라오면 유저는 수정 및 삭제가 불가하여 종종 본인의 글을 수정 또는 삭제를 원해서 우리를 컨택하는 경우가 있었는데 아 그 때는 이렇게 해결할 수 있었겠구나 라는 생각을 많이 한 것 같다.
  아직은 내가 직접 구현하는 코드보다 참고하는 코드가 더 많지만 언젠가 이게 쌓이다보면 하나의 지식으로 자리잡을 수 있지 않을까?