미리보기

프로젝트 개요

인포마이닝에서 참여한 Vue와 Nuxt를 사용한 커넥닥 프로젝트입니다. 환자의 상태를 실시간으로 모니터링하는 웹 서비스를 개발했습니다.

레거시 코드 리팩토링

• 기존 switch 문은 10개 이상의 분기 조건을 다루고 있어 가독성이 떨어졌고, 불필요한 비교 연산이 반복되어 코드 유지보수에 어려움이 있었습니다.

• switch 문을 객체 리터럴로 변경하여, 한 번의 키 검색으로 결과를 도출하도록 개선했습니다.

• 조건 분기의 흐름이 명확해졌습니다. 코드 리뷰에서도 구조적 개선으로 긍정적인 피드백을 받으며 무리 없이 통과되었습니다.

WEB Storage 개선 및 상태 관리 도구 전환

• 레거시한 프레임워크와 버전을 사용하고 있는 상황에서 vuex-persistedstate 라이브러리가 지원 종료 되었고, 기존 로직이 복잡해 유지보수가 어려웠습니다.

• 공식 지원을 받는 Pinia 로 전환을 제안하고 주도적으로 도입했습니다. VueUse를 함께 적용해 직렬화 없이 Web Storage와 자동 연동 구조를 구현했습니다. 또한 TypeScript를 함께 도입해 안정성을 확보했습니다.

• 팀 내부 문서를 작성하여 팀원이 빠르게 적응할 수 있도록 가이드를 제공했고, 기존 코드가 단순화됐으며, 로직 충돌이나 상태 누락 문제 없이 안정적인 저장 환경 확보할 수 있었습니다.

사용자 경험 중심의 예외 처리 개선

• 퇴원 처리 기능에서 데이터가 존재하지 않는 경우, 프로세스가 무응답 상태로 종료되어 사용자 혼란을 유발할 수 있었습니다.

• 예외 상황을 개발 도중 인지하고 기획자와 논의하여, 해당 케이스에 사용자 안내 문구를 띄우고 프로세스를 안전하게 종료하는 흐름으로 개선했습니다.

• 프로세스 중단 없이 사용자 인지 가능성을 높이고, 오류 상황에서의 이탈률을 방지했습니다.

프로젝트 개요

GitHub: https://github.com/mamonde456/next-blog

Site: https://next-blog-six-amber.vercel.app

Next.js를 사용하여 마크다운을 활용한 정적 블로그를 제작하였고, 이후 사용자 입력을 통해 게시글을 업로드하는 방식으로 전향하여 이후로도 학습을 위해 개인 블로그를 만들고 있습니다.

SSG > CSR > SSR 전환 결정의 배경: 사용성 중심의 고민

• 정적 마크다운 블로그를 만들면서, 콘텐츠를 보여주기 위해 매번 파일을 생성해야 하는 구조가 불편하게 느껴졌습니다. 사용자 입력을 반영해 블로그를 동적으로 생성하고 싶었고, 이에 따라 클라이언트에서 Firebase와 통신하는 CSR 구조로 전환했습니다. 그러나 이 방식은 SEO와 초기 로딩 속도 측면에서 한계를 보였습니다.

• 클라이언트 렌더링의 한계를 해결하기 위해 SSR을 도입하고, getServerSideProps를 활용해 데이터를 서버에서 먼저 가져와 페이지를 생성했습니다.

• 사용자 입력 기반의 유연한 블로그 생성이 가능해졌고, SSR 전환으로 초기 로딩 성능과 SEO를 함께 확보할 수 있었습니다.

실시간성과 구조 복잡도에 따른 데이터베이스 분리 설계

• 모든 데이터를 하나의 DB로 처리할 경우 관리의 복잡성이 발생할 수 있었습니다. 특히 실시간성이 필요한 기능과 복잡한 구조가 필요한 기능 간 요구 조건이 달랐습니다.

• 채팅, 좋아요, 북마크 등 단순하고 실시간 반응이 필요한 기능은 Realtime Database, 사용자 정보 및 블로그 게시물 등은 Cloud Firestore로 분리해 저장 구조를 구성했습니다.

• 기능 목적에 따른 데이터 흐름 분리로 성능과 유지보수성이 크게 개선되었고, Firestore의 쿼리 기능과 실시간 구독을 활용해 사용자 경험도 강화할 수 있었습니다.

페이지 기반에서 기능 기반으로: 파일 구조의 점진적 리팩토링

• 기존 page router 방식은 페이지 단위로 폴더가 구성되어 있어 기능별 관련 파일이 흩어지고, 유지보수 시 흐름을 파악하기 어려운 문제가 있었습니다.

• app router 스타일의 구조를 참고하여 기능 단위로 폴더를 구성하고, 페이지, 컴포넌트, 훅 등을 하나의 기능 단위로 묶는 구조로 점진적 리팩토링을 진행했습니다.

• 기능별 응집력이 높아지고, 새로운 기능 추가나 수정 시 변경 범위를 쉽게 파악할 수 있게 되었습니다. 구조가 명확해지면서 개발 속도와 효율도 개선되었습니다.