프로젝트 데이터 관리할 때 GitHub에서 관리했었는데, GitHub가 정적 리소스를 서빙하는 용도가 아니라서 새로운 데이터 추가/수정 할 때 레포 로딩 지옥이 열리고, 또 데이터 추가할 때 용량 제한같은 문제 사항이 있어서 AWS S3로 관리하기로 함.GitHub에

Rendered fewer hooks than expected. This may be caused by an accidental early return statement.React에서 훅(Hooks) 을 사용하는 컴포넌트가 렌더링 흐름 중에 조건문 등으로 인해 일부 훅

개인 포트폴리오 사이트에서 프로젝트 데이터들을 별도의 GitHub 레포를 파서 관리했었음.그런데 문제가 새로운 데이터를 추가할 때나, 수정할 때 용량 제한과 또 레포 자체가 무거워져서 레포 로딩 지옥이 열렸음.또 Axios로 받아올 때도 속도가 느렸었음.그래서 이러한

Tanstack Query의 에러 핸들링을 위해 블로그들을 찾아보면 useCallback을 사용하여 핸들러 훅을 만드는 것을 찾아볼 수 있음.훅을 만들어서 사용하는 방법과 이전에 작성한 \[에러 핸들링 with Tanstack Query React 훅을 사용하려면 컴포

Tanstack Query는 API 호출에서 발생할 수 있는 에러도 강력하게 핸들링할 수 있는 기능을 제공함.중복된 에러 로직 처리사용자에게 일관된 UX 제공 가능(예: toast 알림)인증 실패, 서버 오류, 네트워크 오류 등의 케이스에 공통 대응 가능이전에는 def

React 16.8에서 도입된 기본 Hook함수 자체를 메모이제이션해서, 동일한 함수를 재사용하도록 하는 Hook재렌더링 시 불필요한 함수가 재생성되는 것을 방지함그로인해, 성능 최적화에 도움을 줌동일한 함수라고 하면 내가 선언한 함수라고 생각할 수 있음.뭐 이것도 어

이번 프로젝트에서는 폴더 구조 변경을 진짜 많이 했었음.처음에는 기존에 사용하던 폴더 구조 방식으로 만들었음.그런데 페이지가 많아지고, 컴포넌트들을 계속 만들게 되면서 이 폴더 구조를 좀 더 명확히 해야겠다(?)라는 생각을 가졌음.이 생각을 가지게 된 이유는 바로 co

드디어 홈 데이터 패칭 한동안 홈 화면은 휑~했었음 새 앨범 발매 섹션만 있었고, 나머지는 없었음. 왜냐, 이 때 플레이리스트 부분의 작업을 하고 있었기 때문. 그래서 npm start하고 화면이 켜졌을 때, 내가 계속 작업은 하고 있지만 뭔가 비었다(?), 볼게

ContentBox: { position: "relative" }, CategoryImg: { position: "absolute" }ContentBox 안 이미지 위치 조정 위해 사용ContentBox: { aspectRatio: "2 / 1" }ContentBox

그리드는 항상 플렉스 아이템 → 플렉스 컨테이너 추가하려면 container props를 추가해야함기본적으로 12개의 컬럼으로 구성됨기본 그리드 중단점은 xs, sm, md, lg, xl그리드 레이아웃 그리려면 일단, container prop을 사용해서 그리드 항목을

처음에 이 프로젝트를 시작하게 된 계기는 타입스크립트와 Tanstack Query가 너무 부족하다고 생각해서였음. 이전에 만들었던 TypeScript 프로젝트나 Tanstack Query는 어떻게 보면 내가 원하는 값, 구조로 만들었기 때문에 실제 현업에 가서 이 스

로그인을 하려는데, 로그인에 필요한 정보는 다 저장이 되었지만 로그인이 되지 않는 문제가 발생함.이를 해결하기 위해 refreshToken을 적용로그인 → 사용자 권한까지는 문제 없었음사용자 권한 → 필요한 정보들 받아오기까지는 문제 없었음정보들 다 받아왔는데 결론:

와.. 포트폴리오에 테스트 계정을 안해두고 올렸다...개발할 때는 내 개인 계정으로 계속 했어서 포트폴리오에는 테스트용 계정을 만들어야한다는 점을 잊고있었다...ㅠ아 진짜 이미 이력서 열람한 회사들은 아무 기능이 없는 사이트를 본건데..나 참 진짜 어이가 없네ㅠㅠ

웹팩을 설정하고 Netlify에 배포를 진행했는데 에러가 발생함.Deploy did not succeed: Deploy directory 'build' does not existbuild 폴더를 찾지 못했다는 에러웹팩에서 번들링될 파일이 저장될 폴더 이름을 변경했는데

쿼리의 캐시된 데이터를 즉시 업데이트하는데 사용할 수 있는 동기 함수플레이리스트의 이름을 변경하는 작업에서 처음에는 invalidateQueries를 사용했음.그런데 이름이 변경되지 않는 거임.그래서 api 호출이 잘못되었나?싶어 확인해보니 → 이것의 문제는 아니었음.

서버 데이터를 효율적으로 캐시하고, 공유하고, 갱신할 수 있도록 도와줌캐시 저장소 : 서버에서 가져온 데이터를 메모리에 저장하고, 여러 컴포넌트 간에 공유요청 중복 제거 : 같은 데이터를 여러 컴포넌트에서 요청해도 하나의 요청으로 처리자동 리패치 : 포커스 전환 시나

Netlify에서 배포 후 페이지 새로고침을 하면 해당 에러가 발생했다.처음에는 Tanstack Query의 Mutation 후 refetching 때문인 줄 알고 새로운 데이터를 받아오는 부분을 수정하였다.하지만, 해당 부분 수정 후에도 Page not found 에

Context API

CopyWebpackPlugin CopyWebpackPlugin 모듈은 프로젝트를 빌드할 때 정적 파일을 복사하고 디렉토리를 만들기 위한 도구 왜 사용했느냐..? 프로젝트 진행 중 메타 태그를 설정해야하는데, 나는 빌드 결과물이 dist에 되는 상황 그래서 publ

MUI에서 제공하는 스타일 넣는 props임sx는 style={{ }}랑 같은 개념임근데 MUI 전용인것 뿐