BLUE
파일 구조를 이용할 수 있는 노트 앱입니다.
배포주소 : https://main--gleaming-dieffenbachia-20b345.netlify.app/
1. 스택
- react
- fxjs
2. 이용방법
폴더 및 파일 생성
현재 폴더 클릭 후 파일 혹은 폴더 생성
이름 변경
파일 혹은 폴더 클릭 후 Enter 시 이름 변경 가능하고 취소할 수 있다.
파일 보기
파일 클릭 시 파일에 대한 정보가 담겨있는 뷰가 생성
삭제
파일 혹은 폴더의 삭제 버튼 클릭 시 삭제
이미지 변경
우측 상단 버튼 클릭 시 이미지 변경
3. 주요기능
폴더 중첩
재귀를 이용해 폴더에 폴더나 파일을 생성할 수 있도록 파일 시스템을 구현했다.
삭제
폴더 삭제 시 : 현재 폴더와 폴더 내부에 들어있는 모든 내용을 같이 삭제한다.
파일 삭제 시 : 현재 파일만 삭제한다.
breadcrumb
파일 경로를 알 수 있도록 최상위 폴더로부터 현재 파일까지의 위치를 표시했다.
재귀적으로 특정 속성을 추출해 연결할 수 있는 recurJoin 함수를 만들었고
해당 함수를 이용해 breadcrumb 기능을 구현했다.
모달 재활용
alert와 confirm 모달을 UI.message를 재사용해 만듦
애니메이션
폴더 클릭 시 : 현재 담고 있는 폴더 혹은 파일을 부드럽게 보여주도록 애니메이션 적용
이미지 변경 클릭 시 : 이미지 배경이 바뀔 때까지 로딩중임을 표시하고 이미지가 모두 로드되면 애니메이션이 종료
저장과 복구
새로고침 혹은 웹브라우저 종류 후에도 복구
폴더 객체를 저장하고 복구하기 위해 stringify, parse, localStorage를 사용
객체마다 저장, 복구 영역을 정하기 위해 toJSON 사용
순환 참조로 인한 오류방지를 위해 각 객체의 parent 속성은 stringify하지 않도록 함
4. 최적화 포인트
1. 파일 혹은 폴더 삭제 시 재귀 로직 제거
기존: 최상위 폴더로부터 재귀적으로 파일을 탐색 후 제거
개선: 해당 파일(혹은 폴더)을 담고있는 부모 폴더로부터 파일을 탐색 후 제거
2. 이미지 로딩 최적화 (placeholder image 사용)
한번에 2700x1900 사이즈를 받아오는 것이 아니라 810x570 사이즈의 이미지를 먼저 로딩 후 덮어씌우기 때문에 조금 더 높은 해상도의 이미지가 빠르게 로딩된다는 느낌을 줄 수 있다.