[🚨응급실 알리미] React-query에서 error 처리 프로젝트를 진행하면서 일관된 에러 처리에 대한 중요성을 느꼈습니다. 에러가 발생하면 사용자에게 적절하게 알리고, 일관된 방식으로 대응하는 것은 사용자의 경험을 향상 시키는데 큰 역할을 합니다. [응급실 알리미] 서비스의 발생할 수 있는 에러 상황과 대응 방법 응급실 알리미는 로그인 없이 응급실 정보를 제공하며, 정보는 일방향으로만 제공됩니다. 따라서 일반적으로 권한이 없는 유저가 접근했을때, 데이터 변경 HTTP 메서드에 따른 에러 처리를 하지 않았습니다. 1. get이 실패한 상황(api 요청 에러) 사용자 화면에 각 API에 따른 유의미한 메시지와 함께 toast 알림으로 표시한다. 새로 고침 버튼을 넣어 새로 고침을 유도하여 다시 API를 요청한다. 개발자 error 로그를 남긴다 2. 404가 발.. [🚨응급실 알리미]React Query와 Router loader 함께 쓰기 응급실 알리미의 구조 설계 초기 때 Router의 loader를 사용하여 미리 데이터를 받아와 컴포넌트를 렌더링 하려고 하였습니다. 하지만 loader함수는 컴포넌트가 아니기 때문에 데이터를 가져오기 위해 useQuery훅이나 recoil의 상태 관리 훅을 사용할 수 없었습니다. 해결책을 찾지 못하고 차선책으로 API를 사용하는 공통 컴포넌트에서 React Query로 데이터를 가져와 rocoil로 관리하기로 하였습니다. 프로젝트 완성 후 리팩토링 과정에서 React Query와 Router loader를 연결할 수 있는 방법을 찾았고 그 과정을 정리한 글입니다 현재 상황 제일 최상위인 app 컴포넌트에서 모든 페이지에 사용하는 공통 API를 호출하여 Recoil 전역 변수에 업데이트합니다. 또 sele.. [🚨응급실 알리미] Recoil과 React-query를 선택한 이유 🚨응급실 알라미, 상태 관리 라이브러리는 무엇을 선택할까❓ 필자는 FE 2명으로 구성되어 응급실 알라미 서비스를 개발하였습니다. 응급실 알라미는 경증 질환의 일반인을 대상으로 한 플랫폼으로, 공공데이터 API를 활용하여 필요한 데이터를 가져옵니다. 우리 팀의 고려사항은 다음과 같습니다. 공공데이터 API를 활용 상태 관리 라이브러리 미사용 경험 - 필자는 이 프로젝트를 통해 Redux나 다른 상태 관리 라이브러리를 처음 사용해보려고 합니다. 반면 다른 팀원은 이미 Redux를 경험한 상태입니다. 제한된 개발 기간(2주) 따라서 이러한 고려사항을 가지고 상태 관리 라이브러리 선택에 고민한 과정을 담은 글입니다. 1. Redux Redux는 상태 관리 라이브러리 중 가장 오래되고, 가장 많이 사용되는 라이브.. Virtual DOM이 뭔가요? virtual DOM에 공부한 내용을 정리한 글입니다. 먼저, virtual DOM에 앞서서 DOM이 무엇이고, 가상 DOM이 나온 배경을 공부하기 위해 브라우저 로드 과정에 대해 짚고 넘어가겠습니다. 브라우저 렌더링 과정 브라우저는 아래의 단계로 로딩합니다. HTML을 파싱하여 DOM 객체 트리를 구성하고, 외/내부 css를 파싱하여 CSSOM 트리를 구성합니다. DOM 트리와 CSSOM트리가 생성되면 스타일을 매칭시켜주는 과정을 거쳐 렌더트리를 구성합니다. - 페이지를 렌더링 하는데 필요한 노드만을 가집니다. - 예를 들어 display:none인 속성을 가진 노드는 렌더트리에서 제외됩니다. 렌더트리를 기준으로 레이아웃을 배치하고 렌더트리를 화면의 픽셀로 변환(페인트)합니다. - 레이아웃 단계에서는 .. useState를 바닐라JS로 구현하기 이전 글에서는 React의 공식 문서를 참조하여 useState의 개념을 정리했습니다. 하지만 공부하는 과정에서 useState가 어떻게 동작하는지 내부적으로 구성되어 있는지 궁금했습니다. 그래서 JavaScript로 useState를 직접 구현해보면서 동작 원리를 이해하는 것을 목표로 했습니다. HTML 구조 설정 는 나중에 컴포넌트가 렌더링될 위치를 나타낸다. useState 함수 state 관리 state는 외부에서 관리를 한다. 내부에서 관리하게 되면 useState 실행할때마다 state를 초기값으로 변경되기 때문에! state는 state값이 있으면 state 값이고 없다면 초기값으로 저장된다. setState함수는 새로운 상태값을 받아 state 변수를 업데이트 하고, render 함수를 호.. [공식문서 톺아보기] batching / setState는 비동기인가요? batching(일괄처리)란? React는 state 업데이트 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다. 이 말의 의미는 React는 상태 변화를 비동기적으로 관리한다는 의미이다. 그렇기 때문에 리렌더링은 모든 state 업데이트 함수 호출이 완료된 이후에만 일어난다. ⇒ batching ⇒ 공식문서에선 음식점에서 주문 받는 웨이터를 예로 들고 있다. 웨이터는 한 가지의 요리만 듣고 주문을 넣는 것이 아니라 모든 주문을 받고 혹은 테이블에 있는 다른 사람의 주문을 받고 주문을 넣으러 간다 ⇒ 왜? 너무 많은 리렌더링을 하지 않아도 된다. 또 일부 변수만 업데이트된 반쯤 완성된 렌더링을 하지 않는다. React에서 batching을 사용하는 이유? 렌더링 횟수를 줄여 성능을 향상시킨다.. [공식문서 톺아보기] useState() useState는 React에서 상태를 관리하는데 매우 중요한 hook이다. useState를 사용하면 컴포넌트의 상태를 추척, 관리할 수 있으며, 컴포넌트의 렌더링을 최적화하고 재사용성을 높일 수 있다. 아래의 내용은 공식문서 useState에 관한 내용을 정리한 글이다. useState() const [state, setState] = useState(initialState); 규칙 컴포넌트의 최상위 레벨에서 useState를 호출해야 한다. 주의! 반복문이나 조건문 안으로 호출 할 수 없음. 배열 구조 분해를 사용해 [someting, setSomething]과 같은 state 변수의 이름을 지정하는 것이 관계이다. 첫 번째 요소는 상태를 의미함. 첫 번째 렌더링 중에는 전달한 initialStat.. 이전 1 다음
