[2024.06.07] 뉴스피드 프로젝트 완성_트러블 슈팅 경험 회고

드디어 약 일주일에 걸친 뉴스피드 프로젝트가 완성되었다. 짧은 시간이기에 원하는 기능을 전부 선보이진 못하였어도, 다 같이 노력하여 만족스러운 페이지가 나왔다. 보완점도 좀 있고 아쉬움도 남아야 프로젝트가 제대로 진행된 느낌이 든다. 날밤 새면서 정말 고생한 팀원들👍👏 👍 👏

메인 페이지 무한 스크롤(더미데이터가 섞인)

 

프로젝트의 주요 기능들

 

그중 내가 맡았던 상세 페이지 및 글 작성 기능 구현 중 있었던 트러블 슈팅 혹은 새롭게 작업해 본 기능들을 정리해보려 한다.

 

1. 늘어나는 textarea 만들기

보통 textarea는 지정된 height를 넘으면 스크롤이 생기는데, UI적으로 예쁘지 않고 한눈에 모든 글을 확인할 수 없다는 점 때문에 늘어나는 textarea를 만들어 보았다.

 

동적으로 텍스트 영역 높이 조절

TitleArea: styled-components를 사용한 textarea

textarea를 useRef를 통해 DOM 조작할 수 있게 설정한 뒤, handleResizeHeight 함수를 통해 텍스트 영역의 스크롤 높이를 가져와 그 값으로 텍스트 영역의 높이를 설정할 수 있게 작성했다. 

초기 2줄로 보이는 문제, 한 줄로 보이게 하고 싶은데..

rows={1}을 설정해 해결!

그다음에는 textarea가 처음에 두 줄 높이로 넓게 보이는 문제가 있었는데, 초기 row를 1줄로 설정하여 이를 해결하였다.

 

 

2. react-quill 에디터 bold 적용문제

• 에디터에 bold가 적용이 안되고, 또한 작성된 본문에도 bold가 적용되지 않는 문제가 있었다. 이전 포스팅에서 다뤘으므로 링크만 첨부

2-1. https://jamong.tistory.com/52

[2024.06.04] react-quill 에디터 bold, underline 안되는 오류

2-2. https://jamong.tistory.com/53

 

3. session storage를 이용한 글 보존

기능 구현 후 테스트를 하다가, 포스팅을 마치고 썸네일을 작성하는 도중 다시 본문의 내용을 변경하고 싶을 수 있어 이전으로 가게 되면 원래 내용이 다 사라지는 현상이 있었다. 하지만 글을 작성할 때마다 서버와 통신하기에는 글의 포스팅이 많을수록 지연시간이 생김으로 세션 스토리지를 사용해 페이지를 완전히 벗어나기 전까지만 일시적으로 보관하는 방법을 선택하였다. 

다시 뒤로 돌아가도 글 내용이 보존된다!

 

아래 함수와 같이 제목과 본문을 입력하면 세션 스토리지에도 저장되게 로직을 구현했다. 처음에는 리렌더링 최소화를 위해 useRef를 통해 '작성완료' 버튼을 누를 때만 세션 스토리지에 저장되게 하였는데, 그 경우 페이지를 새로고침 하게 되면 내용 유지가 되지 않아 useState를 사용하여 저장하게 되었다. 하지만 새 글 작성 페이지에는 다른 요소들을 배치하지 않고 글 작성에만 집중할 수 있게 간소화된 UI를 가지고 있어 useState를 사용해도 별다른 성능 저하가 일어나지 않을 것 같았다.

세션 스토리지에 내용 등록

컴포넌트가 unmount되는 시점에 세션 스토리지에서 삭제된다.

 

프로젝트를 마치고 보니 원하던 기능 중 90%는 구현 했으나 다소 아쉬운 부분도 남는다. 특히 컴포넌트의 분리 부분이 너무 어렵게 느껴진다. 원하는 기능을 구현하는 것까지는 이제 무리가 없으나, 나중에 재활용하기 위한 로직을 구현했는가? 재사용성이 있는가?를 묻는다면 답변하기 어려울 것 같다. 유튜브의 다양한 컨퍼런스 영상들을 보며 '아 저렇게도 구현하는구나'라고 많이 배우지만 실제 급박한 프로젝트에 적용하기에는 무리인 걸 보니 조금 더 공부가 필요하단 사실을 새삼 다시 느꼈다. 쉴 틈 없이 바로 다음 프로젝트가 진행되어 못다 한 부분을 마무리 짓는 것에는 아쉬움이 남지만, 그래도 많은 걸 익히고 구현해 볼 수 있었던 프로젝트였다.