진행한 내용

피드 프론트엔드 작업

지난 포스팅에서 디자인 부분은 전혀 수정된게 없기 때문에 글로만 작성됩니다!

피드 리스트

이전에도 말했듯이 피드 리스트 페이지는 무한 스크롤 방식으로 구현되었습니다. 이 부분은 이전에도 많이 해봤기에 어려움은 없었으나 오히려 백엔드 파트에서 고민이 있었습니다. 현재 피드에 작성자 이름을 보여주는 파트가 있는데 피드 모델에는 creator 라는 user 모델과 연결된 키값밖에 저장을 안하게 되어 있어 mongoose의 populate를 사용해 유저 정보를 가져와야 했습니다. 그리고 populate로 가져오게 되면 해당 유저의 모든 데이터를 가져오기 때문에 불필요한 데이터가 너무 많이 가져와졌고, populate를 사용하는 것 자체도 불필요한 작업이라 생각해 피드 모델에 creatorName 이라는 데이터를 추가하는 방식으로 작업했습니다. 이렇게 되니 불필요한 데이터도 없고, 추가 유저 데이터를 가져오는 작업도 사라졌기에 훨씬 효율적인 방식이 되었습니다.

피드 상세

피드 상세는 모달로 구현되어 있습니다. 여기도 좀 고민이 있었습니다. 모달로 피드의 id 값만 넘겨주어 모달 컴포넌트에서 서버와 통신해 데이터를 가져오는 방식을 첫 번째로 생각했습니다. 이전 프로젝트들도 모두 이렇게 작업했고, 딱히 불만도 없었지만 "이미 피드 리스트에 모든 피드의 데이터를 가지고 있는데 불필요한 통신이지 않을까" 라는 생각이 들었습니다. 그래서 피드 리스트에서 해당 id를 가지고 있는 값을 모달에 한 번에 넘겨주고 모달에서는 데이터를 띄워주기만 하면 되도록 하였습니다. 물론 이렇게 했을 경우, 수정에 관한 함수 작성이 리스트 쪽에서도 조금 추가돼야 해서 개발자 관점에서 좋은 방법인가 싶기는 하지만 더 좋은 방법이 떠오르지도 않고 통신 과정을 한 번 없앴다는게 참 괜찮은 것 같아 그대로 두었습니다.

피드 작성

이미지 같은 경우 AWS 에 올라가도록 작업을 할 예정이지만 이 작업은 배포 단계에서 진행할 예정입니다. 현재는 input의 type="file" 데이터를 URL.createObjectURL로 변환해 DB에 저장하고 그 데이터를 그대로 가져와 사용만 하고 있습니다. 그래도 이미지 자체는 잘 나오고 최대 3개까지만 저장 된다던지 하는 클라이언트 측 동작들도 잘 되고 있습니다.

태그에 관해 문제가 한 번 있었는데 태그 작성 부분을 velog 의 태그 내용 그대로 가져왔는데 form 태그 안에 태그 input이 있고 이 과정에서 Enter 시, 태그 추가 라는 부분이 문제가 좀 있었습니다. Enter를 누르면 form 의 onSubmit 함수가 실행되었는데 검색해보면서 hidden input을 추가해라... onSubmit 함수를 이렇게 저렇게 고쳐라... 다 해봤으나 다 안돼서 ㅎ... 그냥 form 태그를 없애고 마우스 클릭으로 피드 작성이 가능하게 만들었습니다.

피드 수정 및 삭제

피드 수정은 위에서도 말했다시피 피드 리스트 쪽에서도 약간의 작업이 필요했습니다. 리스트에서 데이터를 상세 모달로 보내는 형식이기 때문에 리스트에서 서버와 통신을 해야 했습니다. 상세에 관한 내용은 상세와 관련된 컴포넌트에서 작업을 하는게 더 좋아보이지만 위에서 말한 통신 과정을 한 번 빼는 부분이 너무 마음에 들어 그냥 그대로 두었습니다.

피드 삭제는 딱히 문제 될 것도 없이 잘 삭제되었습니다.

마치며

생각보다 더 빠르게 돌아왔습니다. 확실히 공지사항 쪽에서 작업을 한 번 해놨기 때문에 에러가 생기는 부분도 별로 없고 작업 속도도 비교가 안됩니다. 이제 남은게 이벤트, 플레이리스트, 앨범인데... 이 전에 배포를 한 번 하고 다시 작업을 할지, 작업을 다 하고 배포를 할지 고민 중입니다. 뭐가 됐든 해보고 그 후에 다시 돌아오겠습니다!!

파이팅팅!!