일상/Today I Learned

일상/Today I Learned

next prefetch로 recoil에 default로 설정한 api가 호출된 이유

목표recoil default로 설정한 API가 호출되는 시점에 대해 이해하기next 최적화로 pre-fetch 되는 시점 이해하기 내용- 발생한 문제recoil Atom에 default로 설정한 API가 사용하지 않는 페이지에서도 호출되는 이슈가 발생 - 예상한 원인recoil 은 전역상태관리를 하니까 모든 페이지에서 해당 데이터의 사용 여부와 관계 없이 설정해둔 API가 호출될 거라 예상❌ 그러나 로컬 서버에서 테스트 시 동일한 에러가 발생하지 않음.💡이유는 모든 페이지에서 상태 관리를 위해 API를 호출한 것이 아니라, NextJS 에서 최적화를 위해 링크에 대한 prefetching 을 진행하면서 DB 페이지 링크 노출 시 API 호출이 발생하는 것이었음. pre fetch로 Recoil API..

일상/Today I Learned

2023.08.17 [suspanse, useTransition]

오랜만에 TIL! 과제 테스트를 진행하면서 suspanse를 도입하였는데 처음으로 사용해본 suspanse는 나에게 의문점을 주었다. suspanse의 경우 로딩 중일 땐 fallback 으로 설정해둔 컴포넌트가 보여지게 되는데 이 때 기존 페이지는 black 된 상태이기 때문에 정말 로딩 컴포넌트만 보여지게 된다. 하지만 나는 기존 페이지를 유지하면서 위에 로딩 스피너를 띄우고 싶었기 때문에 이러한 로직이 난감했다.. 그 때 구글링하면서 찾은 것이 바로 useTransition! useTransition은 react18에서 동시성을 위해 추가된 훅으로 설정한 state의 값이 변경될 때까지 리렌더링을 유예할 수 있다고 한다! 그래서 useTransition을 사용함으로써 state가 변경될 때까지 fa..

일상/Today I Learned

2023.08.03[Softeer 장애물 인식 프로그램/백준 2667번 단지 번호 붙이기]

Softeer라는 사이트에서 코테준비를 하다가 거의 하루종일 삽질을 했다! https://softeer.ai/practice/info.do?idx=1&eid=409 Softeer 연습문제를 담을 Set을 선택해주세요. 취소 확인 softeer.ai BFS/DFS를 이용해서 풀 수 있는 기본 문제였다. 개념만 알고 문제를 혼자서 제대로 풀어본 적이 없어서 공부하기 적절한 문제라고 생각했다. 이전에 공부한 문제랑 풀이 방법이 비슷할 것 같아서 예제를 해결하고 된건가 하고 있었는데 웬걸 제출해보니 테스트 케이스가 3개 빼고 다 오답이었다... const fs = require('fs'); const input = fs.readFileSync('/dev/stdin').toString().trim().split(..

일상/Today I Learned

2023.07.13[window.history.scrollRestoration]

window.history.scrollRestoration 현재 진행중인 프로젝트에서 페이지 이동 시 하단으로 스크롤이 움직였다가 페이지가 이동되는 현상이 발생했다. 처음에는 무한스크롤 부분이라 무한스크롤 스크롤 위치를 기억해두는 로직때문에 발생하는 문제인 줄 알았는데 알고보니 스크롤이 되는 모든 페이지에서 동일한 현상이 발생하고 있었다. 스크롤 관련해서 별도로 처리해준 것이 없어서 무엇이 원인일지 고민하다가 chat gpt에게 물어보니 브라우저의 기본동작이라고 대답해주었다. 그래서 찾아보니 브라우저에서 기본으로 이전 페이지의 스크롤을 유지해주는 기능을 지원하고 있었다. https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration ..

일상/Today I Learned

2023.06.26[nextjs - setState 경고]

❓문제상황 리코일로 data를 저장하면서 set 해주는 부분이 있었는데 관련해서 경고가 떴었다. Cannot update a component (Batcher) while rendering a different component (RecommendInputPage). To locate the bad setState() call inside RecommendInputPage ... 여기서 문제가 되는 부분이 아래의 코드 부분이었다. if (isSuccess) { setBookRecommendResult(data); return ; } 데이터 fetch 가 성공했을 때 해당 데이터를 recoil에 업데이트한 후에 컴포넌트를 보여주는 부분이었다. 여기서 recoil에 set 해주는 부분이 useEffect 안..

