뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, 토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기

토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기

#전체
#개발자
#프론트엔드
04:32optional chaining을 사용해야하는 이유
06:18비동기 코드에 대해 성공하는 경우와 실패하는 경우를 분리하자. 그리고 실패에 대한 예외처리는 외부로 위임하자
08:26위의 두 경우(optional chaning, 비동기 처리를 위해 성공, 에러 처리 로직의 분리)를 통해 살펴본 좋은 코드의 특징 읽기도 쉽고 함수의 책임도 명확히 드러남
09:16일반적으로 프론트엔드에서 UI 코드와 비동기 코드를 섞어서 사용할 때 코드 특징 문제점: 성공, 실패의 경우가 섞여있고 실패의 경우, 외부에 위임하기가 어려워졌다
10:22비동기 작업이 여러 개 존재할 시 코드는 더욱 복잡해짐
11:26처음에 살펴본 비동기 함수처럼 비동기 코드가 섞인 컴포넌트 코드를 코딩할 수는 없을까요?
12:10이 문제를 우아하게 해결해주는 도구: React Suspense for Data Fetching
12:34React Suspense for Data Fetching이 목표로하는 것 1. 성공한 경우에만 집중하도록 한다 2. 로딩 상태와 에러 상태가 분리되도록 한다 3. 동기와 거의 같게 사용할 수 있게 한다
13:27외부에서 에러나 로딩을 처리하는 법
14:12추천하는 ErrorBoundary, Suspense를 묶는 단위
14:38비동기를 동기적으로 바꿔주는 Suspense 기능! 어떻게 사용해야하나? *fetching 관련 라이브러리에서 Suspense 관련 설정을 해주어야 사용이 가능합니다.
15:49예시) 토스팀이 적용한 제품으로 설명
17:50Suspense를 통해 데이터가 준비되는 대로 하나씩 자연스럽게 보여주는 것이 가능해졌습니다.
✔ 학습 완료
댓글 4
Jinie의 프로필 이미지
Jinie
2달 전
요즘 토스 콘텐츠가 난리군요.ㅎㅎ
댓글 달기
서원석의 프로필 이미지
서원석
2달 전
학습노트 제작자
그러니까요 ㅎㅎ
👍항상 멋진 학습노트 감사합니다!
댓글 달기
서원석의 프로필 이미지
서원석
2달 전
학습노트 제작자
감사합니다! 저도 덕분에 요즘 figma 학습 잘하고 있습니다 👍

이 학습노트가 포함된 러닝패스예요.

서원석님의 다른 노트는 어때요?

서원석의 프로필 이미지
서원석
의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기