window.history.scrollRestoration 현재 진행중인 프로젝트에서 페이지 이동 시 하단으로 스크롤이 움직였다가 페이지가 이동되는 현상이 발생했다. 처음에는 무한스크롤 부분이라 무한스크롤 스크롤 위치를 기억해두는 로직때문에 발생하는 문제인 줄 알았는데 알고보니 스크롤이 되는 모든 페이지에서 동일한 현상이 발생하고 있었다. 스크롤 관련해서 별도로 처리해준 것이 없어서 무엇이 원인일지 고민하다가 chat gpt에게 물어보니 브라우저의 기본동작이라고 대답해주었다. 그래서 찾아보니 브라우저에서 기본으로 이전 페이지의 스크롤을 유지해주는 기능을 지원하고 있었다. https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration ..
📅벌써 1년! (BGM은 브라운 아이즈 - 벌써 일 년) 학창 시절동안 꿈꿔왔던 전공을 보내주고 개발의 ㄱ도 모르던 내가 개발을 시작한 지 1년이 지났다. 코딩이 개발이랑 같은 건지도 몰랐던 초보자가 교육도 받게 되고, 프로젝트도 진행해 보게 되기까지 벌써 1년이 지났다니 시간이 참 빠르다. 뭐든 첫 1년이 가장 뜻깊기에 1년짜리 회고를 하면서 지금까지의 과정을 돌이켜 보고자 한다. 🏃개발의 시작 1년 전의 나는 연초부터 약 4개월간의 고민을 거치고 내 전공을 뒤로한 채 개발 공부에 막 뛰어든 상태였다. 임용공부를 하면서 전공과 개발을 고민하다가 불현듯 이렇게 고민할 시간에 뭐라도 해보는 게 좋지 않을까?라는 생각에 부모님께 통보하고 무작정 개발 공부를 시작했다. 그때는 개발이 뭔지, 자바스크립트가 뭔지..
❗문제상황 메인페이지에서 무한스크롤로 독서기록 피드를 보다가 특정 기록을 보고 다시 뒤로가기로 이동하면 메인페이지의 최상단으로 이동한다. 이는 사용자가 기존의 기록을 계속 볼 수 없고 다시 스크롤을 해야 하는 상황이어서 사용자 경험에 좋지 않아 개선되어야할 것 같다는 팀원들의 공통적인 의견이 있어 이를 해결해야할 필요가 있었다. 👩💻로컬스토리지에 스크롤 위치 저장하기 스크롤 위치를 저장하는 방법으로 리코일과 로컬 스토리지 중 고민하다가 로컬스토리지를 선택하였다. 로컬스토리지를 선택한 이유 사용자가 임의로 값을 변경하는 등의 경우를 최소화하기 위해서는 리코일이 좋지만 새로고침 시에도 다시 뒤로 돌아가면 스크롤 위치를 기억하게 하고 싶었다. 그래서 새로고침과 상관없이 데이터를 저장할 수 있는 로컬스토리지를..
color-thief 라이브러리 도입 프로젝트에서 이미지의 메인 색을 추출해서 배경색을 지정해 주는 디자인 구현이 필요해서 관련 라이브러리로 color-thief를 도입하기로 결정하였다. https://lokeshdhakar.com/projects/color-thief/ Color Thief Examples Try it yourself Drag an image here Drop it! Getting started The Color Thief package includes multiple distribution files to support different environments and build processes. Here is the list of all the files in the /dist fo..
❓문제상황 리코일로 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 안..
📖오늘 배운 것 query undefined 페이지에서 router로 query를 받아와서 사용하는 부분이 있었다. 그런데 새로고침하면 해당 query 값이 사라져서 undefined가 되어 데이터 패치에 실패하는 버그가 발생했다. 아마 next router에서 query 값을 유지 못하거나 query 값을 받아오기도 전에 패치해버리거나... 원인은 정확히 몰라서 더 찾아봐야 할 것 같다. 데이터 패치는 csr로 하고 있었는데 이를 해결하기 위한 방법으로는 ssr를 활용하는 방법이 있었다. ❗쿼리 값을 ssr로 받아와서 컴포넌트가 마운트되기 전에 받아오는 방법 export const getServerSideProps: GetServerSideProps = ({ query: { id } }) => { re..
📖오늘 배운 것 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을 찾을 수 없다는데…로컬에 저장되어 있는 이미지를 왜 못찾는거지? 이유는 이미지에 대한..
📖오늘 배운 것 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 이 경고는 해당 이미..
📖오늘 배운 것 이미지에서 색상 추출하는 라이브러리 사용하기 메인페이지 콘텐츠 추천에서 각 책에서 대표 색을 뽑은 다음 배경색으로 사용해야 했다. 그래서 이전에 사용하려다가 실패했던 color-thief-react 라이브러리를 도입하기도 하였다. 라이브러리 자체로는 color-thief 가 오리지널이지만 해당 라이브러리를 type 지원이 안되는 것 같아서 color-thief-react로 사용하기로 하였다. 마지막 업데이트도 늦고 그렇게 많이 사용하는 라이브러리는 아니라 차선책을 찾아봤지만 생각보다 관련 라이브러리가 없어서… 사용하기로 결정! 나중에 내가 만들어볼 수 있음 좋을 것 같다. import { useColor } from 'color-thief-react'; const imgSrc = ''; ..
📖오늘 배운 것 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..
