atomicdev 님의 블로그

CSS 스타일링 및 UI 라이브러리 정리CSS 스타일링은 웹 개발에서 중요한 부분으로, 각기 다른 방식으로 CSS를 작성하고 적용하는 다양한 접근법이 존재합니다. 이번 글에서는 CSS 스타일링 기법 중 CSS-in-CSS, CSS-in-JS, 그리고 Utility-First-CSS를 설명하고, 각 기법의 장단점과 사용 예제를 함께 소개하겠습니다.1. CSS-in-CSSCSS-in-CSS는 가장 전통적인 방식으로, CSS 파일을 별도로 작성하여 HTML이나 React 컴포넌트에 적용하는 방식입니다. 이 방법은 코드의 재사용성을 높일 수 있으며, 스타일을 별도의 파일로 관리함으로써 유지보수가 용이하다는 장점이 있습니다.CSS-in-CSS in ReactReact 컴포넌트에서 CSS-in-CSS 방식을 사용하..

React Player의 SeekTo 기능 문제 분석 및 해결 방안React Player를 사용해 비디오 재생 중 특정 구간으로 이동할 때, seekTo 메서드를 사용하여 해당 위치로 점프할 수 있습니다. 하지만 YouTube URL과 같이 일부 비디오 소스에서 seekTo를 사용하면 무한 로딩처럼 보이는 문제가 발생할 수 있습니다. 이번 글에서는 이 문제의 원인을 분석하고, 적절한 해결 방안을 제시합니다.1. 문제 설명: SeekTo 사용 시 무한 로딩처럼 보임문제 상황:YouTube URL을 사용해 비디오를 재생 중 seekTo 메서드를 호출하면, 비디오가 특정 구간으로 이동해야 하는데 로딩 화면이 계속 보이며, 재생이 제대로 되지 않는 현상이 발생합니다.문제는 m3u8 또는 mp4 파일은 정상적으로..

React Player – 비디오 플레이어 컴포넌트 구현 및 기능 설명React Player는 React 애플리케이션에서 다양한 비디오 플레이어 기능을 간편하게 구현할 수 있는 라이브러리입니다. 이 라이브러리를 사용하면 YouTube, Vimeo, SoundCloud 등의 여러 플랫폼에서 비디오를 재생할 수 있으며, 커스텀 기능도 손쉽게 추가할 수 있습니다.이번 글에서는 React Player를 사용하여 비디오 플레이어 컴포넌트를 구현하는 방법과 그 기능들을 하나씩 설명하고, 예제 코드를 통해 실습할 수 있도록 안내하겠습니다.1. React Player 설치React Player는 npm 또는 yarn을 사용해 쉽게 설치할 수 있습니다.npm install react-playeryarn add react..

Zod + Zustand + React Query로 인증(Auth) 구현하기 (feat. ErrorBoundary & AxiosInstance)이번 섹션에서는 AxiosInstance를 활용하여 인증된 요청을 효율적으로 처리하는 방법을 설명합니다. 일반적으로 JWT 토큰을 사용한 인증은 로그인 후 accessToken을 HTTP 요청의 헤더에 추가해야 합니다. 이를 수동으로 처리하는 것은 번거롭기 때문에 AxiosInstance를 사용하여 이 작업을 자동화할 수 있습니다.AxiosInstance를 사용한 인증 요청 처리AxiosInstance 설정axios는 interceptors를 제공하여 요청이 발생하기 전, 또는 응답이 반환되기 전에 특정 로직을 추가할 수 있습니다. 이 기능을 사용해 요청마다 JW..

React에서 Infinite Scroll 구현 및 성능 최적화무한 스크롤(Infinite Scroll)은 사용자가 페이지 하단에 도달할 때마다 API를 호출하여 새로운 콘텐츠를 추가로 로드하는 방식입니다. 이 방식은 페이지 네이션(pagination)과 달리 사용자가 끊임없이 콘텐츠를 확인할 수 있어 **사용자 경험(UX)**을 향상시키는 중요한 기술입니다. 그러나 제대로 구현하지 않으면 성능 문제를 일으킬 수 있기 때문에 성능 최적화가 중요합니다.이 글에서는 React에서 Infinite Scroll을 구현하는 방법과 성능 최적화를 위한 기술을 다룹니다. 특히 디바운스(Debounce), 쓰로틀(Throttle), 그리고 Intersection Observer API를 사용하여 효율적인 무한 스크롤을..

React Error Handling: 효과적인 에러 처리를 위한 Error Boundaries 가이드React 애플리케이션 개발 중 예기치 않은 에러는 사용자 경험을 크게 저해할 수 있습니다. 제대로 된 에러 처리가 이루어지지 않으면 애플리케이션이 중단되거나 빈 화면이 나타나는 치명적인 상황이 발생할 수 있습니다. 이를 방지하고, 사용자에게 더 나은 경험을 제공하기 위해 Error Boundaries를 활용한 에러 핸들링 방법을 소개합니다. 이 글에서는 Error Boundaries의 개념부터 실제 예제를 통한 구현 방법까지 상세히 다룹니다.목차Error Boundaries란?Error Boundaries의 필요성Error Boundaries 구현하기3.1 기본 Error Boundary 컴포넌트3.2..