관리 메뉴

흰둥씨의 개발장

[함수형 코딩#16] 타임라인 사이에 자원 공유하기 본문

함수형 프로그래밍/쏙쏙 들어오는 함수형 코딩

[함수형 코딩#16] 타임라인 사이에 자원 공유하기

돈워리비해삐 2023. 7. 14. 03:33

선형자료구조 Queue
ㄴ> 리스트 한쪽에서는 in, 다른 한쪽에서는 out작업 일어남
ㄴ> 선입선출방식(먼저들어온애가 먼저나감)
ㄴ> 운영체제의 작업스케줄링에 사용함

선형자료구조 Stack
ㄴ> 리스트의 한쪽으로만 in, out작업 일어남 
ㄴ> 후입선출 (늦게 들어온애가 먼저 나감)

그밖의 선형자료구조 : 배열, 데크, 연속리스트, 연결리스트
비선형자료구조 : 트리 , 그래프 

 

버그 수정을 위해 "DOM에 업데이트 되는 순서"를 만들자 
ㄴ> 자료구조 QUEUE를 활용! => 순서대로 꺼내니까 액션 순서 조율하기에 좋음 (but 차례차례 실행되어서 기다림 발생함)
ㄴ> 동시성 기본형: 자원을 안전하게 공유할 수 있는 재사용 가능한 코드 

function DroppingQueue(max, worker){ //max는 보관할수 있는 최대 큐의 크기, worker는 실행할 함수
    let queueItems = [];  //여기에 배열끝에서 항목을 추가 하고, 배열앞에서 항목 삭제함
    let working = false;  //현재 다른 작업이 동작하고 있는지 확인함
    
    const runNext = () => {
    	if(working) return ;                 //두개의 작업이 함께 실행되지 않도록 함(한번에 하나만 작업)
        if(queueItems.length === 0) return ; //작업할 항목없으면 return 
        working = true; 
        let item = queueItems.shift();   //먼저들어온애를 꺼낸item 
        worker(item.data, (val)=>{       //worker에 데이터 전달 
        	working = false;             //다 끝났으면 문닫고 나가세요기능 
            setTimeout(item.callback, 0, val);  //비동기로 콜백 부름
            runNext();                   //다음있는지 확인
           });
        }
    return (data, callback)=>{
    	queueItems.push({    //배열에 {데이터 + 콜백} 넣기
            data:data, 
            callback : callback || function(){} //콜백 없으면 빈함수 보냄
            });
          while(queueItems.length > max) queueItems.shift(); //max 초과하면 버리기(새로운 작업이 들어오면 버리기)
          setTimeout(runNext, 0);   //큐에 항목추가하고 worker시작 
         };
 }
 
function calc_cart_worker(cart, done){ //cart는 제품데이터, done은 완료될때 부를 함수
 	calc_cart_total(cart, (total)=>{
    	update_total_dom(total);
        done(total);
        });
    }
    
let update_total_queue = DroppingQueue(1,calc_cart_worker); //1개 이상 큐의 항목이 늘어나지 않음

console.log(update_total_queue);

- DroppingQueue()는 함수를 인자로 받고, 또다른 함수를 리턴함 
- DroppingQueue()는 한번에 한 타임라인만 실행하도록 만들어주는 고차함수로 액션에 순서를 보장해줌