[트러블 슈팅]React Suspense + TanStack Query 무한루프 문제 해결하기  게시글 리스트를 Tanstack Query에서 제공하는 useInfiniteQuery를 사용해 무한 스크롤을 구현했습니다. 그러면서 당연하게 로딩과 에러 처리를 쉽게 도와주는 isLoading, isError를 사용해서 관리를 해야겠다는 생각을 했습니다. isLoading, isError를 사용하게 되면 아래와 같이 명령적 데이터 패칭 방식을 사용합니다.// useQuery 부분은 공식문서 코드를 예시로 가져왔습니다!const { data, isLoading, isError } = useQuery({ queryKey: ["super-heroes"], queryFn: getAllSuperHero,});if ..

코딩 테스트 문제를 풀다보니 다른 사람의 코드에서 어떤 사람은 parseInt 어떤 사람은 Number를 사용하는 모습을 보고(필자는 주로 Number 사용) 무슨 차이점이 있는지 공부해 봤습니다. 한국인을 위해 결론을 먼저 말하자면둘 다 문자열을 숫자 형태로 변환시킬때 사용합니다.parseInt()는 문자열 형태에 있는 숫자를 숫자(정수)만 뽑아서 변환해주는 기능이 있고Number()는 문자열 전체가 숫자일 때 소수점까지 가져오는 기능이 있습니다. parseInt() 기본 형태parseInt(string, radix); // radix는 진수의미 (2진수, 10진수) 문자열 타입의 매개변수를 정수로 리턴해주는 함수 입니다.  Number() 기본 형태Number(값); Number()는 인자로 들어온 ..

들어가기 앞서..처음 프로젝트를 배포하고 중간 피드백을 받았습니다. 약 50명의 부트캠프 동료들과 실제 직원분들께 유저 테스트를 진행했고, 그 결과 "검색 시 로딩 상태가 불편해요", "페이지 전환할 때 깜빡임이 있어요", "에러가 났을 때 어떻게 해야 할지 모르겠어요" 등의 피드백을 받으면서 코드가 '동작하는 것'과 '잘 동작하는 것'의 차이를 실감했습니다. 더 나은 서비스를 만들기 위해 Next.js와 Tanstack Query를 공부했고 최적화 관련 강의를 들으면서 선언형 프로그래밍, 체계적인 에러 처리, SSR 등 다양한 기술을 접하게 되었고, 프로젝트에 적용해 보기로 했습니다. 단순히 기능만 동작하는 코드가 아닌, 유지보수 하기 좋고 사용자 경험도 개선된 서비스를 만들기 위해 아래와 같은 최적..

Next.js App Router + NextAuth.js authOptions 오류 해결    상황Next.js App Router + NextAuth 강의를 들으면서 마지막에 빌드 & 배포 부분을 공부하는 중yarn build를 하니까 아래와 같은 에러가 나와서 스택 오버플로우랑 깃허브, 블로그를 아무리 뒤지고 바꿔도 해결이 안됐는데 정답을 알고나니 허무해졌지만 다른분들은 나와 같은 고민을 안겪게 하고 싶기 때문에! (다 아실수도,,,) 이유아래 코드를 보다시피 authOptions를 따로 만들어줘서 NextAuth의 인수로 넣어주고도 있고 export해서 내보내주고도 있다.nextJs 13.4+ 에서는 /app/api/auth/[...nextauth]/route.ts는 route hanlder을 이..

Next.js App Router 페이지 생성 및 이동, 레이아웃 생성    페이지 생성 및 이동 - Next.js 에서는 폴더를 이용해서 nested routes를 생성합니다- 각 폴더에 위치한 page.tsx 파일은 라우트를 생성합니다.ex) /app/dashboard/page.tsx 파일은 /dashboard 경로를 생성합니다.  - page.js 파일을 제외한 파일들은 라우트가 생성되지 않기 때문에 관련된 컴포넌트 등의 파일을 해당 폴더 내에 함께 위치할 수 있습니다. 레이아웃 생성 Root layout- /app/layout.tsx 파일에 적용한 UI는 애플리케이션 내 모든 페이지에 적용됩니다.- 또한 root layout 파일을 metadata를 적용할 때도 사용할 수 있습니다. 페이지별 공통..

setTimeout, setInterval, clearInterval 이란?   css 애니메이션 강의를 들으면서 setInterval을 처음 보게되어 찾아보고 공부한 내용을 내 방식대로 쉽게 작성해서 공유하려고 작성한다. 1. setTimeout기본 형태: setTimeout(Fn, delay)setTimeout 메서드는 일정시간 후에 함수를 실행시켜주는 메서드 입니다.ex)setTimeout(()=>{console.log("hi")}, 1000); // 1초후에 console에 hi 출력됨 2. setInterval기본 형태: setInterval(Fn, delay)setInterval 메서드는 일정시간마다 계속해서 함수를 실행시켜주는 메서드 입니다.ex)setInterval(()=>{console...

태그로 모달(modal) 만들기??    이 글을 작성하게 된 이유원래는 실제 프로젝트에서 useModal 커스텀훅과 상위 파일인 layout.tsx에 div태그에 id값을 주어야 하는 방법까지 번거롭게 작업했었다.하지만 강의를 들으면서 상위 layout 파일에 div 요소도 안넣고 더 간편하게 사용하는 방법을 알게 되어 글을 작성해본다.import '../styles/globals.css';import Providers from './providers';export default function RootLayout({ children,}: Readonly) { return ( {children} );}'use client';import..

Prisma + Next.js 같이 사용할때 warn(prisma-client) 오류 해결   현상prisma랑 next.js를 같이 사용하는 프로젝트일 경우 dev 모드를 사용하면 아래와 같은 warning이 나온다.warn(prisma-client) There are already 10 instances of Prisma Client actively running. next dev 모드는 node.js 캐쉬를 없애기 때문에 매번 PrismaClient를 새로 생성해서 성능 문제를 일으키므로 매번 생성하지 못하도록 코드를 수정해주어야 합니다. 해결vscode에 주석으로 공부한 내용 적어두어서 복붙했습니다!/src/db/index.tsimport { PrismaClient } from "@prisma/c..

Recoil이란? Recoil 사용법!    강의를 들으면서 공부 중 Recoil 라이브러리를 처음 접하게 되어 나중에봐도 안까먹으려고 포스팅 합니다.. (나를 위해) 시작하기 앞서호환성 및 단숨함을 이유로 외부의 글로벌 상태관리 라이브러리를 사용하는 것 보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 좋다.. 좋지만 사용하는 이유가 있겠죠?React에는 다음과 같은 한계가 있다- 컴포넌트의 상태는 공통된 상위요소까지 끌어올려야만 공유가 될 수 있으므로, 이 과정에서 거대한 트리가 다시 렌더링 되는 좋지 못한 효과를 야기한다.- Context는 단일 값만 저장할 수 있고, 여러 값의 집합을 담을 수는 없다.결론적으로- 이 두 가지 특성이 트리의 최상단(state가 존재하는 곳)부터 트리의..