백엔드와의 협업의 중요성 이전 프로젝트에서 백엔드 업무를 담당하면서 혼자 모든 작업을 처리했습니다. 그러나 현대의 개발 환경에서는 다양한 전문가와의 협업이 필수적이라고 생각하게 되었습니다. 이에 백엔드 개발자와 함께 프로젝트를 진행하기 위해 팀원을 모집하였고, 그 과정에서 제 생각과 잘 맞는 백엔드 개발자분과 함께 작업하게 되었습니다. 그럼에도 중간에 잠시 프로젝트 참여에 어려움이 있었지만, 프로젝트에 대한 공동의 열정으로 다시 팀을 이끌며 진행하였습니다. 팀원과의 협업은 프로젝트 진행 속도를 높이고, 더 의미 있는 결과물을 만들고 있습니다.
프로젝트 마이그레이션의 중요성 및 어려움
바닐라 자바스크립트에서 리액트와 타입스크립트로의 프로젝트 마이그레이션은 간단한 작업이 아니었습니다. 기존 코드의 구조와 로직을 유지하면서, React의 특성을 최대한 활용해야 했습니다. 이 과정에서 기존 코드의 문제점을 발견하고, 바로 개선할 기회가 있었습니다. 예를 들어, 예전에 없던 유연한 음소거 활성화/비활성화 버튼도 추가하게 되었습니다.
가상 돔의 이해
리액트의 특성상 가상 돔에 조작을 해야 했고, 뮤직 스트리밍 서비스에서 노래를 이전, 다음곡으로 넘길 시 음악 진행바의 지연을 최소화하는 것이 중요했습니다. 리액트 공식 문서에서 useRef와 useEffect에 대한 부분을 참고하여 프로젝트에 해답을 찾았습니다. 이를 통해 리액트 공식 문서의 중요성을 다시 한번 깨달았고, 리액트를 깊게 이해하기 위해 공식 문서를 공부해야겠다는 생각이 들었습니다.
API 호출과 React Query의 중요성
프로젝트 초기에는 **useEffect**의 의존성 배열 설정 문제로 인해 API가 지속적으로 호출되는 문제에 직면했습니다. 이러한 과도한 API 호출은 불필요한 서버 부하를 유발하고 사용자 경험을 저하시켰으며, 특히 차트 API가 각 요청마다 약 100개의 썸네일 이미지를 반환해야 했기 때문에 이 문제는 더욱 심각했습니다. 이에 대응하여 React Query를 도입하여 데이터 캐싱을 구현하였고, 이로 인해 네트워크 탭에서 확인할 수 있듯이 차트의 썸네일 이미지가 성공적으로 메모리 캐시와 함께 디스크 캐시에도 저장되었습니다. 이 캐싱 전략은 재방문 시에 API 호출 없이 썸네일 이미지를 즉시 로드할 수 있게 하여, 서버 부하를 크게 감소시키고 사용자에게 더욱 빠른 로딩 경험을 제공하였습니다.
사용자 경험에 대한 깊은 고민
마이그레이션을 진행하면서 이전 프로젝트에서 눈치채지 못했던 불편한 부분들이 많이 눈에 띄었습니다. 예를 들어, 로딩 처리나 이전곡/다음곡을 연속 클릭했을 때의 문제점 등, 사용자의 편의성을 최우선으로 생각하며 여러 개선점을 찾았습니다. 현재는 플레이리스트 기능을 추가하려고 계획 중인데, 고려해야 할 부분, 예를 들면 유효성 체크, 믹스테잎 폴더 생성 로직 등이 있어서 고민 중입니다. 아래 사진은 피그마를 이용해서 기획 겸 디자인을 했습니다.
어떻게 한꺼번에 모달들을 관리하지?
플레이리스트 구성을 위한 인터페이스에서 모달 창을 활용하면서, 특히 레트로 스타일의 윈도우 시작 표시줄에서 모달의 상태를 표시하는 기능을 추가하는 과정이 필요했습니다. 이때 모달 관리의 효율성을 높이기 위해 여러 고민 끝에 기능을 주먹구구식으로 구현했습니다. 작업 중 스트레스를 겪어 온라인 커뮤니티에 조언을 구했고, 경험 많은 개발자가 모달을 중앙에서 관리할 수 있는 모달 매니저를 사용할 것을 제안했습니다. 초기에 무계획적으로 작업을 시작한 탓에, props의 의존성 문제와 이름 혼란이 커져 정리하는 데 많은 시간이 소요됐습니다. 이 경험을 통해 사전 계획의 중요성을 깊이 인식하게 되었습니다.
모달의 이름과 아이콘을 효율적으로 관리하기 위해 config 파일을 도입했고, 이로 인해 파일을 일일이 열어 수정하는 번거로움을 줄일 수 있었습니다. props를 정리하고 config 파일을 만들었지만, z-index의 관리가 가장 까다로운 부분이었습니다.
로딩 모달 제작 시 React의 Suspense를 활용했으나, 로딩 모달이 다른 모달들 위에 위치해야 하는데 반대로 배치되어 보이지 않는 문제가 발생했습니다. 이는 단순한 CSS 스타일 문제가 아니라, z-index의 관리를 소홀히 한 결과였습니다. z-index를 CSS로만 조절하려 했으나, 데이터의 정확한 반영이 이루어지지 않아 모달이 제대로 표시되기 위해선 두 번 클릭해야 하는 상황이 발생했습니다. 이 문제를 인식한 후, z-index 관리 방법을 개선하여 CSS만으로 해결할 수 없는 문제들을 해결했습니다. 이러한 변경을 통해 데이터 관리가 강화되었고, z-index가 적절히 업데이트되어 모달이 올바르게 표시될 수 있도록 조정했습니다.
이 경험은 앞으로 마주칠 문제들에 대처할 수 있는 용기를 주었으며, 더욱 집중하여 작업할 필요성을 느끼게 해주었습니다.