TIL - 23

- Keyword

 배포 / Netlify / keyframes / Promise.all / 429 Error

 

Github Page로 배포했다가 404 error 두둘겨 맞고 Netlify로 전환했다.

proxy, 배포는 진짜 할 때마다 어렵다.. build에 CI= 을 꼭 붙이자

 

keyframes으로 Animation을 구현하였다.

styled-components에서 props를 이용하여 keyframes에 변수로 넣어주는 게 신박했다.

const donutMotionAnimation = (color, degree) => keyframes`
from{
  background: conic-gradient(${color} 0deg, #ebebeb 0deg);
}
to{
  background: conic-gradient(${color} ${degree}deg, #ebebeb ${degree}deg);
}
`;


export const BaseDonutChart = styled.div`
  display: flex;
  position: relative;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: ${(props) =>
    `conic-gradient(${props.color} ${props.degree}deg, #ebebeb ${props.degree}deg)`};
  
  //animation에 BaseDonutChart props로 받은 것을 다시 넘겨줬다.
  animation: ${props => donutMotionAnimation(props.color, props.degree)} 1s linear;
`;

 

기업 과제 하다가 API 요청을 많이 보낼 상황이 있었는데, 429 Error 두둘겨 맞고 포기했다.

이건 요청을 막은거라.. 다른 방법이 있을지 궁금하다. 그냥 sleep을 주기엔 너무 비효율적이다.

// 속도도 느리고 429 Error가 발생하지 않는 것도 아님.
     for(const match of getMatchListResponse.data.matches[0].matches){
         const getMatchInforesponse = await api.get(`/kart/v1.0/matches/${match}`);
         
     }

    // 속도는 상대적으로 빠르지만 간헐적 429 Error
     const matches = await Promise.all(
       getMatchListResponse.data.matches[0].matches.map(async (elem) => {
         const getMatchInforesponse = await api.get(
           `/kart/v1.0/matches/${elem}`
         );
         
         return getMatchInforesponse.data;
       })
     );

for of를 쓰면 동기적으로 진행하지만 속도가 상대적으로 느리다.

Promise.all은 순서가 중요하지 않다면 비동기이므로 상대적으로 속도가 빠르다.

 

 

- 오늘 하루 느낀 점

기업 과제가 끝났다.

일주일동안 재밌었다.

 

프리온보딩 코스도 끝났다.

5주 동안 9개의 과제를 하면서 정말 많이 성장했다.

더 성장하고 싶다.