220914 TIL

Facts(사실/ 객관)

1. 디자인 시스템에 대해 논의함

2. 팝업관리 기획/디자인 세션을 가졌다.

3. 팝업관리의 경우 기획 변경사항이 생겨 보류됐다.

4. 관리도구 코드를 보고 있는데 플랫폼 코드구조와 많이 달라 살펴보고 있는 중이다.

 

---

 

Findings(배운점)

1. 어렴풋이 알고 있던 == 와 === 차이에 대해서 배웠다. 

 == 연산자는 두 피연산자의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환 후 값을 비교한다. 

• 1) 10 == '10' 
  하나가 숫자형이고 다른 하나가 문자열이면 문자열을 숫자로 변환 후 값을 비교
• 2) true == 1 
  불리언 값이 존재하면, 불리언 값을 1로 변환후 값을 비교
  3) true === '1'
  불리언 값은 1로 변환되고 그럼 1번과 같은 로직으로 1 == 1로 비교 
  4) true == 'true' 
  true는 1로 변환되지만 문자열 'true'는 숫자로 변환 불가 

=== 연산자는 타입을 변환하지 않으므로 엄격한 방식이다. 

 

2. forEach 함수는 비동기(async) 함수를 기다려주지 않는다는 걸 알게 되었다. 
그렇다면 순차 진행을 원할때는 어떻게 할까? 

1) for of 

genres = [];

for (const value of wantedGenres) {
    const g = await Genre.findOne({ name: value });
    genres.push(g);
}

 

순차적으로 진행할 수 있지만 forEach와 달리 병렬로 처리되지 않으므로 소요시간이 오래 걸림 

 

2) Promise.all

let genres = [];

const promises = wantedGenres.map(async (value, index) => {
    const g = await Genre.findOne({ name: value });
    genres.push(g);
});
await Promise.all(promises);

순차적으로 진행하되 위와 같이 병렬로 처리도 가능하다
각 비동기 함수들을 promises 배열에 저장 후 Promise.all을 사용해 모든 비동기 함수를 동시에 실행할 수 있다. 

3. entries를 활용해 for of에도 index 접근 가능하다 

genres = [];
// entries()는 인덱스/키 쌍의 새로운 배열을 반환한다
for (const [index, value] of wantedGenres.entries()) {
    const g = await Genre.findOne({ name: value });
    genres.push(g);
}