🍊데모 페이지 / ✏️GitHub

📷 구현 과정

---

1) 선행지식

- 컴포넌트 추상화

DOM에 직접적으로 접근하여 변경하는 부분을 최소화하여 선언형 프로그래밍 방식으로 접근하라는 의미다.

//DOM에 직접 접근 (명령형 프로그래밍)
function Imperative () {
	const container = document.qureySelector('.container')
    container.innerHTML = 'container에 직접 접근했어요'
}

명령형 프로그래밍은 DOM에 직접 접근해서 변경하는데, 업데이트하는 시점에 대한 명확한 기준이 없어 나중에 유지보수가 어렵고 프로젝트가 커질수록 코드 관리가 힘들어진다. 코드에 변화가 일어나면 연관된 부분을 일일히 찾아가서 바꿔줘야 한다니 끔찍하다.

//선언형 프로그래밍
function Declarative ({$app}) {
	this.$target = document.createElement('div')
    this.$target.className='container'
    $app.appendChild(this.$target)
    
    this.render = () =>{
    	this.$target.innerHTML = 'container에 직접 접근하지 않고도 만들 수 있어요.'
    }
    
    this.render()
}

function에서 DOM을 생성하고, $app으로 DOM을 어디다 append할지 받아준다. 해당 코드에서 DOM이 생성되고 렌더링까지 되니 코드 추적이 쉬워진다.

- fetch, await, async, promise

동기와 비동기 fetch await async promise 볼 때마다 헷갈렸는데 내가 이해한 걸 아래와 같이 정리한다..

비동기 처리 방식이란...
JS : 나 순서대로 방문해야 되는데... getData 함수야 너 데이터 받아올 때까지 기다리기엔 너무 오래걸리는데 어떡하지?
getData : 내 뒤에 애들부터 방문하고 있으셈! 데이터 다 받아오면 알려줄게
JS : 오키오키 (다음 애들 차례대로 방문중)
getData : ㅎㅇ 나 데이터 받아왔어!
JS : 왔구나? 너한테 다시 방문할게

1) promise : 지금은 당장 못가져오지만 가까운 미래에 얻을 수 있는 데이터에 접근하기 위한 방법. 콜백함수의 복잡성으로 도입되었으며 .then을 통해 콜백함수를 대신할 수 있음.

2) fetch : API를 불러올 때 사용한다. fetch('API_URL')은 이 주소로 데이터 요청해줘라는 의미임. promise를 반환한다.

3) async : promise를 리턴하는 함수

4) await : async의 단짝. async로 선언된 함수에서만 사용할 수 있다. wait! 말 그대로 기다리라는 의미인데, 결과값이 넘어올때까지 기다리라는 의미다. fetch와 함께 쓰이면 데이터를 받을 때까지 기다리게 된다.

5) 콜백 함수 사용 이유 : 콜백 함수를 사용하지 않으면 데이터가 준비되지 않은 상태에서 함수가 끝나버리기 때문에 콘솔에 undefined가 찍히는 등 원하는대로 동작이 안 된다. 콜백 함수를 사용하면 필요한 데이터가 다 준비된 시점에서 원하는 동작을 수행할 수 있다.

정리하자면, 비동기적 처리는 코드의 실행을 멈추지 않고 계속 실행할 수 있게 해준다.-> 비동기적 처리를 해야하지만 A가 완료된 후에 B가 수행해야 되는 경우가 있는데 이럴 때 콜백함수를 사용해서 A가 완료되면 B를 수행할 수 있도록 한다. -> 이 콜백 함수를 간단하게 쓸 수 있게 한 것이 Promise와 async, await

https://victorydntmd.tistory.com/87
예제와 설명이 잘 나와있다.

- API 살펴보기

본 애플리케이션에서는 두 개의 API를 사용한다.
1) 첫 화면 (root) 불러오기

2) nodeId 화면 불러오기 (디렉토리나 파일 선택 시)

id값은 고유값이다. URL 뒤에 nodeId가 붙으면 파일이나 디렉토리를 불러오고, nodeId가 없으면 root 경로를 의미한다.

nodeId가 붙은 경우에 type은 'DIRECTORY'나 'FILE'로 나뉜다.

API를 호출할 때 nodeId를 인자로 받아야 할 것 같고, nodeId가 있는 경우 해당 nodeId의 type이 DIRECTORY인지 FILE인지 구분해서 렌더링을 다르게 해줘야겠다.

---

2) 로직

- 렌더링 순서

0. 모든 렌더링 시 로딩 중임을 알리는 UI적 처리 필요
   0-1. 처음 API를 받을 때 캐싱 필요
1. 페이지 접속 시 root 경로를 가장 먼저 렌더링한다.
2. root 경로의 폴더나 사진을 클릭하면 클릭된 객체의 nodeID를 받아와 API 함수로 넘겨준다.
3. 해당 nodeId의 데이터를 받아오면 경로와 내부 파일/폴더의 상태를 업데이트하고 렌더링한다.
   3-1. 이 때 파일인지 폴더인지 구분해서 렌더링을 다르게 해준다. (단순 폴더 이동인지, 파일 이미지를 띄워줄 건지.)

- 폴더 구조

index.js에서 app.js를 불러오고, app.js에서 나머지 스크립트 파일들을 조율하는 형태다.

---

2) 구현

- Api.js

요구사항 정의와 구현 코드

- BreadCrumb.js

요구사항 정의와 구현 코드

- Nodes.js

요구사항 정의와 구현 코드

- ImageView.js

요구사항 정의와 구현 코드

- Loading.js

요구사항 정의와 구현 코드

- index.js

import App from "./src/App.js";
new App(document.querySelector('.app'))

- App.js

요구사항 정의와 구현 코드