JBEE.io

Written by@Jbee
Web Engineer Interested in 설계.테스트.생산성.자동화.멘토링. FEConf Organizer @FEDG

GitHubTwitterFacebook

Headless UI Library란?

Table of Contents Intro 컴포넌트 Headless TL;DR UI를 컴포넌트로 만들기 전에 다음 세 가지를 먼저 고민하자. UI가 내포하고 있는 상태는 무엇인지 상태를 관리하기 위한 적절한 자료구조는 무엇인지 컴포넌트를 사용하는 인터페이스는 어떻게 노출할 것인지 Intro 달력은 꽤 흔하게 볼 수 있는 사용자 인터페이스다. 담당하고 있…

선언적으로 에러 상황 제어하기

1편에서 살펴본 AsyncBoundary 컴포넌트로 2편에서 분류한 에러들을 어떻게 다룰 수 있는지 살펴봅니다. 이 포스팅은 1편과 2편을 먼저 읽어야 좀 더 이해가 쉽습니다. Table of Contents 비동기 컴포넌트를 다루기 위한 준비 API Call Error Handling 비동기 컴포넌트를 다루기 위한 준비 앞서 3가지가 필요하다고 말했다.…

클라이언트의 사용자 중심 예외 처리

1편에서는 React 애플리케이션에서 비동기를 선언적으로 다룰 수 있는 컴포넌트를 만들어봤습니다. 이번 포스팅에서는 다뤄야 하는 ‘에러’에 대해 살펴봅니다. 에러를 환경에 따라 성격을 분석해보고 사용자 중심으로 분류해봅니다. 그리고 각각의 에러 특징을 파악해 무엇을 고려해야 하는지 분석합니다. Table of Contents 에러는 어떤 종류들이 존재할까…

React에서 선언적으로 비동기 다루기

에러를 효율적으로 다루기 위해 선언적으로 에러를 정의하고 처리하는 방법을 고민했고 그 결과물을 공유합니다. Suspense와 ErrorBoundary를 사용하여 비동기 컴포넌트를 보다 효율적으로 처리하는 컴포넌트를 소개합니다. Table of Contents 명령형으로 처리하기 선언형으로 처리하기 Suspense ErrorBoundary 비동기 컴포넌트 …

효율적인 프런트엔드 에러 핸들링

제품을 개발한다면 에러 처리(Error Handling)는 반드시 마주하는 일이고 피할 수 없는 관심사라고 생각합니다. 에러를 어떻게 분류할 수 있는지 그리고 어떻게 처리할 수 있는지 고민을 해봤습니다. 좀 더 나아가 에러를 처리하는데 있어서 사용자 경험을 고려하며 우아하게 처리할 수 있도록 시도한 경험을 공유합니다. 1. React에서 선언적으로 비동기…

Jbee.log(2020)

이전 회고 Jbee.log(2019) Jbee.log(2018) Jbee.log(2017) Table of Contents 토스팀으로 합류 FEConf2020 at Home 하고 싶은게 많은 엔지니어 Intro 올해 회고를 쓰기 전, 지난 년도의 회고들을 쭉 읽어봤는데 조금 부끄러웠다. ‘내가 이만큼이나 올해를 알차게 보냈어’라고 자랑하는 느낌을 받았기 …

전역 상태 관리에 대한 단상 (stale-while-revalidate)

이 글의 부제는 Stop Using Redux for Caching for API Response이다. 한 때 전역 상태 관리 도구로 Redux를 즐겨썼던 개발자로서 이제 더이상 Redux를 사용하지 않게 된 이유와 회고를 담은 글이다. Table of Contents 전역 상태 (Global State) Server cache UI state 다시 전역…

좋은 코드란 무엇일까?

‘성선설’에 기반하면 모든 개발자는 좋은 코드를 작성하고 싶으리라 생각한다. 누구나 관심 있어 하는 주제인 만큼 나 또한 여러 고민을 거듭해왔고 여태까지의 생각을 정리해보려고 한다. 어떤 프로그램을 구성하는 코드냐에 따라 좋다는 기준이 달라질 수 있을 것 같다. 이 글은 웹 개발, 그중에서도 웹 프런트엔드 개발 관점임을 짚고 넘어간다. Table of C…

[React] 5. 컴포넌트 디자인하기

React는 자체적으로 ‘상태’를 관리하기 위한 API를 제공하기 때문에 View 라이브러리이자 상태 관리 라이브러리라고 할 수 있다. 이 글은 React 시리즈의 2번째 글을 반박하는 글이다. 정확히는 다음과 같은 문장을 반박하고자 한다. 모든 컴포넌트에서 store에 접근하여 필요한 데이터를 가져오고 렌더링만 수행한다. store에 접근하는 컴포넌트…

그 때 성장이라고 생각했던 것들

⚠️ 지금도 짧은 경력이지만 개발을 처음 시작했을 때의 제 생각을 꼬집는 글입니다. Intro 이 토막글이 어떠한 활동을 하는 분의 노력과 꾸준함, 성장에 대한 열정을 감히 깎아내릴 수 없다. 오히려 그 열정을 응원한다. 그저 오지랖 넓은 개발자가 동시대의 개발자로서 ‘맹목적으로’ 어떤 활동을 하는 분들께 드리는 한 마디 정도로 생각해주면 좋겠다. 일일커밋…