[Main Project] 후즈북

프로젝트 간단 소개

Github

기존의 팀원분들께서 프리 프로젝트가 끝나기 전에 기획을 하셔서 팀원을 모집하셨는데, 책을 좋아하던 터라 이 팀에 참여하게 되었다.
프로젝트의 주요 서비스는 추천 기반 도서 큐레이션 서비스로, 큐레이션 CRUD 를 기본적인 기능이다.

내가 맡은 업무

• 마이페이지/타유저페이지 회원 관리
  • 회원 정보 조회
  • 마이페이지 - 회원 정보 수정
  • form Data 로 데이터 전송
• 댓글 CRUD
  • 리덕스 툴킷 사용
• 좋아요 / 구독하기 기능
• 페이지 네이션
  • React-paginate 라이브러리 사용
  • 라우팅을 따로 하지 않아 재 라우팅 설정을 하면서 리팩토링
• 책 검색 api
  • 다음 오픈 api 사용

문제 해결

1. 마이페이지에서 회원 정보 수정 시 에러
   

• 회원 정보 수정 PATCH 요청시 필요한 Body 데이터로는 닉네임, 소개글, 프로필 이미지 이다. 여기서 이미지 파일이 포함이 되므로써 요청 데이터 형식은 JSON 이 아니라 Form Data 를 이용하는 것이었다.

• Body 에 요청해야 하는 데이터들에 대해 설명하자면

  key	value
  memberPatchDto	{ "nickname": "어몽어스", "introduce": "안녕하세요", "basicImage": true/false }
  memberImage	선택한 File

  • memberImage 라는 key 는 nickname, introduce, basicImage 의 정보 객체를 value 로 가진다. 그중 basicImage 는 기본 이미지로 변경하고자 할 때 true 값을 , 그 외의 이미지로 변경하고자 할 때는 false 값을 가진다. 이 데이터는 application/json 형태로 보내야 한다.
  • memberPatchDto key 값은 선택된 프로필 이미지 file 을 value 로 가진다. 이미지 파일이므로 form Data 로 보내야 한다.

• 어려웠던 이유

  • 전체의 데이터를 form Data 로 보내야하는데 그 중 하나의 데이터 memberImage 라는 정보는 application/json 형태로 보내야 한다는 것이다.

  • 선택한 파일에 한해서 분기가 3가지로 나뉜다. 위의 사진에서 선택한 file 과 미리보기로 띄어주는 selectImage 라는 변수는 각각 다른 값을 가진다.

    설명	file	selectImage	basicImage	memberImage
    기본 이미지에서 다른 이미지로 변경 시	O	O	false	file 값
    기존 이미지에서 변경 없이	null	O	false	''
    기존 이미지에서 기본 이미지로 변경 시	null	X	true	''

• 해결 방법

  • formData 형식으로 변수를 생성한다.
  • 분기에 맞게 필요한 데이터를 추가시킨다.
  • formData 에서 '' 으로 주고 싶을 때는 Blob을 이용한다.
  • type 을 지정하고 싶을 때는 Blob 을 이용해 type 을 지정한다.
    

2. 댓글 CRUD 시 매번 새로고침

• 댓글을 작성하고, 삭제하고, 수정할 때 매번 새로고침을 해야 다시 댓글 리스트를 조회하는 형식으로 로직을 구현하였다.
  
• 사용자 입장에서 화면에 보이는 면에서는 큰 문제가 없었지만, 네트워크 상에서는 매번 페이지를 재렌더링함에따라 get요청을 매번 해야하는 비효율적이었다.
• 댓글을 전역으로 관리하기 위해 Redux Toolkit 라이브러리를 사용했다. 이렇게 되면 댓글 작성 POST, 수정 PATCH, 삭제 DELETE 시 리덕스 공간에 값을 변화시켜 저장해놓고 댓글을 가져올 수 있어, 매번 새로고침을 하면서 GET 요청을 할 필요가 없다.
  
• 아래와 같이 단일 큐레이션 상세 페이지에 접속시 오른쪽에 보이는 리덕스 공간에서 가져온 댓글 데이터들을 온전히 가져올 수 있다는 것이다.
  

