[개발지식] file system

Hyo Kyun Lee·2021년 11월 11일

File System 개발지식

개발지식

목록 보기

13/60

1. 개요

file open, read, save 등 file을 다루기 위한 기본적인 method들을 이해한다.

지금 활용하는 file system method들은 default pattern이 아닌, 사용자가 지정한 class나 객체에 apply하는 개념으로 인터페이스를 수정하면서 적용할 수 있다.

2. 유의사항

※ file I/O 관련 method들은 입출력이 오래 걸리므로, 웬만하면 async-await 등 비동기 처리에 유의하면서 작성해야 한다.

3-1. text file open / read / get data

file을 browser에 load하고, 해당 data를 read 및 get한다.

window.showOpenFilePicker() method를 통해 file system에 접근할 수 있다.
이후의 getFile 등 해당 file 정보를 읽기 위한 method 사용을 위해, file buffer(일시적으로 저장하는 변수)를 비구조화하여 선언한다.
해당 변수에서 file data를 읽어오고, 이를 비동기로 처리한다.

let fileOpenButton = document.querySelector('body .fileOpen');
    let textArea = document.querySelector('pre');
    let fileBuffer = null;

    //file open
    fileOpenButton.addEventListener('click', click);
    //save to buffer
    async function click(){
        //get file data
        //buffer의 세부적인 method 사용을 위해 비구조화 방식으로 선언.
        [fileBuffer] = await window.showOpenFilePicker();
        /*불러오는 파일의 정보 특정 가능
        [fileBuffer] = await windiw.showOpenFilePicker({
            types: [
                {
                    description : 'specifiy file type'
                    accept : {
                        'image/*' : ['.py', '.gif', '.jpeg', '.jpg', '.js', '.html']
                    }
                }
            ]
        })
        */
        //console.log(fileBuffer);
        
        //read file data
        let fileData = await fileBuffer.getFile();
        //console.log(fileData);

        //interface file data
        let text = await fileData.text();
        textArea.innerText = text;
        console.log(text);
    }

※ 비구조화는 중괄호({}), 대괄호([]) 모두 가능하다.

3-2. img file open / read / get data

img file에 대한 open / read / get data logic

file data를 읽은 후, 이를 URL Data로 바꾼다.
해당 URL data를 img src에 넣어주면 img file이 browser에 보여진다.

//file open
    fileOpenButton.addEventListener('click', click);
    //save to buffer
    async function click(){
        //get file data
        //buffer의 세부적인 method 사용을 위해 비구조화 방식으로 선언.
        [fileBuffer] = await window.showOpenFilePicker();
        /*불러오는 파일의 정보 특정 가능
        [fileBuffer] = await windiw.showOpenFilePicker({
            types: [
                {
                    description : 'specifiy file type'
                    accept : {
                        'image/*' : ['.py', '.gif', '.jpeg', '.jpg', '.js', '.html']
                    }
                }
            ]
        })
        */
        //console.log(fileBuffer);
        
        //read file data
        let fileData = await fileBuffer.getFile();
        //console.log(fileData);

        if(fileData.type == 'text/html'){
            //interface file data
            let text = await fileData.text();
            textArea.innerText = text;
            //console.log(text);
        }else if(fileData.type == 'image/png'){
            let fileRead = new FileReader();
            
            fileRead.readAsDataURL(fileData);
            fileRead.onloadend = () => imageArea.src = fileRead.result;
            //console.log(imageArea.src);
        }else{
            return;
        }
    }

4. file save

file 내용을 수정하고, 수정한 내용을 해당 파일에 그대로 save한다.

createWritable() method 적용
method 적용 이후의 stream을 save logic에 그대로 적용한다.
save하는 내용들은 save stream에 wirte 및 close 한다.

//file save
    let fileSaveButton = document.querySelector('body .fileSave');
    fileSaveButton.addEventListener('click', save);

    async function save(){
        let stream = await fileBuffer.createWritable();
        await stream.write(textArea.innerText);
        await stream.close();
    }

5. file save as

showSaveFilePicker() method 적용
save as할 내용을 비구조화, 이후 save logic과 동일하다(stream 적용).

file 내용을 수정하고, 수정한 내용을 다른 이름의 파일로 save as한다.

//file save as
    let fileSaveAsButton = document.querySelector('body .fileSaveAs');
    fileSaveAsButton.addEventListener('click', saveAs);

    async function saveAs(){
        fileBuffer = await window.showSaveFilePicker();
        
        let stream = await fileBuffer.createWritable();
        await stream.write(textArea.innerText);
        await stream.close();
    }