TIL | 2020.01.27 Promise, async, await, 그리고 이것저것

Autumn·2021년 1월 27일
0

TIL

목록 보기
10/19
post-thumbnail

알고리즘 데이 ~ 😇

오늘은 hacker ranck의 알고리즘 문제를 풀었다. 총 4문제였는데, 마지막 문제는 처음에 유닛 배열을 만드려다가 아주 큰 숫자가 인풋으로 들어오면 배열에 다 넣을 수가 없었다. 한 2시간동안 붙잡고 다른 방법을 생각해보다가 넘 복잡해져서 그냥 안풀었다. 다른 분들은 어어어엄청 간단하게 풀었던데.. 어떻게 생각해낸건지.. 코드를 봐도 모르겠어서 나중에 물어봐야겠다.

2번, 3번 문제는 예전에 (아마 코코아 때) 풀어봤던 문제이다. 2번은 전과 다른 방법으로 풀어봤고, 3번은 전에는 최소공배수 구하고 난리치다가 결국 못 풀었던 문제였는데 다시 풀어보니 그럴 필요 없이 조건만 잘 생각해보면 쉽게 풀리는 문제였다.

오늘의 문제 / 푸는 데 걸린 시간
diagonal-difference 20분
time-conversion 35분
kangaroo 29분
save-the-prisoner 1시간 정도 풀어보고, 다른 방법으로 1시간 넘게 생각하다가 포기 (못품)

오늘은 30분 정도 안에 풀어야지~ 생각하고 스톱워치를 켜놓고 풀었다. 시간이 좀 넘어도 그냥 더 풀어서 마무리했는데, 다음부터는 시간을 정해놓고 시간 안에 못풀면 일단 멈추고 왜 못풀었는지 이유를 분석해봐야겠다는 생각이 들었다.


Promise, async, await

이번주 미션을 못해서 미션을 더 할까 하다가 promise, async, await 공부를 했다. 엘리쌤 유튜브에서 예전에도 몇번이고 봤던 promise 영상과 async, await 영상을 다시 봤다. 예전에는 계속 봐도 도무지 1도 이해가 안갔는데, 오늘은 10 중에 2 정도 이해가 된 느낌이다. ㅋㅋㅋㅋ

드림코딩 엘리 promise
드림코딩 엘리 async, await

  • 비동기 코드들의 순서를 정해주는 느낌
  • async function ~~ 라고 쓰면 함수 코드 자체를 promise로 바꿔준다.
  • await는 async 함수 안에서만 쓸 수 있다.
  • await으로 여러개 쓰면 마치 체이닝한 것 처럼 계속 기다려야 하는데, 서로 영향이 없는 비동기 코드라면 병렬로 실행하기 위해 각각을 promise로 불러오는 게 낫다. promise는 생성하는 순간 안의 코드가 실행되기 때문..
  • 그런데 이렇게 쓰면 좀 보기에 구림. promise들을 배열에 넣어서 병렬적으로 실행할 수 있는 Promise.all()이라는 것이 있다.
  • 참고로 Promise.race()라는 것도 있는데 배열에 들어있는 promise들 중에 가장 빨리 얻어지는 값을 리턴해준다.
  • then에서는 받은 값을 그대로 또 다른 함수로 넣어줄 때 인자를 생략해서 쓸 수 있다.

아직 실제로 써보지 않아서 더 어렵게 느껴지는 것 같다. 이벤트루프, 마이크로태스크큐 이런 것도 다시 공부해서 정리해봐야겠다.


코드 표현 이것저것..

implicit return

엘리쌤 강의 중에 이런 코드가 있었다.

const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('🐓'), 1000);
  });
.
.
.
getHen().then(어쩌구...)...

여기서 1. getHen은 함수인데 어떻게 {} 없이 작성이 됐지? 2. return이라고 써주지 않았는데 어떻게 프로미스가 리턴이 돼서 then을 썼지? 두 가지가 궁금했다.
알고 보니 흔하게 쓰던 array.map(e => e * 2) 이런 거랑 같은 건데, 하나의 값(값이 맞는건지 문이 맞는건지.. 제이슨은 문 이라고 알려주셨다.)으로 표현되는 것은 중괄호과 return 키워드를 생략할 수 있기 때문에 위와 같이 쓸 수 있었던 것이었다. 이 키워드가 implicit return 이 맞는 건가..? 🙄


destructuring의 활용

위에꺼 찾아보다가 ES6 축약코딩 기법 19가지라는 글에서 모듈 export, import 할 때 쓰던 { 모듈이름.. } 이런 표현도 destructuring이라는 것을 알았다.!! 우왕 신기...! (해당 내용은 링크된 글의 13번에 있다.) 아직도 정확하게 어떻게 동작하는건지 어떻게 차례대로 들어가는지? 그런 건 잘 모르겠지만 그냥 그런가보다 하고 따라 썼던 ES6 모듈 문법이 destructuring이라는 걸 알게 돼서 신기했당.ㅎㅎㅎ

링크된 글 내용 중에 정말 자주 써오던 것들도 있고 한번 쯤 들어는 봤지만 써보지 않은 것들도 꽤나 많았다. 좀 낯설더라도 일부러 더 써보고 연습해야겠다. 갑자기 arrow function 처음 접했을 때가 생각났다. 그 때는 정말 이게 뭔소린가 싶었는데 🤣 ㅋㅋㅋ 지금 낯선 것들도 많이 써보고 연습하다 보면 언젠가 자연스럽게 술술 쓸 날이 오겠지~

profile
한 발짝씩 나아가는 중 〰 🍁 / 자잘한 기록은 아래 🏠 아이콘에 연결된 노션 페이지에 남기고 있어요 😎

2개의 댓글

comment-user-thumbnail
2021년 1월 27일

문법이나 비동기나 쓰다보면 자연스러워지고
친해집니다 홍홍
더 파보는건 친해지고 나서 해도 괜찮은것 같습니다~ 문득 궁금해질 때 도전~

1개의 답글