React 화면은 NestJS API와 실시간 채널을 함께 사용한다
인증 상태, 프로젝트 목록, 코드 에디터, 협업 이벤트를 프론트 구조 안에 연결한다.
React UI페이지, 컴포넌트, Monaco Editor가 사용자 작업을 받는다.
→
API Clientaxios 인스턴스가 JWT를 붙여 REST API를 호출한다.
→
NestJS인증, 프로젝트, 파일 저장과 실시간 협업을 처리한다.
Router로그인, 프로젝트, 에디터 페이지를 나눈다.
AuthContext토큰과 사용자 상태를 유지한다.
ServiceAPI 호출을 화면 코드 밖으로 분리한다.
Socket문서 변경을 다른 사용자에게 전달한다.
통합의 핵심은 화면 컴포넌트가 백엔드 세부 구현을 모르고, API와 이벤트 계약만 사용하게 만드는 것이다.