들어가기 전에
코드 편집 페이지의 기초적인 UI 및 클라이언트 기능 구현을 완료했다.
다뤄야할 상태값들이 많기도 하고 의존관계를 가지고 데이터 타입이 복잡해서
기능 구현을 위한 고민의 시간이 엄청 필요했다.결과물들과 함께 어떻게 구현했는지 간략하게 작성해두려고 한다.
파일 트리
rc-tree 라이브러리를 사용해서 구현했다.
폴더 펼치기/접기
파일 트리 모두 접기
rc-tree 라이브러리 자체에 펼쳐진 모든 폴더를 접는 기능은 존재하지 않았다.
다만 초기 렌더링 시 폴더를 모두 펼쳐놓을 것인지 아니면 모두 접어둘 것인지만 설정이 가능했다.
React 컴포넌트에 key 속성의 값이 바뀌면 재렌더링이 되는 성질을 이용해서
폴더 접기 버튼을 클릭하면 key 값을 1 증가시키는 방식으로 구현했다.
컨텍스트 메뉴
코드 편집 페이지는 총 3개의 상태를 가진다.
이 상태들은 모두 recoil로 관리한다.
- 파일 트리 데이터
- 탭 데이터
- 열린 탭 상태
- 활성화 된 탭 상태
- 파일 별 저장된 코드 데이터
파일 트리의 파일을 클릭하면
탭 데이터 상태의 활성화된 탭을 업데이트 해줘야한다.
즉, 의존 관계이다.따라서 파일 트리의 데이터를 변경하면 다른 두 상태의 값들도 변경해줘야한다.
파일 트리 상태 데이터의 더미 데이터이다.
컨텍스트 메뉴를 렌더링시키면 이 컴포넌트는 선택된 파일의 경로 값을 가진다.
각 파일 시스템(파일, 폴더)는 key 속성(파일 경로)을 가진다.
변수명을 filePath 로 변경하고 싶었는데 라이브러리가 이 값을 반드시 필요로 한다.filePath라는 변수명을 생성해서 같은 값을 사용하는 것보단
유일 값인 파일 경로를 key값으로 사용했다.
만약 폴더일 경우 children이라는 속성을 가지며 파일 시스템 객체 데이터를 가지는 배열 값을 가진다.
key 값이 컨텍스트 메뉴 컴포넌트가 가진 값과 일치하면 해당 객체를 수정하고
그렇지 않다면 children에 접근 후 순회하면서 해당 파일 경로를 가진 key를 찾아서 객체를 수정한다.
파일 생성
파일 생성 즉시 해당 파일을 탭에 생성하고 활성화된 탭으로 지정해줘야한다.
그리고 코드 에디터의 값을 해당파일의 저장된 코드 상태에 접근해서 변경해줘야한다.
파일 별 저장된 코드 상태의 더미 데이터 이다.
파일 경로를 key로, 파일 내용을 value 로 가진다.
탭 데이터 상태의 데이터 타입이다.
active는 활성화된 탭의 인덱스 값,
files는 탭에 존재하는 파일의 경로,
codes는 해당 탭 인덱스의 코드 값을 가진다.
파일 트리에 인터랙션이 발생하면
파일 별로 저장된 코드의 상태와탭 상태에 모두 접근해줘야한다.
이러한 로직은 생성 뿐만 아니라 파일 이름 변경, 저장 등 아래 모든 행위에 반드시 필요하다.
파일 이름 변경
파일 저장
파일 삭제
폴더 생성
폴더 이름 변경
폴더 삭제
코드 에디터
Monaco 라이브러리를 사용해서 구현했다.
탭 생성(파일 열기)
탭 닫기
Zoom in/out
Monaco 라이브러리에 존재하는 설정 옵션을 적용해줬다.
코드 검색
Monaco 라이브러리에 존재하는 설정 옵션을 적용해줬다.
자동 완성(javascript)
Monaco 라이브러리에 존재하는 설정 옵션을 적용해줬다.
