안녕하세요! 오늘은 API 에러 처리를 규격화한 경험을 공유해보려고 합니다. 제가 재직 중인 회사에선 기존 api 에러 코드가 따로 지정되지 않았어요. 그래서 각자 api 에러를 처리하는 방법이 달랐어요. api 응답 값에서 success를 가지고 판별하는 경우 api 응답 값에서 data의 유무로 판별하는 경우 api 응답 값에서 data의 text를 비교하여 판별하는 경우 가 있었습니다. 허나 통일되지 않은 방법을 사용했기 때문에 다른 분께서 작성하신 코드를 읽으려면 코드를 파악하고 이해하는 것이 규격화되어있을 때보다 비교적 더 오래걸리게 되었어요. 이러한 문제점을 고치고자, API 에러코드를 정하고 규격화하게 되었어요. API 에러 코드 먼저 프론트엔드 팀원분들께 양해를 구한 후, 백엔드 분들과 모..

React에서는 어떻게 관심사를 분리할 수 있을까요? 사람마다 관심사를 분리하는 방법은 다르겠지만, 관심사의 분리가 무엇인지는 뜻이 통할 것이라고 생각합니다. 오늘은 제가 고민하고 개선해나간 과정과, 그 결과를 공유해보려고 합니다. UI 와 로직 분리하기 현재 제가 재직 중인 회사에서는 Presenter Container 패턴을 사용 중에 있습니다. 고로 UI 와 로직이 분리되었죠. 그에 따른 예시는 다음과 같습니다. 컨테이너가 프리젠터 컴포넌트를 감싸고 있고, 컨테이너에선 로직을 담당하고 프리젠터가 UI 를 그려줍니다. 문제점 Presenter Container 를 쓰다보니, 이 사이에 Props가 많아지게 되었습니다. 당연히 관련 로직도 많고 많아지면 많아질 수록 코드 리딩 및 추적이 어려워지게 되었..

우리는 공식문서에서부터 list를 렌더링 시킬 경우 key를 명시하라고 배웁니다. 근데 왜??? 어째서??? key를 명시해야할까요? Key Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. - React 공식문서 - 우리는 공식문서에서 Key에 대한 설명을 찾을 수 있습니다. 그렇다면, React는 어떠한 이유로 Key를 사용할까요?? 재조정 (Reconciliation) React는 DOM Node의 자식들을 재귀적으로 처리할 때, 기본적으로 동시에 전, 후 리스트를 순회하고 차이점이 있다면 변경을 생성합니다. 자식의 끝에 Element를 추가하는 경우 예를 들어 자식의 끝..

React Element React 앱의 가장 작은 단위로써, 브라우저 DOM Element와 달리 일반 객체로 쉽게 생성할 수 있습니다. React DOM은 React Element를 기준으로 DOM을 업데이트합니다. Rendering React Element 를 Rendering 하기 위해서는 우선 DOM Element 를 ReactDOM.createRoot()에 전달해야합니다. html 파일 어딘가에 가 있다고 가정합니다. const root = ReactDOM.createRoot( document.getElementById('root') ); 이후 React Element를 root.render()에 전달해야 합니다. const element = Hello, react!; root.render(e..

JSX가 뭐죠? JSX 는 Javascript를 확장한 문법입니다. React Element를 생성합니다. 왜 써야해요? 리액트에서는, 본질적으로 렌더링 로직이 UI 로직과 연결된다는 사실을 인지하고 있습니다. 고로 React는 마크업과 로직을 인위적으로 별도의 파일로 분리하는 대신, "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리하고 있습니다. 사용 방법 Javascript 표현식 삽입 const name = "Josh Perez"; const element = Hello, {name}; // JSX는 표현식이기에 변수에 할당할 수 있습니다. 위의 예시처럼 JSX의 중괄호 안에는 유효한 모든 Javascript 표현식을 넣을 수 있습니다. JSX 속성 정의 const element = l..

설치 yarn 또는 npm 을 사용하여 설치 npm install recoil # npm yarn add recoil # yarn Recoil Root recoil 상태를 사용하기 위해 부모 트리 중 RecoilRoot 를 가지고 있어야 합니다. 주로 최상위 컴포넌트에 RecoilRoot를 삽입합니다. import React from 'react'; import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( ); Atom Atom은 상태의 일부를 나타냅니다. 어떤 컴포넌트든 읽고 쓸 수 있으며, 특정 Atom을 참조하는 컴포넌트는 암묵적으로 해당 Atom을 구독하게..