본문 바로가기

React25

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

Electron + React 프로세스 간 IPC 통신과 preload 사용 방법 📒 Electron + React 프로세스 간 IPC 통신과 preload 사용 방법Electron 애플리케이션은 주로 메인 프로세스와 렌더러 프로세스로 구성됩니다.Main Process는 단 하나만 실행되며 앱의 본체이고, Renderer Process는 화면에 그려지는 n개의 웹뷰 프로세스입니다.이 두 프로세스 간에는 Electron IPC (Inter-Process Communication)를 사용하여 통신합니다.그럼 IPC를 사용하여 두 프로세스 간에 데이터를 전송하고 명령을 보내는 방법을 소개합니다.📌 IPC로 Main - Renderer 프로세스 간 데이터 주고받기실제로 두 프로세스 간 데이터를 주고받기 위해서는 정말 간단한 절차만 거치면 됩니다.특정 채널명을 정한 뒤 ipcMain or .. 2024. 5. 13.

[Electron, React, TS] 데스크톱 앱 프로젝트 생성하기 📒 Electron + React 프로젝트 구축하기 (24-04-01 추가) electron-is-dev 모듈이 ESM 방식을 지원하기 시작해서 CJS, require에서 MJS, import 방식을 사용하도록 글 내용을 변경했습니다. 📌 Electron이란 Chromium과 Node.js를 하나의 런타임으로 통합하여 JS, HTML, CSS 같은 기본적인 웹 지식으로도 데스크톱 애플리케이션을 만들 수 있는 프레임워크 입니다. 이걸로 데스크톱 애플리케이션을 어떻게 만드냐 싶겠지만 이미 우리가 사용하고 있는 VSCode, Slack, Skype, Figma 등등등 이미 검증된 서비스들에서 사용하고 있습니다. 또한 빌드 라이브러리를 통해 하나의 자바스크립트 코드를 윈도우, 맥, 리눅스에서 흔히 보던 설치 프.. 2024. 4. 1.

[React] 리액트 스크롤 애니메이션 라이브러리 개발 📒 @lasbe/react-scroll-animation @lasbe/react-scroll-animation리액트에서 손쉽게 사용하는 스크롤 애니메이션. Latest version: 2.0.2, last published: a month ago. Start using @lasbe/react-scroll-animation in your project by running `npm i @lasbe/react-scroll-animation`. There are no other projects inwww.npmjs.com GitHub - devlasbe/react-scroll-animation: 리액트로 손쉽게 스크롤 애니메이션을 구현할 수 있는 라이브러리액트로 손쉽게 스크롤 애니메이션을 구현할 수 있는 라이.. 2024. 3. 13.

