배운점

1. 반복문의 비동기 작업

const getAllLangBytes = async () => {

  const repoNameArray = await getRepoNameArray();

  const repoLangArray = [];
  
  repoNameArray.forEach(async (repoName) => {
    let result = await getLangBytes(repoName);
    repoLangArray.push(result);
  });
}

forEach의 콜백함수에 async, await을 사용해도 기다려주지않는다
forEach는 callback이 끝날때 까지 기다렸다가 다음 callback을 실행하는 것이 아니다 또한 모든 callback을 호출만 해버리고 종료되어 await을 한 의미가 없이 다음 작업이 실행된다

for (const repoName of repoNameArray) {
    let result = await getLangBytes(repoName);
    repoLangArray.push(result);
  }

다음과 같이 for of를 사용하면 순차 처리가 된다, 순서가 중요한 작업에 쓴다

  await Promise.all(
    repoNameArray.forEach(async (repoName) => {
      let result = await getLangBytes(repoName);
      repoLangArray.push(result);
    })
  );

프로젝트에 직접 사용하지는 않았지만, 다음과 같이 Promise.all을 쓰면 forEach문을 쓰면서 병렬로 비동기 처리가 가능하다고 한다, 이경우 순서가 중요하지 않은 작업에 쓴다

2. js로 css의 keyframe의 값 동적으로 바꾸기

index.html

  <style>
    @keyframes dounthmtml {
      0% {
        stroke-dasharray: 0, 100;
      }
    }

    @keyframes donutcss {
      0% {
        stroke-dasharray: 0, 100;
      }
    }

    @keyframes donutjs {
      0% {
        stroke-dasharray: 0, 100;
      }
    }
  </style>

css파일을 따로 만들지말고 keyframe부분만 html에 style태그로 넣는다

lang.js

const donut_animation_html = document.styleSheets[0].cssRules[0];

그러면 위처럼 js에서 keyframe에 접근이 된다 styleSheets[0]은 html파일에 있는 style태그중 첫번째 cssRules[0]은 해당 style태그안에서 첫번째를 가르킨다

  donut_animation_html.appendRule(`100% {
    stroke-dasharray: ${htmlRatio}, ${100 - htmlRatio};
  }`);

appendRule을 쓰면 js의 변수를 동적으로 전달할 수 있다

후기

프로젝트라고 하기도 뭐한 5일만에 만든 사이트여서 java script를 이용한 여러가지 많은 기능보다는 html, css의 기본을 익혀보자는 생각으로 만들어 보았다 그렇게 공부한 비동기 작업들도 막상 쓸려니 엄청 헤매고 다시 공부하게 되었다, 이론은 간단히 프로젝트나 실습은 자주 해야겠다고 느낀다
js에서 css로 동적으로 값을 넘겨주는 코드를 짤때마다 React의 styled-components쓰면 props로 쉽게 넘길텐데라는 생각이 계속 난다
이런 작은 웹사이트에도 html파일 1개에 눌러담은 넘치는 태그들을 보니 components단위의 개발이 얼마나 깔끔한지도 느껴볼 수 있었다