[2024.06.07] 뉴스피드 프로젝트 완성_트러블 슈팅 경험 회고
드디어 약 일주일에 걸친 뉴스피드 프로젝트가 완성되었다. 짧은 시간이기에 원하는 기능을 전부 선보이진 못하였어도, 다 같이 노력하여 만족스러운 페이지가 나왔다. 보완점도 좀 있고 아쉬움도 남아야 프로젝트가 제대로 진행된 느낌이 든다. 날밤 새면서 정말 고생한 팀원들👍👏 👍 👏
그중 내가 맡았던 상세 페이지 및 글 작성 기능 구현 중 있었던 트러블 슈팅 혹은 새롭게 작업해 본 기능들을 정리해보려 한다.
1. 늘어나는 textarea 만들기
보통 textarea는 지정된 height를 넘으면 스크롤이 생기는데, UI적으로 예쁘지 않고 한눈에 모든 글을 확인할 수 없다는 점 때문에 늘어나는 textarea를 만들어 보았다.
textarea를 useRef를 통해 DOM 조작할 수 있게 설정한 뒤, handleResizeHeight 함수를 통해 텍스트 영역의 스크롤 높이를 가져와 그 값으로 텍스트 영역의 높이를 설정할 수 있게 작성했다.
그다음에는 textarea가 처음에 두 줄 높이로 넓게 보이는 문제가 있었는데, 초기 row를 1줄로 설정하여 이를 해결하였다.
2. react-quill 에디터 bold 적용문제
- 에디터에 bold가 적용이 안되고, 또한 작성된 본문에도 bold가 적용되지 않는 문제가 있었다. 이전 포스팅에서 다뤘으므로 링크만 첨부
2-1. https://jamong.tistory.com/52
[2024.06.04] react-quill 에디터 bold, underline 안되는 오류
프로젝트 내 '새 글 작성' 기능을 위해 에디터를 추가하는 작업 중에 다른 기능은 되는데 bold와 underline 기능만 작동하지 않아서 한참 헤맸다. 해결 방법은 import 해 온 Reactqill태그를 통해 에디터
jamong.tistory.com
2-2. https://jamong.tistory.com/53
3. session storage를 이용한 글 보존
기능 구현 후 테스트를 하다가, 포스팅을 마치고 썸네일을 작성하는 도중 다시 본문의 내용을 변경하고 싶을 수 있어 이전으로 가게 되면 원래 내용이 다 사라지는 현상이 있었다. 하지만 글을 작성할 때마다 서버와 통신하기에는 글의 포스팅이 많을수록 지연시간이 생김으로 세션 스토리지를 사용해 페이지를 완전히 벗어나기 전까지만 일시적으로 보관하는 방법을 선택하였다.
아래 함수와 같이 제목과 본문을 입력하면 세션 스토리지에도 저장되게 로직을 구현했다. 처음에는 리렌더링 최소화를 위해 useRef를 통해 '작성완료' 버튼을 누를 때만 세션 스토리지에 저장되게 하였는데, 그 경우 페이지를 새로고침 하게 되면 내용 유지가 되지 않아 useState를 사용하여 저장하게 되었다. 하지만 새 글 작성 페이지에는 다른 요소들을 배치하지 않고 글 작성에만 집중할 수 있게 간소화된 UI를 가지고 있어 useState를 사용해도 별다른 성능 저하가 일어나지 않을 것 같았다.
프로젝트를 마치고 보니 원하던 기능 중 90%는 구현 했으나 다소 아쉬운 부분도 남는다. 특히 컴포넌트의 분리 부분이 너무 어렵게 느껴진다. 원하는 기능을 구현하는 것까지는 이제 무리가 없으나, 나중에 재활용하기 위한 로직을 구현했는가? 재사용성이 있는가?를 묻는다면 답변하기 어려울 것 같다. 유튜브의 다양한 컨퍼런스 영상들을 보며 '아 저렇게도 구현하는구나'라고 많이 배우지만 실제 급박한 프로젝트에 적용하기에는 무리인 걸 보니 조금 더 공부가 필요하단 사실을 새삼 다시 느꼈다. 쉴 틈 없이 바로 다음 프로젝트가 진행되어 못다 한 부분을 마무리 짓는 것에는 아쉬움이 남지만, 그래도 많은 걸 익히고 구현해 볼 수 있었던 프로젝트였다.