본문 바로가기

전체 글

 (69)
[React] 에러 핸들링 전략 (ErrorBoundary) 목차개요ErrorBoundary구현참고개요회사 프로젝트를 하다보면 오류가 발생은 하는데 공통 화면으로만 띄워주니까 시스템 문제인지 API 문제인지 명확히 구분하기 위해 디버깅하는 과정이 피곤하다 느껴졌습니다. 그래서 사이드 프로젝트 개발 중 에러 핸들링에 대해 고민을 많이 했었습니다.그래서 시스템 오류, 페이지 라우팅 오류, API 호출 오류를 계층별로 분리해서 유지보수 및 사용자 경험을 개선하고자 하였습니다.ErrorBoundaryTypescript기반의 React의 프로젝트임을 참고해주시길 바랍니다. ErrorBoundary는 하위 컴포넌트에서 던진 오류를 인식하고 대체 UI를 노출시켜주기 위한 에러 핸들링 기술입니다.ErrorBoundary는 오류가 발생한 컴포넌트로부터 가장 가까운 ErrorBou..
[Docker] docker [명령어] not working (오류 해결) 목차개요과정문제 발견해결 완료개요팀원 분이 도커 위에 spring boot프로젝트를 하나 띄우려고 실행을 했다는데 확인해 보니 도커가 동작을 하지 않는 상황.docker ps와 같은 기본적인 명령어도 동작을 하지 않는걸 보니 docker 자체에 문제가 있는 것으로 추측.현재 컨테이너들의 동작은 모두 멈춘 상황이지만, 기존 데이터를 보존하기 위해 데이터 손상을 최소화 하면서 해결 예정.과정(1) 기존 데이터 확인가장 먼저 실행되던 기존 서비스들의 데이터의 누락이 발생하면 안되기 때문에 각 서비스 데이터들이 마운트 되어있는지 확인. docker-compose로 서비스들을 띄워놓았기 때문에 docker-compose.yml 파일에서 volumes 옵션으로 마운트 되었는지 확인 가능. (2) 과정docker를 ..
[React] useMutation 목차useMutation이란useMutation 예시useMutation과 useOptimistic 비교useMutation이란TanStack-Query에서 서버 데이터의 변경을 요청할때 사용하는 훅 useMutation은 주로 낙관적 업데이트를 통해 사용자 UI개선을 목적으로 사용되는 훅입니다.좋아요나 읽음 처리 등의 UI 변경사항을 즉각적으로 적용할때 사용됩니다. 다른 TanStack-Query와 다르게 query key를 직접적으로 사용하지는 않지만, useQuery, invalidateQueries 등과 같은 훅을 적절히 사용하여 쿼리를 제어하여 쿼리 캐시의 동기화를 보장해줍니다.구조const {mutate, data, isError, isSuccess, ...} = useMutation({ mu..
[React] shadcn & tailwind 목차개요tailwindshadcn개요팀 프로젝트 진행 중, 디자이너와 퍼블리셔 분들이 다른 프로젝트에 투입되서 다음 스텝 기획에 영향을 받았고, 효율적인 컴포넌트화를 위해 최근 많이 보이는 shadcn과 tailwind을 적용해보기로 했습니다. 개발자들이 shadcn을 이용해서 기본 틀을 만든다음, 디자인과 퍼블분들이 오시면 디테일하게 조정해서 공용화 하기로 했습니다. shadcn과 tailwind가 무엇이며 초기세팅하는 법을 알아보겠습니다.tailwindHTML요소에 간편하게 스타일을 적용시킬 수 있는 CSS프레임워크 일반적인 css를 사용하는 경우 HTML요소에 style을 직접 먹어야해서 가독성과 관리가 어렵습니다.하지만 tailwind는 className 속성에 클래스를 조합해서 편리하게 스타일을..
[React] ErrorBoundary 목차ErrorBoundary란?구조사용방법ErrorBoundary가 잡지 못하는 오류ErrorBoundary란?하위 컴포넌트에서 throw된 에러를 일괄적으로 catch해서 대체 UI를 노출시켜주는 기술 즉, 오류 발생시 오류 화면을 보여주는 기술입니다. Suspense는 대기 상태를, ErrorBoundary는 오류 상태를 보여주기 위한 기술이라고 보면됩니다.구조 UI props오류 발생시 ErrorBoundary가 노출할 대체 UI를 선언하는 props입니다.목적에 따라 props를 하나 선택해서 사용하는것을 추천한다고 합니다.fallback정적인 대체 UI매개변수를 받지 않고 오류가 났다는 정적 화면을 보여줄때 사용fallbackRender동적인 대체 UI매개변수로 error와 resetEr..
[React] Suspense 목차Suspense란동작원리Suspense 동작 이해하기주의사항 Suspense란일부 구성 요소의 렌더링 준비가 되지 않았을때 준비가 될때까지 사용자에게 대체 UI를 노출시켜주는 기능 Suspense라는 기능은 if(isLoading) return 과 같은 코드를 일일이 작성하지 않고 미리 정의한 Suspense의 UI를 노출시켜줍니다. 아래는 isLoading이 ture일때 Suspense에서 노출하는 UI와 isLoading이 false일때 렌더링된 컴포넌트를 노출하는 예시 화면입니다.구조}> //childrenchildrensuspense가 렌더링하려는 실제 UI입니다. children의 렌더링이 지연되면 suspense는 fallback을 대신 렌더링 합니다.fallback실제 UI가 로딩될때..
[React] TanStack Query (V5) 목차TanStack Query란?QueryClientQueryClient 훅 종류TanStack Query란?웹 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 도와주는 도구로,서버로 부터 데이터를 받을때 서버의 상태를 관리하기 위해 만들어진 라이브러리 TanStack Query는 useState나 useEffect를 통해 관리하는 클라이언트 상태 대신 서버 데이터 전용 메모리 창고에 저장하고 관리합니다. 서버 상태란?더보기프론트 엔드 개발에서 말하는 상태(state)는 클라이언트 상태와 서버 상태로 구분할 수 있습니다. 클라이언트 상태는 컴포넌트가 현재 가지고 있는 상태로 useState, zustand, redux 등이 제어하는 정보입니다.예시로 모달 열림,닫힘 상태 / ..
[React] useActionState 목차useActionState란?예시useActionState란?폼(Form) 액션의 결과에 따라 상태를 제어하고, 로딩 상태를 간편하게 관리할 수 있게 해주는 훅. form을 이용해서 서버에 데이터를 수신하고 결과를 받고 오류를 제어할 수 있게 해줍니다. 이러한 동작을 폼 액션 또는 서버 액션이라고 합니다. 서버 액션이란?HTML의 을 이용할때, 폼 데이터를 직접 관리하는 것이 아니라 폼의 action에 직접 연결해서 함수로 처리하는 것을 의미합니다. Next.js에서 제공하는 기능으로 함수를 서버에서만 동작하도록 선언합니다.API를 통해서 데이터를 전달하는 게 아닌 함수가 서버에서만 동작하기 때문에 보안이 강하다는 장점이 있습니다. 서버 액션은 next.js와 같은 풀스택 환경에서만 동작할 수 있습니..

티스토리툴바