Suspense와 ErrorBoundary에 대해 알아보자React에서 비동기 로딩과 에러 핸들링을 위해 Suspense와 ErrorBoundary는 각각 중요한 역할을 하는 것은 모두가 알고 있는 내용이다.이 글에서는 두 컴포넌트의 개념을 직접 구현해보는 과정을 통해 내부 구조를 이해하며, 최종적으로 두 컴포넌트의 차이점과 활용 방안을 정리해보고자 한다.✨ 들어가기Suspense와 ErrorBoundary는 React에서 각각 비동기 작업의 로딩 상태와 컴포넌트 트리에서 발생하는 오류를 관리하는 데 사용되는 컴포넌트이다.Suspense: 비동기 로딩 상태를 처리하기 위해 사용되며, 주로 React.lazy와 함께 활용한다. 즉, Suspense는 컴포넌트를 렌더링하기 전에 로딩 중인 컴포넌트 대신 로..
WEB/React
중고나라 셀러 지원 센터의 다양한 부분을 개발하면서, 특히 interceptor를 활용해 인증/인가 기능을 구현한 배경과 마주했던 문제와 느낀 점을 전달하고자 이 글을 쓰게 되었다. ✨ 셀러 지원 센터에서의 인증/인가 구조셀러 지원 센터에서 인증/인가 구조는 셀러와 관리자가 분리되었다. 두 사용자 그룹에 따라 각각 다른 접근 방식이 필요했다. 셀러 회원셀러는 중고나라 웹사이트 회원가입 절차를 거쳐 셀러 지원 센터의 회원가입 절차를 진행할 수 있다. 그러나 회원 계정의 상태가 블랙이거나 이미 회원가입이 완료된 상태라면 회원가입이 제한되는 흐름이었다.정상적으로 회원가입 화면에 진입했을 경우, 셀러는 아이디와 비밀번호를 입력하고 마케팅 수신 동의 항목을 거쳐 가입이 진행된다. 이 때, 중복되는 아이디는 사용 ..
들어가기, 첫 사내프로젝트의 시작 정규직으로 입사하자마자 2024년 상반기 중고나라의 핵심 프로젝트인 셀러 지원 센터가 시작되었다. 프로젝트 초기에는 기획자와 개발자가 함께 모여 이 시스템이 어떤 비즈니스 모델과 계획으로 발전할지 논의하는 시간을 가졌다. 수차례 회의를 통해 기획안이 하나씩 확정되기 시작했고, 우리 팀도 이에 맞춰 기술 스택을 선정하고 업무를 분담을 진행하였다. 그렇게 순조롭게 진행되고 있는 줄 알았던 가운데,,, 알게된 사실이 하나 있었다. 바로 디자이너 없이 개발을 스스로 진행해야 한다는 것이었다. 디자이너 부재가 만들어낸 초기 셀러지원센터 화면당연히, 디자인 시스템도 없었기에 폰트와 색상 모두 제 각각 이루어진 화면으로 Figma 기획안이 전달되었다. 아래와 같은 사진이었다. 색상은..
✨ 들어가기 우선, 뒤죽박죽 섞여있는 회사 코드 안에서 비즈니스 로직을 분리하기 전에 프론트엔드 개발자로써 view와 business logic이 어떻게 다른지 명확하게 알고 있어야 한다. 📍 View 우선, view는 기본적으로 HTML을 보여주는 UI이며 사용자 이벤트를 통해 HTML을 업데이트 하는 것이다. 즉, view는 단순히 주입받은 정보를 보여줄 뿐이다. 여기서 주의할 점은 해당 과정안에 business logic과 관련된 부분이 있다면 view가 아닌 비즈니스 로직으로 작동하게 된다는 것이다. 다른 말로 비즈니스 로직이 개입되지 않아야 컴포넌트를 재사용할 수 있다는 것이다. 📍 View Logic isValid, errorText와 같은 UI/UX를 개선하는 코드 예를 들면, 비밀번호를 6..
💡 들어가기 현재 개발 중인 중고나라 기능에서 useMutaion을 내부에서 호출하는 커스텀 훅을 만들게 되면서 중첩 구조가 발생하는 문제가 발생했다. 그래서 지난 화요일에 수강하였던, [원티드] 프리온보딩 챌린지 12월 에서 알게 되었던, Function의 액션/계산/데이터로 리팩토링하기를 적용하고자 해당 기능개선 작업을 진행했다. 📍 문제상황 거래 하기 전, 상품 상세에서 채팅하기 or 안전거래 버튼을 눌렀을때, 일일 채팅방 생성 횟수 제한에 걸리게 되면 안내 모달을 띄워야 했다. 그러나, 두 버튼의 비즈니스 로직이 달랐다. 커스텀 훅으로 api 결과값을 확인했던 로직에서 클로저 문제가 발생해 중첩 모달을 제어하지 못하는 문제가 발생되었다. 버튼 작동 방식은 아래와 같았다. 채팅하기 채팅방 생성 ap..
🌼 들어가기 모던 리액트 : Deep Dive 책을 정독하던 도중, useState의 lazy initialization에 대한 원리를 이해하고 싶었다. 콜백 함수로 넘기면 처음 초기화일때만 실행되는것일까...? 내부 구조가 어떻게 되어있길래, 값과 함수, 콜백함수의 양상이 다르게 발생되는 것일까...? 그냥 그렇구나..하기에는 너무 이해하고 싶었다. 이를 위해서 React 패키지의 구조를 살펴보며 useState를 불러오는 react 코어를 알아야 했다. 따라서 이번 글에서는 리액트의 패키지 구조를 살펴보고자 한다. ✨ React 패키지 구조 리액트 패키지는 총 5가지로 나눌 수 있다. 1️⃣ react 코어 컴포넌트 정의와 관련된 패키지이며, createElement( ) 와 다른 패키지의 모듈을 제..
💡 들어가기 어떤 경우에 useQuery와 useMutation 사용하는지, 또 타입 지정의 방식은 어떻게 이루어지는지 살펴보면서 기능개선을 한 작업을 바탕으로 해당 내용을 공유하려 한다. ✅ useQuery react 개발자라면 모두가 알고 있는 fetching, caching, 서버 데이터와의 동기화를 지원하는 라이브러리일 것이다. useQuery의 데이터 타입은 아래와 같다. export declare function useQuery (queryKey: TQueryKey, queryFn: QueryFunction, ..
📍 들어가기 이번에는 리액트 Deep Dive의 첫번째 장을 톺아보며 부족한 부분을 메꿔보려고 한다. 간단한 요약보다는 중요하거나 미처 간과했던 부분들을 짚어보고자 한다. ✅ 자바스크립트의 또 다른 비교, Object.is == 👉 같음을 비교하기 전에 양쪽이 같은 타입이 아니라면, 비교할 수 있도록 강제로 형변환을 진행한다. === 👉 강제 형 변환을 진행하지 않으며, Object.is와 달리 개발자가 기대하는 방향으로 비교되지 않을 수 있다. 5 == '5' // true Object.is(5, '5'); // false Number.NaN === NaN// false Object.is(Number.NaN, NaN)//true ❗️다만, 주의해야 할 점은 객체 비교에서는 차이가 없다는 것이다. Obj..
📍 들어가기 인턴으로 입사한지 어느덧 2달이 지났다. 개발에 대해 무엇을 배웠는가...? 실력은 얼마나 성장했는가...? 대한 물음에 답을 하자면, 스스로에게 아쉬운 마음이 들었다. 단순한 기능 구현이 아닌, 원리와 체계를 갖춘 코드로 만들어내고 싶었기 때문이다. 이 책이 출간되자마자 설레는 마음을 감출 수 없었다. 꼼꼼하게 챕터들을 살펴보며, 리액트에 대한 지식의 구멍들을 막아보려고 한다. ✅ 리액트에서의 렌더링 여기서 말하고 있는 렌더링은 브라우저의 렌더링과의 개념과는 다르다. 리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고, 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 과정 최초 렌더링 리렌더링 ..
✨ 들어가기 앞선 포스팅에서 PWA 기술에 대해 살펴보았다. 해당 기술에 대한 장점을 살려 지속적인 사용자 유입을 위해 Pic.me 서비스에 도입을 하게 되었다. 사실 chrome으로 구현하는 것은 이미 PWA에 대한 API가 대부분 제한되어 있지 않기에 단순히 service-worker를 등록해주기만 하면 구현이 가능했다. 하지만, 나 역시도 그렇고 대부분의 사람들이 아이폰을 사용하고 있었기에 우리는 safari 환경에서 이를 구현할 수 있게 만들어야 했다. 하지만 Push 알림에 대한 제한사항이 많아서 어려움을 겪었고, 해당 과정에서 알게 된 Safari + PWA 과정을 포스팅 해보고자 한다. ✅ Push 알림 구조 우선 Push 알림 구조에 대해 파악해보자. 클라이언트가 데이터를 요청하지 않아도 ..
