나는 tensorflow.js를 이용하여 웹브라우저 상에서 고양이의 사진으로 종을 예측해 볼수 있는 프로그램을 만들고 있다.

사용자가 데이터 셋을 직접 로드하여 학습시킨 후, 예측할수 있게 하는 순서는 번거롭기 때문에, 서버에 미리 저장해둔 데이터 셋을 사용자가 시작하기 버튼을 누르면 자동으로 로드하여 학습이 진행되게 살짝 로직을 바꾸는 중이다.

그렇게 된다면 사용자 입장에서는 고양이 사진을 넣으면 바로 예측하는 것처럼 보일것이다.

js 라 하면 비동기 처리로 유명한 것을 알고는 있었다.

비동기 처리를 자세히 공부할 때가 온것 같다.
왜냐면 나는 비동기 처리를 막아야 저걸 해결할수 있기 때문이다...ㅎㅎ

변경한 코드

=> 버튼 클릭시, 라벨에 로컬에 미리 저장되있던 데이터 셋 로드되기

var files = "./dataset/";
        
 for(j=0;j<10;j++)
                {
                        const url =  files+className[i]+"/"+j+".jpg";//이미지 파일 경로
                        const img = new Image();//이미지 객체의 로드 방식
                        img.id = className[i];//("russianblue","bengal","boombey","ragdoll");
                        img.onload = () => {
                            imgAry.push(img);
                            console.log(imgAry);
                        }
                        img.src = url;
                        console.log(img);
                        console.log(url);
                }

기존 코드

=> 각 라벨의 버튼 클릭시 웹브라우저 상에서 데이터 셋 넣기

btn.addEventListener('click', () => {
                const input = document.createElement('input');
                input.type = 'file';
                input.multiple = 'multiple';
                //onchange 변화 탐지해줌->디렉터리에서 파일을 불러오는 방식으로 변경
                input.onchange = evt => {
                    console.log(`Added ${evt.target.files.length} ${className[i]} images.`);
                    for (let f of evt.target.files) {
                        const url = URL.createObjectURL(f);//이미지 파일 경로
                        const img = new Image();//이미지 객체의 로드 방식
                        img.id = className[i];//("russianblue","bengal","boombey","ragdoll");
                        img.onload = () => {
                            imgAry.push(img);
                            console.log(imgAry);
                        }
                        img.src = url;
                        console.log(img);
                        console.log(url);
                    }
                }
                input.click();
            });

언뜻 모양으로 두개의 차이를 알수 있을 것이다.

내가 원하는 로직은 해당 라벨에 데이터 셋들이 로드된후, 바로 imgAry에 img값들이 push 가 되어서 로드된 데이터 셋들이 순차적으로 들이 저장되는 것이다.

코드의 위치로 보면 라벨에 데이터셋이 적용된후 바로 imgAry에 push가 될것 같지만, 모든 라벨에 데이터셋이 다 적용된 후에야 imgAry 에 push가 되었다.

그렇다면 imgAry가 먼저 처리될수 있게 순서를 내가 정해보자!

비동기 처리란?
특정 코드이 연산이 끝날 때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바 스크립트의 특성

왜 필요할까?
화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없기 때문!!

이걸로 해결하면 될까...?
바로 setTimeout()

any IDEA...?