기록 관리 서비스 만들기 01 최적화 아키텍처 설계

그래프 라이브러리 학습

1. 라이브러리 철학, 기본 동작 방식, 데이터 관리 방식 학습
2. 성능 파악 - 노드 및 엣지 개수에 따른 FPS 확인
3. 스타일 커스텀 가능 범위 파악

그래프 라이브러리 기반 메인 화면 성능 최적화 아키텍처 설계

• 그래프 라이브러리는 미리 최적화 안해두면 나중에 아예 코드를 새로 짜야된다고 해서 최적화 아키텍처 설계중입니다

1. 데이터 관리 방식 학습 및 설계
   1. 원본(서버) 데이터 / 프로젝트 데이터 / 화면에 보여지는 데이터
      1. 별도 관리하여 컴포넌트 내에서 필요한 부분만 최소한으로 구독하고 사용하도록
      2. 현재 화면에 보여지는 데이터만 우선 렌더링하도록
   2. 데이터 캐싱 방식 설계
      1. tanstack query 활용 방식 및 코드 구조도 설계
2. 브라우저에서 변경 사항이 없는데 다시 화면(픽셀) 그리는 작업하지 않도록 코드 구조 설계
   1. 불필요한 리렌더링 방지 (위치 계산 등)
      1. 자동 메모이제이션 해주는 React Compiler 1.0 이해 및 활용
      2. Zustand-useShallow 등 메모이제이션 위한 외부 상태 관리 라이브러리 활용 구조도 설계
      3. CPU 를 사용하는 스타일 값 파악 후 사용하지 않도록
         • FPS가 낮아지는 등의 성능 저하 방지
   2. 불필요한 리페인트 방지 (스타일 계산 등)
      1. CPU 를 사용하는 스타일 값 파악 후 사용하지 않도록
   3. Composite 단계를 적극 활용하도록
      1. GPU 사용하는 스타일 값 파악 후 활용 방안 파악

그래프 구현 방식 설계

1. 커스텀 노드 설계
2. 노드 엣지 렌더링 구조 설계

목표

• ~11/29
  • 메인 화면 그래프 구현 완료 (새 노드 생성, 마크업 텍스트 입력, 이동, 포커스, 줌인/아웃, 위치 기억, 노드간 연결, 이미지/파일 첨부 등)
  • 리소스 데이터 프로젝트로 편입
  • Spotlight 데이터 검색 / 노드 생성
• ~12/5
  • AI 과거 기록 자동 추천
  • url 내용 요약
  • 파일/이미지 업로드 내용 요약
  • 성과 발표회 자료 만들고 준비
• (API 없이 구현 가능한 것들 구현)
• 그 이후 (~12/12)
  • API 연동