본문 바로가기

분류 전체보기

 (103)
TIL - 리액트 훅과 가상 DOM의 상호작용 1. 가상 DOM (Virtual DOM)리액트에서 사용하는 가상 DOM은 렌더링 효율성을 높이기 위해 실제 DOM의 경량화된 사본을 메모리 내에서 유지합니다. 상태나 props가 변경되면 리액트는 새로운 가상 DOM을 생성하고, 이전 가상 DOM과 비교(diffing)하여 변경된 부분만 실제 DOM에 반영(patching)합니다. 이는 전체 DOM을 다시 렌더링하지 않고, 변경된 부분만 업데이트함으로써 성능을 최적화하고, UI 업데이트를 예측 가능하게 만듭니다.2. useRefuseRef는 리액트 훅으로, DOM 요소나 변경 가능한 값의 참조를 유지하는 데 사용됩니다. 컴포넌트의 전 생애주기 동안 유지되는 ref 객체를 생성합니다. useRef는 DOM 요소에 접근하거나, 상태 변화 없이 변수 값을 유..
TIL - 무한 스크롤 데이터 요청 중 깜빡임 제거 문제 상황프로젝트에서 포켓몬 리스트를 무한 스크롤로 구현하고, 세대별로 필터링하는 기능을 추가했습니다. 그러나 세대별 데이터를 필터링할 때마다 무한 스크롤 데이터로 초기 데이터만 20개가 있고 필터링된 데이터는 새로 요청을 해서 필터링될  때마다 UI 깜빡임이 발생하는 문제가 있었습니다. 이 깜빡임은 API 요청 중 로딩되는 상태에서 생기는 문제로 리액트의 장점인 SPA을 통한 강력한 사용자 경험(UX)과 거리가 멀어보였습니다. 해결 방법: Skeleton 로딩 사용깜빡임 문제를 해결하기 위해 Skeleton 로딩을 사용했습니다. Skeleton 로딩은 로딩 중에 리스트와 동일한 UI를 유지해 줬습니다.const PokemonSkeletonList = ({ count = 12 }) => ( {A..
TIL - 재사용 가능한 컴포넌트 만들기: class-variance-authority 활용 오늘은 class-variance-authority (CVA)를 사용하여 재사용 가능한 UI 컴포넌트를 만드는 방법을 학습했습니다. CVA는 다양한 스타일 변형을 정의하고 조합할 수 있는 유틸리티 라이브러리로, Tailwind CSS와 같은 스타일링 프레임워크와 잘 어울립니다. 예제 코드import { cva } from "class-variance-authority";const button = cva(["font-semibold", "border", "rounded"], { variants: { intent: { primary: [ "bg-blue-500", "text-white", "border-transparent", "hover:b..
TIL - 북마크된 영화 목록 기능 구현을 위한 고민과 해결 방안 프로젝트에서 북마크된 영화 목록 기능을 구현하는 과정에서 고민하고 최종적으로 결정한 사항을 공유합니다. 아래는 초기 코드와 최종 코드, 그리고 각 코드의 장단점을 비교한 개선된 사항입니다. 고민 이유북마크된 영화 목록 기능:개별 영화의 상세 페이지에서 북마크를 추가하고, 이를 모아 북마크된 영화 목록을 표시하는 기능.북마크된 영화 목록을 표시하기 위해 각 영화의 세부 정보를 요청할 때 서버 과부하 우려.데이터 요청에 대한 고민:인기순, 최신순 등의 영화 목록에서 중복된 영화가 있음.실제로 필요한 데이터보다 많은 데이터를 한 번에 요청하게 되어 불필요한 데이터까지 받아오게 됨.해결 방안한 번에 요청하는 방법:장점:네트워크 효율성: 여러 개의 요청을 하나로 줄여 네트워크 부하를 줄임.응답 속도: 한 번의 요..
TIL - Next.js&supabase에서 createClient Vs. createServerComponentClient 오늘은 Supabase와 Next.js를 함께 사용할 때의 다양한 접근 방식에대한 학습 내용을 정리해보려고 합니다. 각각의 방법에 대한 장단점과 적합한 사용 상황을 공유하겠습니다.기본 Supabase 클라이언트 사용 (createClient)장점:간단하고 직관적인 설정: 설정이 매우 간단하고 직관적이어서 빠르게 프로젝트를 시작할 수 있습니다.클라이언트 사이드에서 완전한 Supabase 기능 사용 가능: 클라이언트 사이드에서 Supabase의 모든 기능을 사용할 수 있습니다.onAuthStateChange를 통한 세밀한 인증 상태 관리: 인증 상태 변화를 실시간으로 관리할 수 있어 편리합니다.단점:서버 사이드 렌더링(SSR)에 최적화되어 있지 않음: 서버 사이드 렌더링에는 적합하지 않습니다.클라이언트 사이..
TIL - TanStack Query 무한 스크롤 커스텀 훅 리팩토링 오늘은 무한 스크롤 로직을 재사용 가능한 커스텀 훅으로 리팩토링했습니다.배경기존 코드에서 인기 영화, 현재 상영 영화, 상영 예정 영화 등을 각각의 훅에서 무한 스크롤로 불러오는 로직이 중복되어 있었습니다.작업 내용useInfiniteScroll 커스텀 훅을 생성하여 무한 스크롤 로직을 추출usePopularMovies, useNowPlayingMovies, useUpcomingMovies 훅에서 useInfiniteScroll 훅을 재사용하여 코드 중복 제거코드 예시// 변경 전 무한 스크롤 export const usePopularMovies = () => { return useInfiniteQuery, string[], number >({ queryKey: ["popularMov..
TIL - Supabase에서 .select() 사용하기 어제 Supabase를 사용하여 댓글 기능을 구현하면서 .select() 메서드의 중요성을 깨달았습니다. 이전에는 유효성 검사를 클라이언트 측에서 처리했었고 이번에 서버 측에서 처리 했을 때 발생한 문제를 해결하기 위해 .select() 메서드를 도입하게 되었습니다. 이번 포스트에서는 .select() 메서드를 사용하게 된 이유와 그 효과에 대해 설명하겠습니다. 문제 상황처음에는 Supabase를 통해 댓글 기능을 구현하면서, API 호출 한 번으로 유효성 검사를 처리했습니다. 그러나 .select() 메서드를 사용하지 않았기 때문에 다음과 같은 문제들이 발생했습니다:에러 발생: 유효성 검사를 클라이언트 측에서 처리했을 때, 간헐적으로 에러가 발생했습니다.느린 데이터베이스 업데이트: 캐시를 초기화했음에도..
TIL - Zustand와 Tanstack Query를 이용한 상태 관리 오늘은 개인 프로젝트에서 상태 관리 라이브러리를 RTK(Redux Toolkit)에서 Zustand와 Tanstack Query 조합으로 변경한 이유에 대해 정리합니다. 변경 이유1. Zustand의 장점:간결함과 단순성: Zustand는 보일러 플레이트 코드가 적고 사용하기 쉬워 빠르게 작업이 가능합니다.경량화: Zustand는 가벼운 상태 관리 라이브러리로 메모리 소비가 적습니다.최적화된 렌더링: 필요한 컴포넌트만 업데이트하도록 최적화되어 불필요한 리렌더링을 줄여줍니다.2. Tanstack Query의 장점:데이터 패칭 관리: 서버 상태 관리에 최적화되어 있으며, 데이터 패칭, 캐싱, 동기화 등을 자동으로 처리해줍니다.자동 데이터 리프레시: 데이터가 변경되면 자동으로 최신 상태를 유지하기 위해 데이터..

티스토리툴바