3. 페이지네이션 오류

• 페이지네이션을 구현하였지만, api 요청시에만 필요하다고 생각했고, url 에 적용시키지 못하였다.

• 이런 원인으로 4페이지에서 어떤 큐레이션을 클릭하고 뒤로 가기시 매번 페이지가 1로 초기화가 되어 버리고, 어쩔때는 undefined 로 값이 나오기도 했다.

• 라우팅을 재설정하고 useQueryParmas 를 이용하여 url 을 통해 사용자 입장에서 편하게 url 정보를 기억할 수 있도록 하였다.

  (예) BEST 큐레이션 페이지
  1. 라우팅 설정은 다음과 같다.
  

  2. 메인 페이지에서 BEST 큐레이션 페이지로 이동하기 위해서는 헤더부분에서 클릭을 하여야 하는데, 이 때 navigate 를 설정해준다.
     

  3. 그럼 BEST 큐레이션 페이지에 첫 접속시 url은 http://whosebook-client.s3-website.ap-northeast-2.amazonaws.com/curation/best?page=1&size=9 와 같다.
  4. 이 중 useSearchParams 를 이용하여 page 값을 알아낸다.
     
  5. pageParm 값으로 페이지네이션의 버튼값을 변경해줌에 따라 작동될 수 있도록 한다.

  
  
  
  
  

4. 반복되는 컴포넌트 사이 중첩 라우팅

• 마이페이지에서는 총 네 가지의 컴포넌트가 바뀌게 된다. 비슷해 보이지만 다른 기능을 구현해야하기에 나눌 수 밖에 없다.
  • 회원 정보 수정
    
  • 작성한 큐레이션
    
  • 좋아요한 큐레이션
    
  • 구독하는 큐레이터
    
• 자세히 보면 MyPage 페이지에서 바뀌는 부분은 빨간색 박스와 같다.
• 따라서 라우팅 처리를 Nested Routing 중첩 라우팅으로 처리하였다.
  큰 틀 라우팅 잡는 파일에서는 MyPage 페이지를 /mypage/* 로 path 를 처리하고,
  
  마이페이지 내에서 빨간색으로 변하는 부분에 대한 컴포넌트를 각각 라우팅 처리해준다.
  

느낀 점

• 업무가 많았지만, 스스로 해냄으로써 뿌듯함을 느낄 수 있었다.
• 특히나 전에 어려워서 사용하기 꺼려했던,
  Redux Toolkit 을 이용해서 전역관리하는 법을 익히고 적용시킬 수 있었다.
• 새롭게 알게 된 기능인,
  Nested Routing 을 통해 불필요하게 반복되는 컴포넌트들의 렌더링을 막을 수 있었다.
  Form Data 를 이용해 이미지와 함께 요청을 처리하는 방법을 알 수 있었다.
  useSearchParams 를 이용해 QueryString 으로 url 에 접근하는 방식에 대해 알 수 있었다.
• 많은 아이디어와 꼼꼼하게 기획을 한 탓에 프로젝트가 진행이 될 수록 큰 문제없이 해낼 수 있었다.
• 하루 2번의 스크럼을 통해 진행방향과 속도를 팀원들과 잘 맞추고 잘 소통할 수 있었다.
  
  
  
  

아쉬운점

• 중첩 라우팅을 사용했지만, 다른 페이지에서 불필요하게 컴포넌트들이 재렌더링 되는 경우가 많았다. 데모 데이 때 다른 팀의 팀원이 useLayoutEffect hook 사용을 추천해주셨다. 다른 라이브러리를 사용하는 법도 배워야겠다.
• 반응형으로 웹을 만들지 못해서 아쉽다. 아직 Media Query 에 대해 어색하기만 하다.
• 소개글을 넣지 않아서 초반에 사용법에 대한 개념을 쉽게 파악하지 못한다는 피드백을 받았다.
• 현업에서도 쓰일만한 디자인요소를 갖춰야겠다고 생각했다. 물론 현업에 들어가면 디자이너분들이 계실 테지만, 그 전까지도 나도 UI/UX 디자이너로서 큰 그림을 그릴 수 있는 개발자가 되고 싶다.