TanStack Query(react-query) v5 주요 변경점 알아보기 feat. Suspense, ErrorBoundary 📒 react-query v5 주요 변경점 알아보기 새로운 프로젝트에 생각없이 react-query를 설치하고 예전 방식 그대로 사용하려는데 여기저기 오류가 빵빵 터져나갔습니다. 왜이러지 싶어 package.json을 찾아보니 메이저 버전이 업데이트 되었고, 공식문서를 천천히 훑어보니 생각보다 사용 방식이 변경된 것이 많아 주요 변경점들을 짚고 넘어가겠습니다. 📌 hook 옵션 객체 형태로 변경 버전이 올라가며 훅에 옵션을 넣어주는 방식이 객체 형태로 바뀌어 더욱 직관적인 모습을 보입니다. 기존 사용 방식 const { data } = useQuery(['queryKey'], getData); const mutation = useMutation(setData); 변경 후 사용 방식 const { data.. 2024. 3. 13.

Storybook + React, 장점부터 설치와 문서 작성법 가이드 📒 Storybook Storybook은 UI 컴포넌트를 개발, 테스트 및 문서화하기 위한 오픈 소스 도구입니다. 개발한 공통 컴포넌트 혹은 디자인 시스템을 테스트하고 시각적으로 확인할 수 있는 환경을 제공합니다. 이번에 전사 공통 컴포넌트를 설계하고 여러 문서화 툴을 고민하다 결국 스토리북을 선택하게 되었습니다. 단 한 번만 스토리 파일과 mdx 문서 예제를 작성해 놓고 배포 자동화까지 해놓으니 생각했던 것보다 큰 어려움은 없었고 만족도는 굉장히 높았습니다. 그럼 스토리북의 장점과 사용방법에 대해 소개합니다. 📌 Storybook 장점 🔎 시각적 테스트 백문이 불어일견. 각각의 스토리를 통해 컴포넌트들의 props를 직접 조작하며 시각적으로 확인할 수 있는 환경을 제공합니다. 다양한 상태에서 컴포넌트가.. 2024. 3. 12.

사내 Nexus 저장소에 npm 저장소 구축하고 리액트 패키지 배포 및 설치하기 📒 Nexus npm repository 구축사내에서 여러 프로젝트들을 진행하며 공통 컴포넌트들을 만들어두고 사용하고 있었습니다. 항상 사용해야 하는 공통 컴포넌트들을 만들어만 두고 그저 파일을 복사 붙여 넣기 하며 조금씩 수정하다 보니 프로젝트가 늘어날수록 감당이 안 됐습니다. 그래서 이 참에 백엔드 팀에서 사용하는 Nexus서버도 이미 있겠다, 여기에 private npm repository를 구축하고 유틸, 공통 컴포넌트, 디자인 시스템을 제대로 패키지화해서 관리해 보기로 다짐했습니다. 그럼 그 험난한 과정의 첫 번째 과정.npm repository 구축과 패키지 빌드 그리고 publish와 install 하는 과정에 대해 설명하겠습니다.Nexus Repository는 소프트웨어 개발에서 사용되는.. 2024. 1. 24.

react-hook-form + yup + forwardRef()를 이용한 input 컴포넌트 제작하기, 오류해결 📒 react-hook-form를 이용한 Input 컴포넌트 npm i react-hook-form @hookform/resolvers yup react-hook-form은 손쉽게 form을 조작하고 최적화할 수 있도록 도와주는 패키지입니다. 거기에 @hookform/resolvers와 yup을 더하면 손쉽게 validation 처리와 에러메세지를 관리할 수 있습니다. 회사 동료들이 이 조합으로 야무지게 사용하는 것을 보고선 저도 사용할 때만 기다리다, 마침 새로운 프로젝트를 시작하는 김에 바로 도입했습니다. 기획을 대충 보니 input에 중복되는 여러 기능이 있어서 그냥 하나로 기능들을 묶으면 좋겠다 싶어 다음과 비슷한 형태로 컴포넌트를 만들어봤습니다. import { yupResolver } from.. 2024. 1. 23.

[React, JS, TS] 간결한 import를 위한 index(barrel) 파일을 자동으로 생성해보자 📒 JavaScript, Barrel 파일 자바스크립트에서 특정 디렉토리 내의 여러 모듈을 하나의 파일에서 re-export 함으로써 다른 파일에서 간결한 import문을 사용할 수 있게 하는 index 파일을 Barrel 파일이라고 합니다. 처음엔 Barrel이란 명칭을 몰라 그냥 인덱싱한다고 하며 1년 동안 검색도 제대로 못했었는데, 최근 아티클을 보다 이러한 index 파일을 Barrel이라 한다는 것을 보곤 속이 시원해졌습니다. 뭐 어쨌든 다들 아시겠지만 다음 코드들은 주로 index.js, index.ts로 사용되는 Barrel 파일의 일반적인 예시입니다. //barrel 적용 전 import { ModuleA } from 'utils/ModduleA'; import { ModuleB } fro.. 2023. 11. 7.

이전 1 2 3 다음

티스토리툴바