행복한 시지프

서문안녕하세요. React OOP 시리즈 2번째 글을 작성합니다. 이번 글은 OOP 에서 중요한 개념인 접근제어(access control)에 대해서 알아보고, 이를 기반으로 전역상태 관리 라이브러리의 인터페이스를 분석하고, 사용 방향을 제안하려고 합니다. OOP 에서 접근제어(access control)우리는 왜 설계를 잘 하려고 할까요? 설계를 하는 이유는, 변경을 관리하기 위해서 입니다. 한번 쓰고 없어질 프로젝트라면, 객체지향이니, 함수형이니, 신경쓰지 않고, 동작하는 코드를 짜면 그만이겠죠. 그러나 유지보수 비용을 낮추기 위해 설계가 필요하며, 그 중 대표적인 패러다임으로 객체지향 프로그래밍이 있습니다. OOP 에서 변경을 제어하는 대표적인 방법론이 접근 제어(access control) 입니다..

서언안녕하세요. React OOP(Object-Oriented Programming) 시리즈 1번째 글을 씁니다. React 에 객체지향 원칙을 적용하는 과정을 쓸 것입니다. 객체지향은 객체들간의 역할, 책임, 협력을 잘 명시하여 유지보수를 높이는 방법론입니다. React 에서 함수 컴포넌트도 객체이고, 여러 도메인 로직도 모두 객체일 것입니다. 객체지향 프로그래밍 원칙을 지키면서, 각각의 컴포넌트가 어떤 역할과 책임을 갖고, 상호간에 어떻게 상호작용 할지 고민해보려고 합니다. 오늘은 React 로 OOP 원칙을 지키는 것에 익숙해지기 위해서, 익히 알려진 Anti-Pattern 에 대해 말하고자 합니다. 바로 “setState props 를 지양하기” 입니다. OOP 에서 setter 를 노출시키는 것..

서언안녕하세요. React CleanCode 2번째 시리즈로 찾아왔습니다. 저는 토스 공동구매 팀에서 약 1년간 커머스 제품을 운영해왔는데요. 제품이 디벨롭 되면서, 상품 컴포넌트는 더욱 복잡해지고, 많은 Variation 이 생겼어요. 그러면서 일명 스파게티 코드를 만들게 되었어요. 사용처에서 유연하게 사용이 어렵고, 장애 확률이 높고, 새로운 기능 추가가 어려웠어요. 이를 유지보수하기 쉬운 코드로 리팩터링한 경험을 공유하려고 해요. UI Variation에 고통 받고 계신 분들이 읽으면 도움이 될 것입니다.목차컴포넌트가 스파게티가 되어가는 과정개선 방향성개선언제 사용하면 좋은가요?마치며부록 : Compound component pattern 인가요?컴포넌트가 스파게티가 되어가는 과정컴포넌트가 망해가는..

서언안녕하세요. React CleanCode 첫 번째 주제로 Composition(합성)을 다룹니다. 최근에 회사에서 많은 코드를 작성하면서 느끼는 것이 있었는데요. 바로 프론트엔드가 다루어야할 관심사가 너무나 많다는 것입니다. 크게는 UI 로직(단순 UI, 애니메이션 로직, 하드코딩적인 요소), 서버 로직(데이터 패칭, 업데이트 로직, 유저 인증인가 로직, 로딩처리, 에러처리), 로그 등 이 있습니다. React를 사용하며 이러한 관심사를 잘 분리하지 않는다면, 스파게티 코드가 된다는 것을 체감했습니다. 그러면 어떻게 관심사의 지옥에서 벗어날 수 있을까요? 즉 관심사를 어떻게 잘 분리해야 할까요? 관심사 분리는 보통 함수(클래스) 분리를 통해 이루어집니다. React에서 함수의 실체는 훅, 컴포넌트, ..