본문 바로가기

TIL

 (95)
TIL - 상태 관리 도구 비교: Redux, Zustand, React Query 이번 TIL에서는 React 애플리케이션에서 널리 사용되는 상태 관리 도구인 Redux, Zustand, React Query에 대해 알아보고, 각 도구의 장단점과 사용 예시를 정리하겠습니다. 또한, 클라이언트와 서버 상태 관리를 설명하며 예시 코드를 제공하겠습니다.목차상태 관리 개요Redux vs. Zustand vs. React Query 비교ReduxZustandReact Query서버 상태 관리와 클라이언트 상태 관리사용 예시로그인 상태 관리 예시게시글 작성 예시대규모 애플리케이션에서의 상태 관리표와 다이어그램상태 관리 도구 비교 표상태 관리 다이어그램결론1. 상태 관리 개요애플리케이션에서 상태 관리는 중요한 역할을 합니다. 상태 관리 도구는 중앙에서 상태를 관리하고, 데이터를 업데이트하며, 컴포..
TIL - React 컴포넌트의 생애주기 React 컴포넌트의 생애주기1. 마운트 (Mount)constructor: 컴포넌트가 생성될 때 호출됩니다. 상태(state)를 초기화하고, props를 초기화합니다.getDerivedStateFromProps: 컴포넌트가 마운트되기 전에 호출되며, props로부터 파생된 state를 설정할 수 있습니다.render: 컴포넌트의 JSX를 반환하여 가상 DOM을 생성합니다.componentDidMount: 컴포넌트가 마운트된 후에 호출됩니다. 이곳에서 네트워크 요청이나 DOM 조작을 수행할 수 있습니다.예제 코드class MyComponent extends React.Component { constructor(props) { super(props); this.state = { data: nu..
TIL - 트러블 슈팅 with tanstack/react-query 문제점내일배움캠프 과제로 인한 코딩 중 API 호출이 성공적으로 작동하지 않았습니다. 새로운 지출 항목을 생성하려고 했으나, 데이터가 제대로 반영되지 않고 UI에도 나타나지 않았습니다. 원인 분석에러 처리가 부족: API 호출 시 발생하는 에러를 처리하지 않아서 문제를 진단하기 어려웠습니다.로그 부족: API 호출 전후로 충분한 로그가 없어서 데이터 흐름을 추적하기 어려웠습니다.React Query 설정 누락: useMutation 훅에서 onSuccess와 onError 옵션이 누락되어 API 호출 후의 후속 처리가 제대로 이루어지지 않았습니다. 해결 방안 단계에러 처리 추가: API 호출 시 발생하는 에러를 try-catch 블록을 통해 처리하고, 콘솔에 에러 로그를 출력하도록 했습니다.로그 추가: ..
TIL - TanStack Query의 주요 개념 쿼리(Queries):데이터 패칭 작업을 나타냅니다.고유한 쿼리 키와 패치 함수(fetch function)를 사용하여 정의됩니다.자동으로 캐시되고 백그라운드에서 업데이트됩니다.뮤테이션(Mutations):서버 데이터를 변경하는 작업을 관리합니다.사용자가 데이터를 생성, 업데이트 또는 삭제할 때 사용됩니다.성공 또는 실패 시 자동으로 쿼리 캐시를 업데이트합니다.캐싱(Caching):동일한 쿼리가 여러 번 실행될 때 중복 패칭을 방지합니다.캐시된 데이터를 기반으로 빠른 UI 업데이트를 제공합니다.자동 리페칭(Automatic Refetching):데이터가 변경되었을 가능성이 있을 때 쿼리를 자동으로 다시 실행합니다.네트워크 상태 변화, 페이지 포커스, 또는 데이터 변경 이벤트와 같은 조건에서 트리거될 수 ..
TIL - SPA 블로그 프로젝트 마무리 및 다음 계획 프로젝트 마무리이번 SPA 블로그 프로젝트는 조건부 렌더링을 하는 연습을 통해 사용자 경험에 대한 고민을 하는 발전을 이루었습니다. 그러나 저번 주 팀 프로젝트에서 이미 뉴스 피드 사이트를 만들어서 앞으로 구현할 블로그가 중복이 되는 것 같아서 프로젝트를 마무리하고 다음 프로젝트에  공공데이터를 활용하기로 결정했습니다.   구현된 주요 기능PostDetailPage에서 게시물 수정 및 삭제 기능목적:  PostDetailPage에 유저 상태를 조건부 렌더링해서 게시물을 작성한 사용자가 게시물 상세 보기에서 게시물을 관리할 수 있게 하고, 다른 사용자는 홈페이지에서 게시물의 세부사항을 볼 수 있습니다 Tailwind CSS를 사용한 스타일링 개선목적: Tailwind CSS를 익히고 다양한 구성 요소의 스..
TIL - 맛집 공유 뉴스 피드 사이트 프로젝트 회고 (트러블슈팅 위주) 목차프로젝트 개요트러블 슈팅 및 해결 사례아쉬운 점과 스스로 잘했다고 생각한 점시간 관리와 학습 과정프로젝트 성과와 주요 개선점결론프로젝트 개요이번 주 기간 동안 저는 팀과 함께 맛집 공유 뉴스 피드 사이트 프로젝트를 진행했습니다. 이 프로젝트의 목표는 사용자들이 맛집 리뷰를 작성하고 공유할 수 있는 플랫폼을 만드는 것이었습니다. 프로젝트는 React로 프론트엔드를, Supabase로 백엔드와 데이터베이스를 구축하는 방식으로 진행되었습니다.프로젝트의 주요 기능은 다음과 같습니다:사용자 인증: 회원가입, 로그인, 로그아웃 기능맛집 게시물: 맛집 리뷰 작성, 수정, 삭제 기능리뷰 작성 및 조회: 게시물에 대한 리뷰 작성 및 조회 기능팔로우 기능: 게시물 작성자 팔로우 기능마이 페이지: 사용자 프로필 수정 및..
TIL- Supabase SUPABASE란?SUPABASE는 오픈소스 Firebase 대안으로 2020년에 첫 릴리즈된 백엔드 서비스입니다. Postgres 데이터베이스를 기반으로 하며, 인증, 실시간 기능, 스토리지 등 백엔드 개발에 필요한 다양한 기능을 API 형태로 제공합니다.주요 기능Postgres 데이터베이스: 안정적이고 확장성 높은 오픈소스 관계형 데이터베이스를 사용합니다. SQL을 통해 데이터를 쉽게 조작할 수 있습니다.인증: JWT 기반의 인증 시스템을 제공하여, 사용자 가입, 로그인, 권한 관리 등을 손쉽게 구현할 수 있습니다.스토리지: S3 호환 API를 통해 파일 업로드와 관리 기능을 제공합니다.실시간 기능: 웹소켓을 활용한 실시간 구독 기능을 지원하여, 데이터 변경 사항을 실시간으로 동기화할 수 있습니다.E..
TIL (Today I Learned) - 팀 프로젝트를 하면서 오늘 배운 내용 Supabase에서 Cardlists 연결오늘 Supabase를 사용하여 cardlists를 성공적으로 연결했습니다. 이 과정에서 Supabase의 데이터베이스와 프론트엔드 간의 데이터 연동 방법에 대해 배우게 되었습니다.로그인 상태에 따른 페이지 헤더 조건부 변경Supabase 데이터베이스를 사용하여 사용자 로그인 상태에 따라 페이지 헤더를 조건부로 변경하는 로직을 구현했습니다. 이를 통해 사용자 인증 상태를 확인하고 UI를 동적으로 변경하는 방법을 익혔습니다.Follow API 작성Follow 기능을 위한 API를 작성했습니다. API 설계 및 구현 방법에 대해 더 깊이 이해하게 되었고, 사용자 관계 데이터를 처리하는 방법도 익혔습니다.React에서 Suspense 사용법 학습React의 Suspen..

티스토리툴바