building a File Tree UI given a list of File objects

 

오늘은 코더패드의 리액트 라이브코딩 예제 문제를 한번 풀어보려고 한다! ㅎㅎ

문제 상황 

 

Today, we are tasked with building a File Tree UI given a list of File objects, consisting of a path and the contents of the file. Your solution must:

 

• display files in a nested structure, with entries for each folder and file
• be able to handle arbitrarily-deep file structures
• sort the file tree by the following rules:
  • folders are shown before files
  • all items are sorted alphabetically (case-insensitive)

If you solve this challenge and we still have more time, our follow-on task is to implement the ability to add new files to the file tree.

 

요구사항 분석 

 

1. nested structure 를 보여줄 것

📁 src
├── App.js
├── 📁 components
│   └── Button.js
└── 📁 utils
    └── helpers.js
📁 public
└── index.html

 

2. arbitrarily-deep file structures ( 얼마든지 깊이가 깊어질 수 있는 폴더 구조 ) 도 잘 처리할 수 있어야 한다.

3.  file tree 를 다음 기준으로 정렬한다.

- 폴더는 파일 이전에 보여져야한다.

- 모든 아이템들은 알파벳순으로 정렬되어야한다.

 

구현 아이디어

파일 시스템에서 구조가 트리 자료구조로 처리된다는 것은 운영체제에서 배워서 알고 있었다.

트리가 하나의 부모에 대해 여러개의 자식을 가질 수 있는 구조이니, 파일트리를 표현하기에 적합하다.

 

 

주어진 구현을 해내면 아마 이런 느낌의 트리가 완성될 것이다.

인풋을 하나하나 돌면서 트리 구조를 하나하나 완성해나가면 될 것 같다고 생각했다!

그런데 여기서 문제는 주어진 인풋을 처리해서 트리구조를 만드는 것이 조금 까다로울 수 있다.

파일트리 생성하기

 

보통의 트리를 구성할 때 가장 이상적인 인풋은 부모 -> 자식 관계에 대한 간선으로 주어졌다.

app/src/WidgetList/WidgetList.tsx 가 있다고 하면

 

app->src, src->WidgetList, WidgetList->WidgetList.tsx 로 쪼개어서 부모 - 자식 관계를 연결해주면 된다. 

물론 이때는 중복되는 요소가 들어올 수 있으니 이를 잘 처리해주어야하고, 주어진 간선들을 하나씩 처리하면서 트리구조를 만들면 된다.

 

type TreeNode = {
  name: string;
  type: 'folder' | 'file';
  children?: TreeNode[]; // folder
  file?:File;
  
};


const isFile = (path) => path.includes('.');

const buildFileTree = (files: File[]): TreeNode => {

  const root: TreeNode = { name: '', type: 'folder', children: [] };

  // building trees ( 파일 하나하나 돌면서 트리 만들기 )
  for (const file of files) {
    
    var tokens = file.path.split('/');
    let current = root;

    for(let i=0;i<tokens.length;i++){
      let token = tokens[i];
      // current에 이름이 token 인 자식이 있는지 확인
      let existing = current.children!.find((c)=>c.name ===token);
      if(!existing){
        const type = isFile(token) ? 'file' as const : 'folder' as const;
        const newNode = {
          name :tokens[i], type, ...(isFile(token) ? { file: file } : { children: [] })
        }
        current.children!.push(newNode);
        current = newNode;
      }else{
        current = existing;
      }
    }
  }

  return root;
}

 

그 결과 다음과 같은 트리 자료구조가 만들어진다!

 

파일 트리 렌더링

그 다음, 만든 트리구조를 root -> left -> right  순으로 재귀적으로 호출하면서 렌더링시켜주면 된다.

파일 트리를 왼쪽부터 차근차근 DFS 탐색을 한다고 생각하면 편하다! 결국 전위순회인것!

 

 

트리의 각 노드를 탐색하면서 

 

1. 파일이라면 바로 렌더링

2. 폴더라면 각 자식노드들을 root 로 하여 본과정 다시 반복 (재귀)

 

export const FileNode = ({root,depth}) =>{

  if(root.type =='file'){
    console.log("file",root);
    return  <Box display="flex" justifyContent={"flex-start"}
   ><span style={{marginLeft:depth*20-15}}/><FileRow file={root.file} /></Box>
  }
  else if(root.type=='folder'){

    console.log(root.children);
   return  (<Box><span style={{marginLeft:depth*20}}> ㄴ 📁 {root.name}</span>
    <Box />
        {root.children?.map((c)=><FileNode depth={depth+1} root={c} key={c.path}/>)} 
    </Box>)
  }

  return null;

}

export const FilePane = () => {
  const { files } = useWorkspaceContext()

  const root = buildFileTree (files);
  console.log(root)


  return (<Box>
      <Box p={1}>
        <Typography variant="h6">Files</Typography>
        {root.children?.map((c:TreeNode)=><FileNode depth={0} root={c} key={c.name}/>)} 
        </Box>
      </Box>)
}

 