일상/Today I Learned

2023.06.16[nextjs - query ]

📖오늘 배운 것 query undefined 페이지에서 router로 query를 받아와서 사용하는 부분이 있었다. 그런데 새로고침하면 해당 query 값이 사라져서 undefined가 되어 데이터 패치에 실패하는 버그가 발생했다. 아마 next router에서 query 값을 유지 못하거나 query 값을 받아오기도 전에 패치해버리거나... 원인은 정확히 몰라서 더 찾아봐야 할 것 같다. 데이터 패치는 csr로 하고 있었는데 이를 해결하기 위한 방법으로는 ssr를 활용하는 방법이 있었다. ❗쿼리 값을 ssr로 받아와서 컴포넌트가 마운트되기 전에 받아오는 방법 export const getServerSideProps: GetServerSideProps = ({ query: { id } }) => { re..

일상/Today I Learned

2023.06.04[nextjs - image type error]

📖오늘 배운 것 image import type error 더미데이터용 북커버 이미지를 로컬에 저장해두고 사용하는 중이다. 외부 링크 사용시 color-thief-react 라이브러리에서 cors 에러가 발생 이러한 이유로 로컬에 저장해두었는데(서버 연결되면 뺄 예정) 개발환경에선 괜찮은데 배포될 때 타입 에러가 발생했다! ⚠️ src/pages/index.tsx(7,20): error TS2307: Cannot find module '../../public/images/bookCover/image1.jpg' or its corresponding type declarations. 이러한 에러가 발생하였다. module을 찾을 수 없다는데…로컬에 저장되어 있는 이미지를 왜 못찾는거지? 이유는 이미지에 대한..

일상/Today I Learned

2023.06.02[nextjs]

📖오늘 배운 것 next/Image 관련 경고들 오늘 next/Image를 사용하면서 다양한 경고를 만났었다. 지금 당장 기능에 영향을 미치는 건 아니지만 콘솔에 계속 경고가 뜨면 신경쓰이기에... 경고를 하나씩 처리하였다! priority 관련 경고 Image with src "/_next/static/media/image2.d26e4b3a.jpg" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold. Read more: https://nextjs.org/docs/api-reference/next/image#priority 이 경고는 해당 이미..

일상/Today I Learned

2023.06.01 [color-thief-react]

📖오늘 배운 것 이미지에서 색상 추출하는 라이브러리 사용하기 메인페이지 콘텐츠 추천에서 각 책에서 대표 색을 뽑은 다음 배경색으로 사용해야 했다. 그래서 이전에 사용하려다가 실패했던 color-thief-react 라이브러리를 도입하기도 하였다. 라이브러리 자체로는 color-thief 가 오리지널이지만 해당 라이브러리를 type 지원이 안되는 것 같아서 color-thief-react로 사용하기로 하였다. 마지막 업데이트도 늦고 그렇게 많이 사용하는 라이브러리는 아니라 차선책을 찾아봤지만 생각보다 관련 라이브러리가 없어서… 사용하기로 결정! 나중에 내가 만들어볼 수 있음 좋을 것 같다. import { useColor } from 'color-thief-react'; const imgSrc = ''; ..

일상/Today I Learned

2023.05.24[nextjs]

📖오늘 배운 것 nextJS로 공통 레이아웃 구현하기 진행하는 프로젝트 레이아웃 작업을 하면서 독서모임 상세페이지와 독서모임 채팅페이지가 같은 탭을 공유하고 있어서 해당 페이지 간에 공통 레이아웃을 작업해야 했다. react를 사용할 땐 react router의 nested routes를 이용해서 간단하게 구현할 수 있었는데 nextjs에서는 어떤 식으로 구현할 수 있을지 감이 안잡혔다. 그래서 공식문서를 찾아보던 중 https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts Routing: Pages and Layouts | Next.js Using Pages Router Features available in /p..

YJzero
'일상/Today I Learned' 카테고리의 글 목록