포스팅 목적Next14 + useInfiniteQuery 으로 SSR 무한스크롤 실습 중 경험한initialPageParam 인자값 명시 문제의 원인을 찾고 해결한 과정을 포스팅합니다. 해결 과정 1. 문제 배경과 경험한 문제에 대한 설명Next14 + useInfiniteQuery를 사용하여 초기 10개의 데이터는 SSR,이후에 받는 데이터는 CSR로 처리하는 실습을 진행 중에 겪은 문제입니다. 문제를 일으킨 코드는 다음과 같습니다.export const getServerSideProps = async () => { const response = await axios.get(`${API_URL}`); return { props: { initialData: response.data, ..

여러번의 팀 프로젝트를 진행하고 새로운 기술 습득과 경험에 시간을 들였지만매번 느끼는 것은 자바스크립트는 파도파도 끝이 없을 정도로 배울게 많은 것 같다는 점이다. 이전에 구입해놓고 사전처럼 찾아보던 모던 자바스크립트 Deep Dive를 처음부터 다시 꼼꼼히 공부해보며 부족한 부분을 채우면서 정리하는 시간이 필요하다고 느꼈다. Next.js , CSR/SSR, 인증/인가/토큰, 낙관적 업데이트, 무한스크롤, MockAPI 등공부해보고 다뤄보고싶은 기술들의 키워드는 아직도 한가득이지만 차근차근 해결해나가기로 했다.  좀 더 알차게 시간을 보내면서 이것저것 병행해보자..다시 JS를 학습하며 정리한 내용들을 포스팅 해볼 생각이다.노션에도 정리하고 포스팅도 하며 공부하면 머리에도 남을테니 여러번 돌려봐야겠다

강의 목표강의시간에 학습한 내용을 정리합니다. 강의 내용 정리강의시간에 학습한 내용을 정리합니다. 실습 - 리액트 테스팅 라이브러리 2라이브러리 기본 API 문법 익히기 (2)/components 디렉토리에 MyInput.tsx 파일 추가MyInput.tsx 에서는 nextui의 Input 그대로 export/components 디렉토리에 MyInput.test.tsx 파일 생성 후 테스트 작성 테스트 대상 코드import { Input } from "@nextui-org/react";export default function App() { return ( );} 가이드 코드import * as React from "react";import { render, wai..

목표Speed Insights를 설정하는 방법에 대해 알아보고 정리합니다.  공식문서 Speed Insights OverviewThis page lists out and explains all the performance metrics provided by Vercel's Speed Insights feature.vercel.com Speed Insights란 무엇인가?공식문서에서는 Speed Insights를 다음과 같이 소개하고 있습니다.Vercel Speed Insights provides you with a detailed view of your website's performance metrics, based on Core Web Vitals, enabling you to make data-dr..

목표모듈 모킹에 대해 학습하고 정리합니다  공식문서 Mock Functions · JestMock functions allow you to test the links between code by erasing the actual implementation of a function, capturing calls to the function (and the parameters passed in those calls), capturing instances of constructor functions when instantiated with new,jestjs.io  모듈 모킹은 무엇인가?모듈모킹의 정의모듈모킹은 테스트 환경에서 외부 의존성을 실제로 사용하지않고, 모의 객체를 만들어 사용하는 방법입니다.모킹을 ..