웹 개발 썸네일형 리스트형 [SLASH 21] 웹 서비스에서 우아하게 비동기 처리하기(1) - React Suspense 토스의 첫 개발자 컨퍼런스인 SLASH 21에서 3일 차 세션 중 하나인 '프론트엔드 웹 서비스에서 우아하게 비동기 처리하기'를 보고 유익한 내용이 많아 정리해서 글을 쓰게 됐다. 세션에서 박서진 프론트엔드 개발자님이 제시한 좋은 코드의 특징은 다음과 같다. 1. 성공, 실패의 경우를 분리해 처리할 수 있다. 2. 비즈니스 로직을 한눈에 파악할 수 있다. 웹 프론트엔드에서 비동기 처리를 좋은 코드로 작성하는 것은 웹 프론트엔드의 어려운 과제 중 하나다. 특히 리액트에서 더 어려워진다. 컴포넌트에서 비동기 처리가 사용되면 성공하는 경우와 실패하는 경우가 섞여서 처리해야 하고 비동기 처리가 두 개 이상이 되면 비동기 처리의 각각의 상태에 따라 경우들이 생기고 전부 처리하기 위해서 컴포넌트가 매우 복잡해진다... 더보기 주요 렌더링 경로 최적화(Optimizing the Critical Rendering Path) 주요 렌더링 경로 최적화 주요 렌더링 경로(Critical Rendering Path) 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계. DOM(Document Object Model), CSSOM(CSS Object Model), 렌더 트리, 레이아웃 등의 데이터 구조를 생성하는 과정을 가진다. 데이터 구조를 생성하는 과정이 모두 끝나고 나서야 페이지가 화면에 그려지기 때문에 웹 성능을 향상하기 위해서는 CRP 과정을 최적화해야 한다. DOM(Document Object Model) HTML 마크업을 바이트 → 문자 → 토큰 → 노드 → 객체모델로 변환하는 과정을 거쳐 만든 트리 형태의 데이터 구조 HTML을 DOM으로 변환하는 과정 HTML의 원시 바이트를 디스.. 더보기 Lazy Loading Image Lazy Loading - Lazy Loading Lazy Loading은 아직 사용하지 않은 데이터의 불러오는 작업을 미루어 초기 로딩 화면 시간을 단축하고 통신 비용을 감소시키는 방법. 도 해당 모듈을 사용하는 시점에 불러오기 때문에 코드를 잘 나누면 Lazy Loading 효과를 볼 수 있다. Image를 불러오는 작업이 데이터를 불러오는 작업의 대부분을 차지하기 때문에 Image에 Lazy Loading을 적용하면 성능을 향상할 수 있다. - 요소가 화면에 표시되고 있는지 확인하는 방법 viewport의 top, bottom, left, right 값과 확인하고자 하는 요소들의 top, bottom, left, right 값을 비교하는 방법. scroll이나 resize가 발생할 때마다.. 더보기 Intersection Observer API Intersection Observer API 타겟 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection내의 변화를 비동기적으로 관찰하는 방법. Lazy Loading을 구현할 때, Infinite Scroll을 구현할 때, 광고의 가시성을 확인할 때 주로 사용. 사용자가 보고 있을 때 결과를 표시하거나 애니메이션을 시작하기 위해 사용. 기존에는 Element.getBoundingClientRect()를 사용하거나 해당 요소의 top, bottom, left right와 viewport의 top, bottom, left right를 비교해 해당 요소의 가시성을 판단했다. 기존의 방식은 scroll 또는 resize에 이벤트를 등록해야 하기 때문에 이벤트 호출이 자.. 더보기 프로그래머스 <2021 네이버웹툰 개발 챌린지> 2차 과제 후기 VanillaJS 개발에 자신이 없고 어느 부분이 부족한지 모르는 막막한 상황에서 프로그래머스의 Dev-Matching에서 했던 과제 테스트가 도움이 많이 됐었다. 그래서 이번에 공지를 보고 좋은 기회가 될 것이라고 생각해 고민 없이 지원했고 1차 코딩 테스트도 무사히 통과했다. 문제가 공개된 것이 아니기 때문에 자세하게 문제 내용을 포스팅하지 못할 것 같고 내가 부족하다고 느낀 점을 기록해 보려고 한다. 1. 에러 핸들링 fetch가 실패했을 때 데이터를 불러오는데 실패했다는 정보를 화면에 표시해야 하는데 처음에는 이 점을 고려하지 않고 설계했다. 그래서 시간이 얼마 남지 않은 상황에서 기존의 설계 구조를 변경해야 하는 상황이 발생했다. 당황해서 이것저것 시도하다 시간이 부족할 것 같아 포기하고 다른 .. 더보기 이전 1 다음
