JBEE.io

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

GitHubTwitterFacebook

코드 리뷰의 목적은 성장이어야 한다

TL;DR 조직 내 코드 리뷰는 리뷰하고자 하는 관점을 코드가 아닌, 코드를 작성한 엔지니어에게, 제품을 만드는 메이커에게 옮겨보면 어떨까. 사실 코드 리뷰 문화보다 중요한 것은 테스트 문화이다. 코드 리뷰? 코드 리뷰(Code Review)란 말 그대로 코드를 리뷰하는 행위를 말한다. 코드 리뷰는 좋은 개발 문화 중 하나로 인식 되고 있는데, 그저 코드…

Jbee.log(2021)

이전 회고 Jbee.log(2020) Jbee.log(2019) Jbee.log(2018) Jbee.log(2017) 되돌아보면 정말 빨리 흘러간 한해였다. 물론 자세히 들여다보면 많은 우여곡절이 있었겠지만 말이다. ‘행동으로 옮겨서 좋았던 것’, ‘앞으로 해볼 것’, ‘하지 못해 아쉬웠던 것’ 세 가지로 회고해보려고 한다. 가장 오래 어쩌다보니(?) 지…

Review 2021 프런트엔드, 그리고 2022

Intro 2021년 프런트엔드 개발 생태계에서 발생한 몇몇 이벤트들을 되돌아보고 올해 2022년에는 어떤 관전 포인트가 있을지 이야기해보려고 해요. 계기 작년 회고에 나만의 2021 프런트엔드 관전 포인트라는 섹션을 썼었는데 타율이 꽤 높은 것 같아 아예 별도 포스팅으로 작성해봤어요. 이런 글은 빠르게 발전하는 생태계 속에서 하루 하루 고군분투 하는 평…

변경에 유연한 컴포넌트

이번 포스트에서는 변경에 유연하게 대응할 수 있는 컴포넌트에 대해 이야기해보려고 한다 TL;DR 컴포넌트는 데이터를 중심으로 추상화한다. 일반적인 인터페이스로 컴포넌트를 디자인한다. 변경에 유연하다는 것 우리가 작성하는 소프트웨어는 지속가능해야 한다. 클린 코드에 입각하여 코드가 잘 읽히도록 작성하는 것 그 자체가 목적이 되어서는 안 된다. 우리가 작성하…

Stop Using Atomic Design Pattern

요즘 많은 프런트엔드 팀에서 디자인 시스템을 운영하는 것 같다. 그러면서 함께 들리는 용어 중 하나는 바로 Atomic Design Pattern 이다. 디자인 시스템을 만들고 이를 제품에서 사용할 때 발생하는 여러 문제들을 해결하기 위해서 사용되는 것 같다. 이번 글에서는 이 아토믹 디자인 패턴이라는 개념에 대한 생각을 정리해봤다. 모든 문제를 전부 해…

Headless UI Library란?

TL;DR UI를 컴포넌트로 만들기 전에 다음 세 가지를 먼저 고민하자. UI가 내포하고 있는 상태는 무엇인지 상태를 관리하기 위한 적절한 자료구조는 무엇인지 컴포넌트를 사용하는 인터페이스는 어떻게 노출할 것인지 Table of Contents Intro 컴포넌트 Headless 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에서 선언적으로 비동기…