[vue.js] setInterval로 일정시간동안 데이터를 풀링해보자(feat.clearInterval)

입사 후 열심히 교육과정을 하다가 이번달 말 부터 바빠질 것 같아 바로 업무에 투입이 되었다.

내가 해야할 일은 책에 대한 정보(제목, 저자, 출판사 등)와 커버 이미지, 페이지 스캔 이미지를 넣으면 자동으로 epub 전자책 파일로 변환할 수 있는 사이트를 만드는 것이었다. 

 

여차저차 이틀만에 만들기는 했지만 참... 뭔가 깔끔하지 않은건 알겠는데 잘 돌아가서 신기한 느낌이다.

대충 이런 느낌...

아무튼 각설하고, 오늘 겪은 것 중, setInterval에 대해 이야기를 해보자

setInterval은 일정 시간을 간격으로 지정한 함수나 코드를 반복해주는 기능이다.

 

기본적인 형태는 이러하다

setInterval(() => {
	...
}, 1000);
//여기서 1000은 1000ms로, 1초를 의미한다.
//1.5초를 하고 싶으면 1500으로 설정해두면 된다.

나는 데이터를 불러오는 api와 연결해서 해당 api로 지정된 값을 받아오면 이 setInterval을 멈추는 코드를 원했다.

처음에 내가 시도한 방법은 이랬다.

//이하 뷰 컴포넌트

<script>
export default {
	data() {
    	return {
        	status : '',
        }
    },
	methods: {
    	async getStatus() { 
        const dataId = this.$store.state.dataId;
        //(2)vuex의 스토어에 저장해둔 dataId를 가져온다.
        const {data} = await checkId(dataId);
        //(3)async await로 checkId API 호출.
        if(data.status == 'done') {
        //(4)해당 status 값이 done이면 아래 코드 실행
        	clearInterval(this.status);
            this.status = data.status
        }
    },
    mounted() {
    	setInterval(this.getStatus, 5000);
        //(1)this.getStatus를 5초마다 반복 실행.
        
    }
}

괜찮게 짠 것 같았지만, 전혀 괜찮지 않았다.

일단 setInterval은 먹혔지만 clearInterval이 먹지 않았다.

무한대로 호출한다. 호출 호출 호출.

잘 찍히나 확인차 넣어놓은 console.log가 무자비하게 찍히는 현상을 발견했다.

 

이후 문제점을 찾다가 팀장님이 알려주신 방법은 setInterval에서 반환된 인스턴스를 활용해서 정지시키는 방법이었다.

무슨말인지 말로는 잘 모르겠으니 코드로 다시 짜보겠다.

 

<script>
export default {
	data() {
    	return {
        	status : '',
        }
    },
	methods: {
    	async getStatus() { 
        const dataId = this.$store.state.dataId;
        //(2)vuex의 스토어에 저장해둔 dataId를 가져온다.
        const {data} = await checkId(dataId);
        //(3)async await로 checkId API 호출.
        if(data.status == 'done') {
        //(4)해당 status 값이 done이면 아래 코드 실행
        	clearInterval(this.loading);
            //(5)clearInterval()에 setInterval에서 반환한 인스턴스를 넣는다.
            this.status = data.status;
        }
    },
    mounted() {
    	this.loading = setInterval(this.getStatus, 5000);
        //(1)this.getStatus를 5초마다 반복 실행하고 해당 인스턴스를 this.loading으로 넣는다.
        
        
    }
}

갑자기 loading이 어디서 튀어나왔냐고 물어본다면,

그냥 넣은거다.

변수를 생성하듯 vm에 loading 이라는 변수를 생성하고 넣었다고 생각하면된다.

this.loading말고 원하는 이름이 있다면 loading 대신 쓰면 된다.

 

위와 같은 식으로 하면 5초마다 해당 함수가 풀링되고, 일정 조건(if문)이 완료되면 해당 함수가 끝나는 것 까지 완벽하게 동작한다.