jayspod

Infinite Scroll Error 첫 화면 렌더링시 메인 페이지 - 이미지가 일부 깨져보이는 현상 발생 프로필 페이지 - 일부 스켈레톤 UI가 새로고침 전까지 잔류하는 현상 발생 ### Temporary Solution navigate로 설정된 url이동(페이지 리로딩 x)을 window.location.href를 활용하여 페이지 리로딩하여 오류 수정 window.location.href = '/main'; ### Advanced Solution react-query useInfiniteQuery와 observer pattern을 활용하여 infinite scroll 구현 useInfiniteQuery에 내장된 isLoading → isFetching으로 코드 변경하여 오류 수정 const { da..

Install & Setting v5 install 명령어 yarn add @tanstack/react-query@beta devtools 설치 명령어 npm i @tanstack/react-query-devtools tanstack/react-query v5는 현재 베타버전으로 사소한 변경이 있을지도 모름 v4 사용 권장 useMutation v3/v5 기본 사용법 비교 import { useMutation } from 'react-query'; function TodoAdder() { const mutation = useMutation(addTodo, { onSuccess: () => { console.log('Todo added!'); }, onError: (error) => { console.er..

Trouble 인스타그램 클론 코딩 프로젝트 SNS 특성상 다수의 이미지를 한번에 처리하는 과정에서 렌더링 속도가 현저히 떨어지는 문제 발생 Solution Formdata 활용, 사용자가 이미지 업로드시 프론트에서 이미지크기 2mb로 제한 const options = { maxSizeMB: 2, maxWidthOrHeight: 1000, useWebWorker: true, };

Git-hub git pull 오류 로컬 환경에서 작업중인 branch에서 원격에 저장된 develop branch를 git pull 실패 → 작업 중인 branch에서 git pull origin develop을 했기 때문 Temporary Solution git clone (새로운 로컬 폴더에 깃 클론) git pull origin develop yarn git branch [new branch name] (새로운 브랜치 생성) 작업한 파일 copy&paste / 추가 변경사항 반영 새로운 branch에서 commit 후 push develop branch 에서 풀리퀘 받기 충돌이 일어날 확률이 높고, 비효율적인 방식 Advanced Solution develop branch로 이동 git pull ..

Keep 미니 프로젝트 스케줄대로 진행 계획된 시간에 공부하기 React 선행학습 / 스터디 React Query, Redux Toolkit에 대한 기초적 이해 아침 운동 Problem 알고리즘 공부하는 시간이 줄어듦 타입스크립트 스터디 필요 운동하는 시간이 격일로 불규칙 해짐 (장마로인한 테니스 불참) 1일 1블로깅 유지하기 Try(우선순위) 미니프로젝트 추가 기능 구현 정규시간엔 프로젝트에 올인하고 타입스크립트 공부하기 프로젝트 최적화 신경쓰기 1일 1블로깅 유지하기 정해진 아침시간에 운동하기 5주차를 마치며 미니 프로젝트 주차에 프론트를 혼자 맡게 되었는데 다행히 실력도 인성도 훌륭한 백엔드 팀원을 만나 주어진 기간보다 빠르게 프로젝트를 마치게 됨 API 설계 작성부터, 와이어프레임 설계, UI ..

window.location 문서의 현재 위치에 대한 정보와 함께 location 객체를 반환하는 속성 아래 세가지 모두 다른페이지로 리다이렉션 하는 데 사용되지만 브라우저에 미치는 영향은 다름 1. window.location.href 현재 웹페이지의 속성을 저장 (새 URL로 이동했을 때 뒤로가기로 돌아올 수 있음) assign보다 빠름 function setCurrentLocation() { // Change current location let newloc = "https://www.geeksforgeeks.org/"; window.location.href = newloc; } window.location.replace 현재 웹페이지의 속성을 새 URL로 덮어버림(새 URL에서 뒤로가기를 눌렀을 ..

React Portal 사용 이유 유연한 구성: 리액트 포탈은 컴포넌트를 다른 DOM 위치로 이동시키기 때문에 UI 구성을 더욱 유연하게 할 수 있습니다. 예를 들어, 모달(Modal) 창을 구현할 때 일반적으로는 모달 컴포넌트를 최상위 컴포넌트의 자식으로 추가해야 합니다. 하지만 리액트 포탈을 사용하면 모달 컴포넌트를 원하는 위치로 이동시킬 수 있으므로, 보다 복잡한 UI 구성도 쉽게 구현할 수 있습니다. 성능 최적화: 리액트 포탈은 컴포넌트의 렌더링 결과를 다른 DOM 위치로 이동시키는 기능을 제공하므로, 컴포넌트의 렌더링이 최적화될 수 있습니다. 예를 들어, 상위 컴포넌트에서 자식 컴포넌트를 렌더링하면서 상태(State)를 변경하면, 해당 컴포넌트와 그 자식 컴포넌트가 모두 다시 렌더링됩니다. 하지..

[TanStack Query 공식 문서] Overview | TanStack Query Docs TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. Motivation tanstack.com React Query의 장점 - 코드의 양이 적고 구조가 단순하여 유지보수에 용이 - 캐싱을 통해 애플리케이션 속도 향상 - 데이터 중복 ..

React Hooks(useMemo, useCallback, custom Hooks) 컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 리렌더링 될 때마다 리렌더링 하는 구조 React Hooks는 함수 컴포넌트가 상태를 조작하고 최적화 기능을 사용할 수 있게 하는 메소드 그 중 렌더링 최적화를 위한 Hook이 useMemo와 useCallback useMemo 특정 값(value)를 재사용하고자 할 때 사용하는 React Hook /* useMemo를 사용하기 전에는 꼭 import해서 불러와야 합니다. */ import { useMemo } from "react"; function Calculator({value}){ const result = useMemo(() => calculate(valu..

Keep 계획된 시간에 공부하기 React 선행학습 / 스터디 매일 30분 이상의 알고리즘 문제 풀이 아침 운동 Problem 리덕스, 리액트 쿼리에 대한 이해 부족 집중력이 꾸준히 유지되지 못함 우선순위를 두고 공부하지 못함 운동하는 시간이 격일로 불규칙 해짐 Try(우선순위) 우선순위를 두고 당일 계획대로 공부 전역 상태관리, 비동기 데이터 관리 집중 공부하기 강의 시간, 정규 시간 집중도 높이기 정해진 아침시간에 운동하기 4주차를 마치며 프로젝트가 얼마 안남은 시점에 좀 더 긴장하고 집중해서 부족한 개념을 확실히 공부해야 할 필요성을 느낌 차주는 전역 상태관리(Redux Toolkit), 비동기 데이터관리(ReactQuery), 메모리 누수, 데이터 과부하를 방지하기 위한 Throttling, De..