프라이D
프라이Develog(❁´◡`❁)
프라이D
전체 방문자
오늘
어제
  • ALL (378)
    • TDD, Cleancode with JavaScr.. (5)
    • 프로젝트 (32)
      • work (3)
      • 직접 만드는 기술 블로그 (2)
      • 데일리 옥션 (19)
      • 모락모락 (8)
    • Computer Science (1)
    • Algorithm & 자료구조 (94)
      • 알고리즘 w.JavaScript (53)
      • 자료구조 (5)
      • (인프런) 자바스크립트 알고리즘 문제풀이 (34)
    • JavaScript (45)
      • JavaScript (41)
      • 모던 자바스크립트 Deep Dive (4)
    • WEB (13)
    • 회고 (12)
    • TIL (109)
    • WIL (7)
    • Stacks (20)
      • React.js (6)
      • Next.js (1)
      • Redux (3)
      • Node.js (2)
      • GIT (2)
      • SAP (1)
    • 15일 메이킹 프로젝트 (15)
    • 이전 기록 (14)
    • ETC. (5)
    • ---------------2021 (6)
      • 내일배움단-웹개발 5주 (2)
      • 정보처리기사 (4)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

공지사항

인기 글

태그

  • 비트마스크
  • 모던자바스크립트딥다이브
  • MySQL
  • 코딩프로젝트
  • 자바스크립트비트마스크
  • 자바스크립트알고리즘
  • 자바스크립트
  • 내일배움단
  • nomadcoders
  • 스파르타코딩클럽
  • 국비지원
  • 2023 인프콘 후기
  • 알고리즘
  • 투포인터알고리즘
  • JavaScript
  • 코드스테이츠
  • vanilaJS
  • Til
  • nomadcoder
  • 내일배움카드

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
프라이D

프라이Develog(❁´◡`❁)

[Day 25] 2022-0727 : 프로미스와 한 판 붙은 하루
TIL

[Day 25] 2022-0727 : 프로미스와 한 판 붙은 하루

2022. 7. 28. 01:24

오늘 배운 것

  • 프로미스 객체의 다양한 활용법
  • 콜백함수, promise와 then 체이닝, Promise.all, async / await으로 비동기처리 구현 과제 w. node.js 의 fs 모듈.
  • 프로미스까지 겨우겨우 정리한 상세한 블로깅...
 

[JavaScript] 비동기 함수 제어 : 콜백함수, promise, async / await

비동기란 무엇이죠? 왜 비동기가 필요한가요? 🤔 유튜브를 보려고 하는데 실수로 다른 영상을 클릭해버렸다... 그런데 이 유튜브세상은 모든 것이 순차적으로 동작하기 때문에, 다른 버튼을 클

friedegg556.tistory.com

새롭게 알게된 것

프로미스 객체

  • 프로미스 객체란 자바스크립트에서 비동기 작업을 처리할 때 사용되는 특별한 객체이다. 프로미스란 이름처럼 미래에 실행될 비동기작업의 처리 결과가 이 객체에 담긴다. 크게 성공과 실패의 경우로 나눌 수 있고, 각각의 경우에 맞게 프로미스 객체에서 쓸 수 있는 메서드인 .then()과 .catch()를 사용해 결과값을 처리할 수 있다. 
  • then 메서드의 경우 promise에서 resolve가 실행됬을 때 전달된 결과값을 담은 프로미스 객체를 리턴하는 것과 동일하게 동작한다. 각각의 메서드가 모두 프로미스 객체를 리턴하기 때문에 계속하여 체이닝을 해서 사용할 수 있다. 
  • 또 promise.all이라는 메서드가 신기했다. 여러개의 프로미스를 배열로 전달하면 그 프로미스들을 모두 모아서 실행을 시킨다. 그리고 마지막 프로미스까지 준비가 완료되면 그 때 또 새로운 프로미스가 이행이 되는데, 이때의 프로미스의 결과값은 배열 내의 프로미스들의 결과값을 담은 배열이다. 여러개의 프로미스가 있을때 이것들을 한꺼번에 제어할 수 있어서 편리한 것 같다. 
  • async await을 사용해 프로미스를 처리하는 방법도 새롭게 알게되었다. 다른 프로미스를 다루면서 복잡하게 생각을 했더니, await을 사용할때는 생각보다 간편하다고 느꼈다. 아직 에러핸들링은 해보지 않았지만... awiat을 붙인 프로미스는 그 프로미스의 상태가 fulfilled 일 때만 다음 코드를 진행시킬 수 있고, 이 프로미스의 리턴값은 프로미스의 실행 결과값이 된다.

SUMMARY

잘 한 점

  • 과제가 쉽게 풀리지 않아서 힘들었지만, 좌절은 하지 않았다. 그냥, 언젠가는 이해가 되겠지..라고 생각하면서 계속 정리하고 공부했다. 아직도 개념이 정확하게 파악되진 않았는데, 시간이 해결해줄거라 믿으면서 직접 만들면서 익혀볼 생각이다. 
  • 오늘 과제 하기 전에 개념정리가 미흡하다고 생각해서.. 아주 일찍 일어나서 다시 복습했다. 복습이 아니라 새로 배우는 느낌이긴 했다. 

보완할 점

  • 프로미스 객체가 무엇이냐고 물으면 명확하게 대답할 수 없는 점. 
  • 과제를 통해 작성한 프로미스 관련 코드를 내 언어로 완벽하게 설명해보기.
  • 비동기 처리를 제어의 방법에 대해서 더 잘 정리해보기. 

느낀 점

  • 원래 컨디션 조절을 위해 12시 이전에 자는 것을 목표로 하는데, 오늘은 못끝낸 과제도 끝내고 개념정리도 하려다보니 늦어졌다. 다 하지는 못했지만 내일을 위해서 이제 그만 자야겠다. 
  • 이해가 안되고 문제가 안풀리면 짜증이 나는데, 이 때 잠깐 다른 일을 하면서 주변을 환기시키면 좋다. 그러면 조금 웃으면서 할 수 있다. 
저작자표시 (새창열림)

'TIL' 카테고리의 다른 글

[Day 28] 2022-0801 : SPA와 리액트 라우터/ useNavigate  (0) 2022.08.01
[Day 26] 2022-0728 : fetch API 다양한 방법으로 활용하기  (0) 2022.07.29
[Day 24] 2022-0726 : 내장 함수 직접 구현하기, 비동기 Day  (0) 2022.07.26
[Day 23] 2022-0725 : 쉬운 듯 어려웠던 ES6 클래스 문법 + props  (0) 2022.07.25
[Day 22] 2022-0722 : 객체지향과 프로토타입 블로깅 데이  (0) 2022.07.22
    'TIL' 카테고리의 다른 글
    • [Day 28] 2022-0801 : SPA와 리액트 라우터/ useNavigate
    • [Day 26] 2022-0728 : fetch API 다양한 방법으로 활용하기
    • [Day 24] 2022-0726 : 내장 함수 직접 구현하기, 비동기 Day
    • [Day 23] 2022-0725 : 쉬운 듯 어려웠던 ES6 클래스 문법 + props
    프라이D
    프라이D
    틀린내용 정정 및 개선사항은 언제든지 댓글 달아주세요 :D

    티스토리툴바