목표recoil default로 설정한 API가 호출되는 시점에 대해 이해하기next 최적화로 pre-fetch 되는 시점 이해하기 내용- 발생한 문제recoil Atom에 default로 설정한 API가 사용하지 않는 페이지에서도 호출되는 이슈가 발생 - 예상한 원인recoil 은 전역상태관리를 하니까 모든 페이지에서 해당 데이터의 사용 여부와 관계 없이 설정해둔 API가 호출될 거라 예상❌ 그러나 로컬 서버에서 테스트 시 동일한 에러가 발생하지 않음.💡이유는 모든 페이지에서 상태 관리를 위해 API를 호출한 것이 아니라, NextJS 에서 최적화를 위해 링크에 대한 prefetching 을 진행하면서 DB 페이지 링크 노출 시 API 호출이 발생하는 것이었음. pre fetch로 Recoil API..
오랜만에 TIL! 과제 테스트를 진행하면서 suspanse를 도입하였는데 처음으로 사용해본 suspanse는 나에게 의문점을 주었다. suspanse의 경우 로딩 중일 땐 fallback 으로 설정해둔 컴포넌트가 보여지게 되는데 이 때 기존 페이지는 black 된 상태이기 때문에 정말 로딩 컴포넌트만 보여지게 된다. 하지만 나는 기존 페이지를 유지하면서 위에 로딩 스피너를 띄우고 싶었기 때문에 이러한 로직이 난감했다.. 그 때 구글링하면서 찾은 것이 바로 useTransition! useTransition은 react18에서 동시성을 위해 추가된 훅으로 설정한 state의 값이 변경될 때까지 리렌더링을 유예할 수 있다고 한다! 그래서 useTransition을 사용함으로써 state가 변경될 때까지 fa..
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(..
지인의 소개로 원티드 프리온보딩을 알 게 되어 4월 챌린지에 참여하였었다. https://www.wanted.co.kr/events/pre_challenge_fe_8 프리온보딩 프론트엔드 챌린지 4월 | 원티드 AI 채용, 연봉 정보, 이력서, 커리어 콘텐츠까지 커리어 성장에 필요한 모든 것, 원티드에서 만나보세요. www.wanted.co.kr 챌린지가 매 월 진행되는 것 같은데 항상 주제는 다르다. 그래서 4월 주제가 때마침 관심있던 주제들이라 바로 신청했다! 챌린지 일정 챌린지 일정은 위의 사진처럼 진행되었다. 기술 역량 향상 기간에는 공지되어 있는 커리큘럼에 있는 내용으로 세션이 진행되었고, 취업 챌린지 기간에는 챌린저들의 지원을 독려하기 위한 지원 현황 공유, 채용 큐레이션 페이지 제공 등이 이..
window.history.scrollRestoration 현재 진행중인 프로젝트에서 페이지 이동 시 하단으로 스크롤이 움직였다가 페이지가 이동되는 현상이 발생했다. 처음에는 무한스크롤 부분이라 무한스크롤 스크롤 위치를 기억해두는 로직때문에 발생하는 문제인 줄 알았는데 알고보니 스크롤이 되는 모든 페이지에서 동일한 현상이 발생하고 있었다. 스크롤 관련해서 별도로 처리해준 것이 없어서 무엇이 원인일지 고민하다가 chat gpt에게 물어보니 브라우저의 기본동작이라고 대답해주었다. 그래서 찾아보니 브라우저에서 기본으로 이전 페이지의 스크롤을 유지해주는 기능을 지원하고 있었다. https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration ..
📅벌써 1년! (BGM은 브라운 아이즈 - 벌써 일 년) 학창 시절동안 꿈꿔왔던 전공을 보내주고 개발의 ㄱ도 모르던 내가 개발을 시작한 지 1년이 지났다. 코딩이 개발이랑 같은 건지도 몰랐던 초보자가 교육도 받게 되고, 프로젝트도 진행해 보게 되기까지 벌써 1년이 지났다니 시간이 참 빠르다. 뭐든 첫 1년이 가장 뜻깊기에 1년짜리 회고를 하면서 지금까지의 과정을 돌이켜 보고자 한다. 🏃개발의 시작 1년 전의 나는 연초부터 약 4개월간의 고민을 거치고 내 전공을 뒤로한 채 개발 공부에 막 뛰어든 상태였다. 임용공부를 하면서 전공과 개발을 고민하다가 불현듯 이렇게 고민할 시간에 뭐라도 해보는 게 좋지 않을까?라는 생각에 부모님께 통보하고 무작정 개발 공부를 시작했다. 그때는 개발이 뭔지, 자바스크립트가 뭔지..
❓문제상황 리코일로 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 이 경고는 해당 이미..
