ifthisthenthat
230
2021-07-30 01:13:48
1
147

JS 콜백함수의 값 반환해주기


프로그램의 목적

- 파일의 경로를 수동으로 지정 

- 해당 경로에 있는 파일을 별도로 생성 된 모듈에 파라미터로 전달 후 메타 데이터를 추출 

- index.html의 script태그로 다시 반환


디렉토리 

- index.html

- metadata.js

- resourceFile.js


index.html


<script type="module">
    import { default as MetaData } from './metadata.js'

    const metaClass = new MetaData();

    const url = './models/' + 'random.png';
    console.log(metaClass.returnMeta(url))
</script>


metadata.js



import { default as ResourceDetect } from '/resourceFile.js'; // 추가적으로 참조하는 외부모듈

 export default class MetaData {
    getMeta(url) {
        const resource = new ResourceDetect();
        resource.setFile(url); // renders the file in imported module
        resource.Open(() => {
            const info = resource.info;
            const metaJSON = new Object();
        
            metaJSON.File_Name = info.name
            metaJSON.File_Extension = info.extension
            metaJSON.File_Size = info.size
            metaJSON.File_Frames = info.frames
            metaJSON.File_FPS = info.rates

            const toJSON = JSON.stringify(metaJSON, null, "\t");

            return toJSON
        })
    }

    returnMeta(url) {
        return this.getMeta(url)
    }
}


보시면 아시겠지만, 제가 콜백함수에 대한 개념이 부족한 상태여서 index.html에서 콘솔을 찍어보면 undefined가 출력됩니다. 

콜백함수의 toJSON을 반환하고 싶은데, 제 역량이 부족해서 하루종일 잡아도 해결을 못하겠습니다 ㅠㅠ


여러분의 도움이 필요해서 여쭤봅니다. 감사합니다

0
  • 답변 1

  • 카시와기유키
    677
    2021-07-30 03:00:27 작성 2021-07-30 03:10:37 수정됨

      콜백함수 예제


      비동기 콜백함수 예제

    function takeOrder(callback) {
        setTimeout(() => {
            const order = (Math.random() * 10) <= 5 ? 'Coffee' : 'Tea';
            callback(order);
        }, 1000);
    }
    takeOrder((order) => {
        console.log('Order is for: ' + order);
    });
    // Order is for: Tea


    한번 보시고 적용해보시죠.

  • 로그인을 하시면 답변을 등록할 수 있습니다.