4인 팀의 코드 설계 기준을 합의하고, 복수 선행 학습 관계를 DAG로 구현한 학습 로드맵 플랫폼
Overview
사용자별 학습 공간 생성 및 기술 기반 로드맵 구성
DAG 구조로 기술 학습 흐름 시각화
워크스페이스 공유, 좋아요, 댓글과 대댓글 기능 제공
Technology
여러 선행 개념이 연결되는 학습 로드맵을 노드와 엣지로 표현했습니다. 노드 배치와 연결 등 기본 편집 기능을 활용해 학습 관계와 워크스페이스 동작 구현에 집중했습니다.
React Flow의 노드와 엣지부터 워크스페이스와 학습 데이터까지 서로 연결되는 데이터가 많아, 데이터 형태를 명확하게 맞출 필요가 있었습니다. 공통 데이터 구조와 컴포넌트 간 전달 값을 타입으로 정의해, 그래프와 UI 사이에서 잘못된 형태의 데이터나 누락된 값을 개발 단계에서 확인했습니다.
별도 백엔드 서버 없이 관리형 데이터베이스를 바로 사용할 수 있어 선택했습니다. 노드와 엣지를 JSONB 컬럼으로 저장해 그래프 단위로 저장하고 복원하도록 구성했습니다.
선택한 노드처럼 여러 워크스페이스 컴포넌트가 함께 참조하는 편집 상태를 스토어에서 관리했습니다. 컴포넌트 사이에 여러 단계로 props를 전달하는 부담을 줄였습니다.
워크스페이스 UI와 인증, 데이터 조회, 서버 처리를 한 프로젝트에서 관리했습니다. 서버 처리와 클라이언트의 그래프 편집 영역을 구분해 구성했습니다.
여러 팀원이 기능을 나눠 개발하는 만큼 각자 구현한 화면에서도 간격, 색상, 타이포그래피 같은 공통 디자인 규칙을 유지할 필요가 있었습니다. 정해진 스타일 값을 바탕으로 같은 방식의 유틸리티 클래스를 사용해 화면마다 스타일 작성 방식이 달라지는 것을 줄였습니다.
버튼, 다이얼로그, 드롭다운처럼 여러 화면에서 반복되는 UI를 기능마다 새로 구현하면 디자인과 동작이 달라질 수 있었습니다. 컴포넌트 코드를 프로젝트에 가져와 공통으로 사용하면서도 직접 수정할 수 있어, 반복 구현을 줄이고 프로젝트에 맞는 공통 UI를 만들 수 있었습니다.
워크스페이스와 사용자 정보처럼 서버에서 가져오는 데이터마다 조회, 로딩, 오류 상태를 직접 관리하면 비동기 처리 로직이 여러 컴포넌트에 반복될 수 있었습니다. 서버 데이터의 조회 상태와 캐시를 하나의 방식으로 관리하고, 같은 데이터를 불필요하게 다시 요청하는 것을 줄였습니다.
Next.js로 구현한 화면과 서버 기능을 프론트엔드와 백엔드 배포 환경으로 나누지 않고 하나의 환경에서 빌드하고 배포할 수 있었습니다. Git 기반 배포로 팀 개발 과정에서 배포 흐름을 단순하게 유지하고, 별도 서버 인프라 관리 없이 운영할 수 있었습니다.
Key Points
프론트엔드 개발자 4명이 워크스페이스, 커뮤니티, 커스터마이징을 병렬로 개발하기 위해 공통 구조가 필요했습니다.
FSD 도입을 제안했지만, 팀원들은 초기 학습 비용과 짧은 개발 기간에 비해 구조가 복잡해질 가능성을 우려했습니다.
실제 개발할 기능을 예시로 책임이 섞일 수 있는 지점과 공통 코드 배치 기준의 필요성을 설명했습니다.
계층별 역할과 코드 배치 기준을 정리해 공유하고, 각 담당 기능에 적용하는 방법을 논의했습니다.
팀 논의를 통해 app은 전역 설정과 라우팅, widgets는 조합형 UI, features는 비즈니스 기능, shared는 공통 코드를 담당하도록 책임과 폴더 컨벤션을 합의했습니다.
공통된 책임과 배치 기준을 마련해 담당 영역별 코드 위치와 변경 범위를 파악하기 쉬워졌습니다.
코드 리뷰에서 파일 위치와 배치 기준을 재확인하는 과정이 줄어, 리뷰를 로직 검토에 집중할 수 있었습니다.
초기 Tree 구조에서는 하나의 노드가 하나의 부모만 가질 수 있어 복수 선행 학습 관계를 표현하는 데 한계가 있었습니다.
예를 들어 React의 선행 기술인 HTML과 JavaScript를 함께 연결할 수 없었습니다.
하나의 학습 항목에 여러 선행 개념을 연결할 수 있도록 로드맵을 DAG(방향성 비순환 그래프) 구조로 전환했습니다.
학습 항목을 노드로, 선행 학습 관계를 방향이 있는 엣지로 구분해 데이터 구조를 설계했습니다.
편집한 그래프 전체의 저장과 복원을 우선해 노드와 엣지를 JSONB로 저장했습니다.
동일한 학습 항목을 중복 생성하지 않고, 여러 선행 개념이 하나의 노드로 이어지는 관계를 표현할 수 있게 됐습니다.
노드 배치와 연결 정보를 포함한 학습 로드맵의 저장과 복원을 구현했습니다.
Gallery
