TIL | 3월 첫째 주

2021.03.02. 화요일

👉 노션 링크 👈

• 구현할 기능을 써놓고 프로젝트를 진행하기 위해 노션에 적고 있다.

• 구현할 것들을 최대한 자세하게 적어두고 싶었는데, 아직 개발에 들어가지 않아서인지 큼직큼직한 것밖에 생각이 안난다.

• Figma를 이용해서 그림 그리고 생성된 svg 코드를 그대로 복붙했는데 너무 야매인가 싶어서 이렇게 해도 되나 궁금하다.

2021.03.03. 수요일

• 딱히 새롭게 알게된 건 없고, 계획한 일을 잘 해낸 하루!

• 노션에 우선 시나리오를 적어두고 살을 붙여나가면서 정리하니까 너무 도움이 된당!!!

• 피어세션 때, 만약 원판을 캔버스로 그리면 색깔 바꾸는 거 어떻게 하냐고, 그 부분만 다시 그려야 되냐고 이야기가 오갔다. 그런데 스윙이 will-change 라는 걸 알려줬다. z-index 값을 이용해서 위에 덧그려주면 될 것 같다고 했는데 해보지는 않았고, 키워드만 적어둬야지 ㅎㅎ

• 해야할 일을 쪼개서 적어두고 쓱쓱 지워나갔더니 집중이 잘 된다. 과정 하면서 제일 집중 잘하고 있는듯

• 어제 밤 pr 머지된 후 rebase 하는 과정에서 충돌이 나서 해결하고 오늘 또 pr을 보냈는데, 해결이 다 된 줄 알았는데 또 충돌이 났다. 대체 왜 나는지 모르겠돠. 🤷🏻‍♀️

2021.03.04. 목요일

• 화살표 돌리는 함수를 구현하려고 했는데 못했다. 아직 설계도 못했다. ㅠㅠ

• 돌릴 때 시계방향, 반시계방향 어느게 가까운지 판단하는 로직이 너무 헷갈리고 모르겠어서 아델라에게 SOS쳐서 겨우 설계만(구현 아직X) 해놨다.

• 문자를 차례대로 시간차 두면서 화살표로 가리키는 그 로직을 도통 모르겠어서 처음에 해본 생각이 16진수를 다 하나씩 쪼개서 시간차를 두고 보내주면, 그걸 하나씩 받아서 실행하기..? 테스트로 아래와 같이 써보았다.

const arr = [1, 2, 3, 4, 5];
const newArr = [...arr];
const receiver = [];

const interval = setInterval(() => {
  receiver.push(newArr.shift());
  console.log(receiver);
  if(arr.length === receiver.length) clearInterval(interval);
}, 1000);

// 결과
[1]
[1, 2]
[1, 2, 3]
[1, 2, 3, 4]
[1, 2, 3, 4, 5]

복사본인 newArr을 만든 이유는.. 우선 arr의 마지막 요소인 5까지 하면 자동으로 끝날 줄 알았는데 놉. 안끝남. clearInterval을 해야만 끝남. 그래서 arr.length와 receiver.length가 같아지면 끝나도록 하고 싶었는데, arr을 계속 shift하다 보니, arr이 5개일 때 receiver는 0개, 4개일 때 1개, 3개일 때 2개, ... 이런 식으로 동작이 돼서 내 생각대로 되지 않았다. 그래서 복사본을 만들어 복사본에서 shift를 하고 원본 배열은 유지시켰다. 근데 글 쓰면서 생각해보니 초기 arr.length만 변수에 담아두고 arr을 직접 shift해도 괜찮을 것 같다.

뭐 어쨌든 값을 하나씩 날리는 건 했는데 그럼 저 receiver에 도착한 값들을 어떻게 하나씩 시간차를 둬서 화살표 돌리는 함수를 실행할거냐. 이게 문제였다. 함수는 공장처럼 계속 돌아가고 있고 인풋만 몇초마다 넣어주는 모습을 상상했는데 이게 도저히 내 머리로 설계가 안됐다.

혼자 고민하다가 사람들한테 물어봤는데 promise와 setTimeout을 이용하면 된다는 답변을 받았다. 그제서야 크롱이 오후에 올려주셨던 예제를 돌려보았다.

const firstPromise = new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 2000);
});

firstPromise
.then((data2) => { // 2초 후 resolve 안의 값인 1이 data2로
  return new Promise((resolve) => setTimeout(() => resolve(data2 + 1), 2000));
})
.then((result) => console.log('final', result)); // 2초 후 data + 1 즉 2가 result에 들어감
// 총 4초 뒤에 2 출력됨

