IndexedDB 기반 Web IDE 저장 구조

배경

GAIA PX Web IDE에서는 브라우저 안에서 파일을 찾고 코드를 편집합니다. 자동완성과 오류 분석을 제공하려면 프로젝트의 소스와 파일 구조를 브라우저에 보관해야 했습니다.

문제

• 기존 저장 방식으로는 프로젝트 전체 소스를 보존하기 어려웠습니다.
• 파일 탐색, 편집, 저장, 복원이 하나의 작업 흐름으로 연결되어야 했습니다.
• 저장된 소스를 분석해 자동완성과 오류 정보로 제공해야 했습니다.

선택

브라우저 메모리 대신 IndexedDB에 파일 단위로 저장했습니다. 다시 접속해도 프로젝트 구조를 복원할 수 있고, 저장한 소스를 AST 분석의 입력으로 사용할 수 있습니다.

flowchart LR
tree["파일 트리"] --> storage["IndexedDB 파일 저장"]
storage --> restore["프로젝트 복원"]
storage --> ast["AST 분석"]
ast --> completion["자동완성"]
ast --> markers["오류 표기"]
restore --> editor["Monaco Editor"]

구현

• 프로젝트 소스를 파일 단위로 IndexedDB에 저장하고 복원했습니다.
• 저장된 소스를 AST로 분석해 코드 구조와 오류 정보를 파악했습니다.
• AST 분석 결과를 Monaco Editor의 자동완성과 오류 표기에 연결했습니다.

결과

• IndexedDB에 프로젝트 소스를 파일 단위로 저장하고 복원했습니다.
• 파일 탐색, 편집, 저장, 복원 흐름을 연결했습니다.
• AST 분석 결과를 자동완성과 오류 표기에 사용했습니다.

공개 범위

내부 저장 코드와 제품 화면은 공개 범위에서 제외했습니다.