본문 바로가기

전체 글

 (106)
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의 장점:데이터 패칭 관리: 서버 상태 관리에 최적화되어 있으며, 데이터 패칭, 캐싱, 동기화 등을 자동으로 처리해줍니다.자동 데이터 리프레시: 데이터가 변경되면 자동으로 최신 상태를 유지하기 위해 데이터..
TIL - 배럴 파일 구조를 통한 효율적인 컴포넌트 관리 여태까지 프로젝트를 하면서 각 컴포넌트 폴더 내에서만 index 파일을 사용하여 컴포넌트를 export 했었습니다. 예를 들어, auth 폴더에서 LoginForm과 SignUpForm을 각각 export 하기 위해 해당 폴더의 index 파일을 사용했었습니다. 이번 개인 프로젝트에서는 폴더 구조를  배럴 파일 구조로 진행해 보기로 결정하면서  배럴 파일 구조가 뭔지 학습하게 되었습니다. // 이전 프로젝트에서 LoginForm을 import하는 예시import LoginForm from '../components/auth/login/LoginForm';  이번 프로젝트에서는 모든 컴포넌트를 components/index.ts에서 중앙 집중식으로 export 하기로 결정했습니다. 이 방식은 모든 컴포넌트..
TIL - 개인 프로젝트, 영화 추천 사이트 - 1 개요프로젝트 이름: MovieMate프로젝트 기간: 6월 25일 ~ 7월 14일프로젝트 설명: 사용자가 영화 목록을 탐색하고, 리뷰를 작성하며, 실시간 채팅을 통해 영화에 대해 토론할 수 있는 웹 애플리케이션입니다. Supabase를 이용한 회원가입 및 로그인 기능, TMDb API를 통한 영화 데이터 연동, 다양한 기능들이 포함되어 있습니다.이번 주 목표: 이번 주 동안 영화 추천 사이트 MVP 완성 목표 기능회원가입 및 로그인: Supabase 및 JWT 기반 인증영화 목록 및 상세 페이지: TMDb API 연동댓글/리뷰 기능: CRUD 기능 구현북마크 기능: 즐겨찾기 기능 구현영화 추천 설문 기능: 설문조사 로직 구현사용자 프로필 관리도전 사항실시간 채팅 기능: WebSocket.IO 사용알림 기능..
TIL - JavaScript 메모리 구조와 React 메모리 관리 JavaScript 메모리 구조JavaScript의 메모리 구조는 주로 세 가지 주요 영역으로 나뉩니다: 스택(Stack), 힙(Heap), 그리고 코드(Code) 영역입니다. 각 영역은 특정 종류의 데이터를 저장하고 관리하는 데 사용됩니다. 1. 스택 영역 (Stack Area)역할:함수 호출 시 생성되는 호출 스택(Call Stack)과 로컬 변수(Local Variables)를 저장합니다.스택 메모리는 고정된 크기를 가지며, 매우 빠르게 데이터를 할당하고 해제할 수 있습니다.구조:콜 스택(Call Stack): 함수 호출과 반환이 기록됩니다. 함수가 호출될 때마다 새로운 스택 프레임이 추가되고, 함수가 종료되면 해당 프레임이 제거됩니다.로컬 변수: 함수 내에서 선언된 변수들이 저장됩니다.┌─────..
TIL - 이번 주 팀 프로젝트 KPT 회고 회고 내용오늘은 프로젝트의 KPT 회고를 진행했습니다. 회고를 통해 협업 과정에서의 경험과 앞으로의 개선 방향을 논의했습니다.KPT 회고Keep - 현재 만족하고 있는 부분필수 구현 사항: 필수 구현 사항을 모두 완료했습니다.설문조사 로직: 설문조사 로직이 잘 작동하며 결과가 랜덤하게 도출되어 만족스럽습니다.Problem - 불편하게 느끼는 부분화면 깜빡임 문제: 인가(Authorization)에서 로그인 상태가 아닌 경우 마이페이지나 글 작성 페이지로 리디렉션할 때 화면 깜빡임이 발생하여 불편합니다.Try - Problem에 대한 해결책, 당장 실행 가능한 것리디렉션 개선: 리액트 라우터 돔의 loader를 사용하여 데이터를 받아오면서 리디렉션을 하면 화면 깜빡임 없이 리디렉션할 수 있을 것 같습니다...
TIL - React Router에서 navigate와 Link의 차이점 오늘은 React Router에서 navigate와 Link의 차이점과 각각을 언제 사용하는지에 대해 알아보았습니다. 이 두 방법은 React 애플리케이션 내에서 네비게이션을 처리하는 데 필수적이지만, 서로 다른 목적과 사용 사례를 가지고 있습니다.  navigate목적: 주로 이벤트 핸들러나 함수 내에서 프로그래밍적으로 네비게이션할 때 사용됩니다.사용 시점: 특정 조건이나 사용자 액션에 따라 네비게이션이 필요할 때, UI 요소와 직접 연결되지 않을 때 사용합니다.예시:import { useNavigate } from 'react-router-dom';const navigate = useNavigate();const handleEditRecipe = () => { navigate(`/recipe/${r..

티스토리툴바