실행시켜보기 전에 코드만 보고 결과가 어떻게 나올지 예상해봤는데, 맞았다! 👏 지금까지 이해한 바로는 resolve에서의 반환값이 그 다음 then의 콜백함수의 인자로 전달된다 이거 같은데.. 흠.. promise랑 setTimeout을 이용해서 다시 설계를 해봐야겠다. 이렇게 한다면 내가 처음에 생각했던 몇초마다 값을 날려주기가 아니라 이미 값은 다 있고 순차적으로 1번값 처리가 끝나면 then 2번값 처리 then 3번값 처리.. 이런 식으로 하면 될 것 같다..

2021.03.05. 금요일

• 목요일 밤에 그동안 깃 충돌 왜 났는지 너무 궁금해서 원인을 파악해보고자 했으나 결국 알아내지 못하고 3시에 마무리.. 근데 핸드폰 하다가 4시 반에 잠

• 그래서 금요일에 너~~~무 졸려서 공부를 잘 못했다.

• 이번 주 미션에서 비동기 제어가 키워드였는데 프로미스를 아직 잘 이해하지 못하고 있다 보니까 로직을 짜는 데에도 어려움이 많이 느껴졌었다. 그래서 개념에 대한 공부를 하는 것과 미션을 진행하는 것 사이의 비중을 어떻게 두어야할지 고민이 많아졌다. 그동안 미션을 제대로 마무리 하지 못한 게 거의 다여서 이번 주는 꼭 미션 구현을 해보고 싶었는데 프로미스를 모르니 뭘 어떻게 할 수가 없었다.

• 금요일 저녁이나 되어서야 프로미스의 동작 방식을 파헤쳐보자는 생각이 들어서 나만의 예제 코드도 써보고, 드림코딩 강의 중에 있던 이벤트루프 파트를 다시 보고 또 보고 했다.

• 어떤 프로미스 예제가 있었는데 이해가 잘 안 되는 부분이 있어서 또 엄청 늦게까지 고민하다가 잠들었다.

2021.03.06. 토요일

• 커링 함수와 파이프 함수에 대해서 조금 알게 되었다. (이브 덕분!! ☺️) 어떤 상황에서 쓰이는지도 대충은 알 것 같았다. 이번 주 미션에서 함수만으로 구현하라고 하셔서 커링, 파이프를 공부해야겠다고 생각은 했었는데 (커링은 코코아 때 코어자스 스터디 때부터, 파이프는 CS 과정에 함수형프로그래밍에서 알게 됐을 때부터 계속 미뤄왔었다.) promise에 치이다 보니까 공부를 못하고 있었다. 이브의 설명 덕분에 나중에 혼자 공부할 때 훨씬 수월하게 할 수 있을 것 같다.

• 어제 고민했던 프로미스 예제의 동작 과정을 이해했다. 😆 마이크로태스크큐도 계속 미뤄왔던 주제 중 하나였는데 동작을 좀 이해하게 돼서 뿌듯하다. 종합적인 이벤트루프의 동작을 이해하고 나니까 myPromise를 어떻게 구현해야 할지 감이 잡히는 것 같은 느낌이다.

2021.03.07. 일요일

• then이 리턴하는 값도 promise이기 때문에 then은 당연하게도 promise와 똑같이, resolve reject 두 콜백함수를 인자로 받을 수 있다. 만약 then에 reject 콜백함수를 써준다면 catch로 가기 전에 그 reject에 걸린다.

관련 예제 👇

let a = 1;
const cb = () => console.log('promise');
const pp = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('3초 뒤에 오는 응답 (비동기실행)');
    a = 3;
    console.log('비동기 a', a);
    reject(new Error('thrown error'));
    if(a === 3) resolve('123');
  }, 3000);
})

pp
.then(data => console.log(data), () => console.log('rejected!'))
.catch(console.error) 
console.log('프로미스 아님');

// 실행 결과
// 프로미스 아님
// 3초 뒤에 오는 응답 (비동기실행)
// 비동기 a 3
// rejected!

• 인자를 받아서 바로 함수로 호출하는 경우에는 인자를 생략해서 표기할 수 있다.
  관련 영상: 드림코딩 엘리 - Promise편 19분 40초 경

Before 💩

getHen()
  .then(hen => getEgg(hen))
  .then(egg => cook(egg))
  .then(meal => console.log(meal));

After ✨

getHen()
  .then(getEgg)
  .then(cook)
  .then(console.log);