여기서 포인트는 폴더의 깊이에 비례해서 왼쪽 마진 값을 주어야한다는 것! 따라서 매 재귀호출에 depth 라는 인자를 추가하여 

depth*20 만큼 앞을 비워놓도록 했다. 

 

 

최종 구현 결과 

트리 파일 계층 구조로 나타난 모습!

 

 

추가기능

메인 기능을 완성한 이후에는 추가 기능을 완성해 볼 것이다.

 

1. nested structure 을 정렬된 상태로 보여줄 것

sort the file tree by the following rules:
folders are shown before files
all items are sorted alphabetically (case-insensitive)

 

=> 트리를 순회하면서, 모든 부모노드들에 대하여 자식 노드들을 알파벳 순으로 정렬해주면 될 것 같다!

 

2. 파일 추가하기(add File) 기능 

 

=> 전체 파일 목록을 state 로 관리하고, HTML input 태그를 통해서 로컬 컴퓨터로부터 파일을 받아온 후,

해당 파일에 접근하여 제목, 내용 등을 알아내어 전체 파일 목록에 추가시키면 될 것 같다! 

 

정렬하기

파일트리의 root 부터, 각 children 을 모두 방문하면서

 

1) children이 있다면,

앞서 있는게 폴더라면 -> 순서 그대로 유지를 위해 -1 반환

앞서 있는게 파일이라면 -> 순서를 바꾸기 위해 1 반환

그리고 각 children 에 대하여 sortTree() 를 재귀적으로 호출해준다. 현재 노드 하위에 있는 어떤 폴더 내부의 파일들도  모두 정렬될 필요가 있기 때문이다.

2) children이 없다면, 아무일도 일어나지 않는다.

 

const sortTree = (root: TreeNode)=>{

  if(root.children){
    root.children.sort((a, b) => {
      if(a.type != b.type){
        return a.type==='folder'?-1:1;
      }
      return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
    });

    root.children.forEach((c)=>{
      sortTree(c);
    })

  }
  
}

파일 추가하기

 

우선, 파일을 추가해주기 위한 input 과 제출을 위한 button 태그를 각각 추가해준다.

      <input type="file" ref={inputRef}/>
          <button onClick={addFile}>add File</button>

 

그 다음, 기존 file 목록을 contextAPI 로 전역에 뿌리고, addFile 호출시에 file 정보를 받아와서 allFiles 에 추가해주면 된다.

export const FilePane = () => {
  const { allFiles,setAllFiles } = useWorkspaceContext();

  const root = buildFileTree (allFiles);
  sortTree(root);
  console.log(root);

  const inputRef = useRef(null);

  const addFile = async (e) => {

    console.log("addFile");
    //e.preventDefault();
    const files = inputRef.current.files;
    const file = files[0];
    console.log(file);
    const path = file.name;
    const contents : string = await file.text();
  
    const newFile : File = {path,contents};
  
    setAllFiles([...allFiles,newFile]);
    
  
  }


  return (<Box>
      <Box p={1}>
        <Typography variant="h6">Files</Typography>
       
          <input type="file" ref={inputRef}/>
          <button onClick={addFile}>add File</button>
  
        {root.children?.map((c:TreeNode)=><FileNode depth={0} root={c} key={c.name}/>)} 
        </Box>
      </Box>)
}

 

또한, 나는 테스트용으로 .cpp 파일을 사용했는데 이렇게 새롭게 올라간 파일 확장자도 에디터 상에서 예쁘게 보일 수 있도록,

아래 코드를 추가해준다.

  else if(['.c','.cpp'].some((extension)=>filePath.endsWith(extension))){
    return 'c'
  }

 

전체적인 모습은 다음과 같다!

import React from 'react'
import { Box } from '@mui/material'
import { useWorkspaceContext } from '../Workspace/WorkspaceContext'
import MonacoEditor from "@monaco-editor/react";
import * as monaco from 'monaco-editor'

// in lieu of having actual Language Workers to determine the lang from a file path, we'll hard-code some handlers here
const getLanguageFromFilePath = (filePath: string) => {
  if (filePath.endsWith('.html')) {
    return 'html'
  } else if (filePath.endsWith('.css')) {
    return 'css'
  } else if (['.js', '.jsx', '.ts', '.tsx'].some((extension) => filePath.endsWith(extension))) {
    return 'javascript'
  }
  else if(['.c','.cpp'].some((extension)=>filePath.endsWith(extension))){
    return 'c'
  }

  return 'plaintext'
}

export const Editor = () => {
  const { activeFile } = useWorkspaceContext()
  
  if (activeFile == null) return null

  return (
    <Box id='editor' flex={1}>
      <MonacoEditor 
        value={activeFile?.contents} 
        language={getLanguageFromFilePath(activeFile?.path)}
      />
    </Box>
  )
}

 

 

최종 결과

 

로컬에서 파일을 선택하고 이를 업로드하여 에디터 창에서 확인할 수 있다!