Sign in

it

it dev nextjs react-error-boundary

[React] ErrorBoundary & Suspense, 거의 완벽한 사용방법 가이드

📒 ErrorBoundary & Suspense, 거의 완벽한 사용방법 가이드잘 만든 Errorboundary백개의 try-catch 안 부럽다.프론트 개발을 계속하다 보니 다양한 상황을 마주치게 되었고, 그에 따른 적절한 화면 표현의 중요성을 점차 느껴갔습니다.대표적으로 서버 데이터에 대한 로딩과 에러 처리가 있죠.끊임없이 사용해 보고 개선해 보니 1년이 지난 지금에서야 어느 정도 감이 잡히는 거 같아 그 방법을 공유해보려 합니다.이 글은 실제 서비스에서의 적용 방법에 대해 설명하는 글이기 때문에 ErrorBoundary와 Suspense에 대한 개념은 아래 글을 참조해 주세요.ErrorBoundary를 통한 선언적인 에러 핸들링, react-query를 이용한 재호출 방법Suspense을 사용해 선..
wono | discuss |
it ops aws rds uuidv7

Implement UUIDv7 in Amazon RDS for PostgreSQL using Trusted Language Extensions | Amazon Web Services

UUID Version 7 (UUIDv7) was introduced to improve the randomness of UUIDv4. UUIDv7 encodes a Unix timestamp with millisecond precision in the first 48 bits of the UUID, meaning that UUIDv7 is time-based and sequential. Trusted Language Extensions (pg_tle) for PostgreSQL is a new open source development kit to help you build high performance extensions that run safely on PostgreSQL. In this post, we demonstrate how to create and install a Trusted Language Extension (TLE) using PL/Rust as the trusted language to generate a UUIDv7. We also take a deeper look into the underlying implementation of the extension.
wono | discuss |
it ops db erd

☁️ ERD CLOUD - ERD 다이어그램을 온라인에서 그려보자

ERD CLOUD 프론트엔드 작업을 하기전에 UI 와이어프레임을 그리는 과정은 중요하듯이, 백엔드에서도 데이터베이스 모델링 설계 과정은 매우 중요하다. 데이터베이스 모델링을 할 때 ERD 다이어그램 툴을 사용하는데, ERD 관련 소프트웨어는 대부분 유료이며 체험판 무료 버젼은 제약도 많고 대부분 연식이 좀 된 소프트웨어들이라서 디자인도 조금 올드하다. ERD(Entity Relationship Diagram) 문자 그대로 해석하면 '개체들의 관계를 다이어그램 형식으로 표현한 것' 이라고 볼 수 있고, 쉽게 정리하면 데이터베이스의 구조를 한눈에 파악할 수 있게 시각화한 것이다. [DB] 📚 데이터 모델링 개념 및 📈 ERD 다이어그램 그리는법 (1:N 관계) 데이터 모델링 이란? 데이터 모델링이란 정보시스..
wono | discuss |
it tool vscode postman

[VSCode] 💽 Thunder Client (포스트맨 대신 이거 쓰자)

보통 웹개발할 때 API 요청에 대한 결과를 체계적으로 확인하기 위해 포스트맨(Postman) 을 많이 들 사용한다. Postman은 API 개발, 테스팅, 문서화 및 모니터링을 위한 인기있는 플랫폼이다. 개발자들이 API 요청을 생성하고, 응답을 테스트하며, 협업을 통해 API를 관리할 수 있게 도와준다. 크롤링, RESTful 서비스, GraphQL 등 다양한 유형의 API와 커뮤니케이션할 때 유용한 도구로 사용된다. 하지만 단순히 API를 테스트 하는 목적으로서 포스트맨을 사용한다면 너무 기능이 과하고 무겁다. 따라서 VSCode 에디터 내에서 간단한 조작만으로 API 테스트를 빠르고 수월하게 할 수 있는 익스텐션을 소개해본다. Thunder Client Thunder Client 는 Postman..
wono | discuss |
it dev nestjs naming

NestJS - 네이밍 규칙

NestJS는 일반적으로 아래와 같은 규칙을 따른다. 1. 파일명은 .으로 연결하고, 둘 이상의 단어로 구성되어 있을 시 -로 연결 hello.controller.ts my-first.controller.ts 2. 클래스명은 카멜 케이스 사용 HelloController MyFirstController 3. 같은 디렉터리에 있는 클래스의 경우 index.ts 사용 // index.ts 미사용 import { HelloController } from './contrllers/hello.controller' import { MyFirstController } from './contrllers/my-first.controller' // index.ts 사용 import { HelloController, MyF..
wono | discuss |
it dev react-query

6. React Query가 필요한 이유

나는 React Query를 좋아한다. React Query가 React앱에서 비동기 상태를 다루는 방식을 단순화하기 때문이다. 하지만 가끔 서버에서 데이터를 페칭해오는 것처럼 "간단한" 작업에는 React Query가 필요하지 않다고 주장하는 글들을 볼 수 있다.React Query가 제공하는 모든 추가 기능이 필요한 것은 아니니까, useEffect 안에서 fetch를 사용하는 것만으로도 충분할 때 굳이 서드파티 라이브러리를 추가하고 싶지 않다는 것이다. 이는 어느 정도 맞는 말이다.React Query는 캐싱, retry, polling, 데이터 동기화, prefetching 등 많은 기능을 제공한다.이러한 기능들이 필요하지 않다면 괜찮지만, 그렇다고 해서 React Query를 사용하지 말아야 한..
wono | discuss |