localStorage와 인터셉터
로그인 후 access token을 저장하고, 요청 인터셉터가
Authorization 헤더를 자동으로 붙인다.
React 통합 상태 흐름
프론트엔드는 axios, AuthContext,
react-router-dom, socket.io-client, Monaco
Editor를 조합해 NestJS 백엔드와 HTTP 및 WebSocket 계약을 함께
사용한다.
PrivateRoute
/와 /project/:projectId는 인증 상태가
복구된 뒤 렌더링하고, 실패하면 로그인 페이지로 보낸다.
프로젝트 목록과 파일 선택
GET /projects와 상세 조회 결과로 파일과 폴더 트리를
구성하고 선택된 파일 내용을 에디터에 넣는다.
join_file과 code_change
파일을 열면 협업 세션에 참가하고, 코드 변경은 Socket.IO 이벤트로 즉시 전파한다.
실시간 동기화디바운스된 REST 저장
실시간 전파와 별도로 800ms 뒤 PATCH /content를 호출해
최종 파일 내용을 저장한다.