API load-order

api참고 http://172.30.1.51:7000/doc/swagger/
사진 https://console.aws.amazon.com/s3/buckets/1wecodereact/?region=ap-northeast-2&tab=overview

API load-order 알고리즘 sketch

순서대로 load되는 api들을 비동기처리?

ex)
[0, 1, 2, 3, 4].map(()=> 5개의 카테고리 api 순서대로 loading.
첫번째(첫번째 api는 map과 상관없이 자동으로 첫번째에 뿌려짐)로 
idx 0이 불려오고, 정상적으로 뿌려지면 
boolean인 state가 false에서 true로 useEffet업데이트 되면서
다음 api 불러오기 (idx =1)

api1: /recommendation/category/bestselling
api2: /recommendation/goods/buynow
api3: /recommendation/goods/firstcomer
api4: /recommendation/goods/

api형태

웹에서
유저의 고유값을 임의로 저장해주면서 작업해야함 ->
로그인시 비로그인시 유저의 값이 다르다

featured_categories안에 category num과 goods num이 한배열로 담김
exclude는 그전엔 api에서 불려온 goods num props가 push된 배열

"user": "user1", -> 유저 고유값
"featured_categories": [['003001002002', '1008398672'], ['003001002005', '1007736457'], ... ], -> 첫 api에서 불러온 cateCd, goodsNo가 인덱스 0,1에 담긴 배열들의 배열
"exclude": ['1008398672', '1007736457', ... ] -> 이전 api에서 불러온 goodsNo prop이 push된 배열
}
recommendation 공통 params

실제 불러오는 예시

 LOG  {"exclude": [], "featured_categories": [], "user": 9366}
 LOG  {"exclude": ["1007750660", "1009346253", "1009346238", "1009304822", "1008824720", "1007332062", "1009167619", "1008774910"], "featured_categories": [["010009011002", "1007750660"], ["003024017002", "1009346253"], ["003024017005", "1009346238"], ["004030013003", "1009304822"], ["002016007005", "1008824720"], ["004003019004", "1007332062"], ["009006006", "1009167619"], ["004017001003", "1008774910"]], "user": 9366}
 LOG  {"exclude": ["1007750660", "1009346253", "1009346238", "1009304822", "1008824720", "1007332062", "1009167619", "1008774910", "1009374586", "1009376696", "1009383229", "1009383234", "1009383291", "1009383299", "1009383329", "1009383343", "1009383347", "1009386360", "1009392096", "1009393720"], "featured_categories": [["010009011002", "1007750660"], ["003024017002", "1009346253"], ["003024017005", "1009346238"], ["004030013003", "1009304822"], ["002016007005", "1008824720"], ["004003019004", "1007332062"], ["009006006", "1009167619"], ["004017001003", "1008774910"]], "user": 9366}

flow 예시

let homeArr = [
 {
   title: '가격만 본다면 플라잉캣',
   type: 'lowest',
   WrapperViewStyle: { 
     marginTop: -15
   },
   url: `${global.django}/crunchapi/crunchapi/get_minimum_goods/`,
 },
 {
   title: "BEST 판매 카테고리",
   type: CATE,
   numColumns: 4,
   titleColor: '#f5fbf1',
   url: `${REC_API_URL}/recommendation/category/bestselling`,
   priority: '0',
   wrapperViewStyle: {
   alignSelf: "center",
   width: "100%",
   alignItems: "center",
   justifyContent: "center",
   borderBottomWidth: 76,
   borderBottomColor: global.mint3,
   marginTop: -15
   }
 },
 {
   title: "지금 바로 추천제품",
   type: GOODREVIEW,
   numColumns: 3,
   url:`${REC_API_URL}/recommendation/goods/buynow`,
   priority: '1',
   titleColor: '#f9f6ed',
   wrapperViewStyle: {
     paddingBottom: 20,
     //height: 750,
     marginTop: -15,
   }
 },
 {
   type: EVENT,
   url:`${REC_API_URL}/recommendation/goods/firstcomer`,
   priority: '2',
   numColumns: 3,
   backgroundColor: '#f5fbf1',
   wrapperViewStyle:{
     borderBottomWidth: 76,
     borderBottomColor: global.mint3,
     backgroundColor: global.mint3
   }
 },
];
//test
const initialProgressStat = {
 '0': {
   loaded: false,
   data: [],
   exclude: [],
 },
 '1': {
   loaded: false,
 },
 '2': {
   loaded: false,
 },
 '3': {
   loaded: false,
 }
}
const progressiveHandler = (priority, stat) => {
 switch(priority){
   default: return false; 
   case '0': return true; 
   case '1': return stat[Number(priority) -1].loaded;
   case '2': return stat[Number(priority) -1].loaded;
   case '3': return stat[Number(priority) -1].loaded;
 }
}
//renderArr 빈배열
//object.key만 가져와서 for loop돌림
// progress item에 load완료 true면 1 push false면 null
// 1추가 --> 다음 배열(다음 api)로 loading
// return에 setDateArr에 renderArr 추가
//useEffect 업데이트

 useEffect(()=>{
   let renderArr = ['0']
   Object.keys(progress).forEach((item)=>{
     progress[item].loaded ? renderArr.push('1') : null // progress['0']
   }) // [0,1,2,3]
   setDataArr(renderArr)
 }, [progress, setProgress])