Next.js에서 Devtools가 사라지는 문제 해결

문제 발생tanstack query hook을 만들어 사용하기 전 까진 문제 없이 devtools가 존재하다 hook을 사용하면 사라지는 문제가 발생했다!Tanstack Query를 사용하기 위해 먼저Provider를 만들어 {children} Root(next.js 14버전 기준 최상위 layout.ts)에 선언을 해줄 텐데Bad 😨만약 아래의 방법과 같이 TanstackQueryProvider안에 queryClient를 선언해줬다면 나와 같은 문제가 발생했을 것이라 생각한다.'use client';import { QueryClient, QueryClientProvider } from '@tanstack/react-query';import { ReactQueryDevtools } from ..

• format_list_bulleted 개발 공부/React-Next.js
• · 2024. 8. 7.
• textsms

About Next.js

Next.js란?풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크.기존에 React를 사용하던 것 처럼 사용자 인터페이스를 구축하고 Next.js를 이용해 추가 기능과 최적화가 가능내부적으로 Next.js는 번들링(빌드), 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성함. 따라서 구성에 시간을 낭비하지 않고 애플리케이션 구축에만 집중할 수 있다.→ React보단 자유도가 떨어질 것이다. 대신 React에서 내가 추가적으로 해야하는 일을 대신 해줘서 할 일을 줄여준다!주요 특징Routing레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터Rendering서버 컴포넌트와 클라이언트 컴포넌트를 사용한 CSR과 SS..

• format_list_bulleted 개발 공부/React-Next.js
• · 2024. 8. 7.
• textsms

로그인 여부를 SSR로 잘 처리하기 (+ hydration-error)

현재 올해도 아좌좌 서비스의 디자인을 한번 갈아 엎고 다시 만들고 있습니다.지난 11월과 달리 모바일로 사용하는 유저가 더 많을 것이라 생각되어 모바일 중점으로 변경했습니다!그래서 새로 네비게이션바를 만들게 되었는데 로그인 여부만 판단해서 변경해주면 간단하게 해결될거라 생각했는데 이게 생각보다 골치가 아프네요.😂목적로그인 여부에 따라 로그인이 되어있다면 마이페이지를, 되어있지 않다면 로그인하기를 네비게이션바에 보이게 하고싶었습니다. 발생한 에러저에게 발생했던 에러는 다음과 같습니다.로그인 한 뒤 로그인하기 -> 마이페이지로 변하지 않는 문제가 있었고 f5를 눌러 직접 새로고침해야만 변경되는 문제가 있었습니다.hydration에러hydration에러는 next.js를 사용하며 가장 많이 맞닥뜨리고있는 에..

• format_list_bulleted 프로젝트/올해도 아좌좌
• · 2024. 8. 6.
• textsms

비동기 처리 고찰

토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기 영상을 보며 내 코드를 어떻게 잘 수정할 수 있을지 고민하고있다.현재 axios를 이용해 API에 요청처리를 하고 있는데현재 내가 작성한 코드이다.import { axiosInstanceClient } from '../axiosInstanceClient';export const getAllPlans = async () => { try { const { data } = await axiosInstanceClient.get('/plans', { authorization: false, }); console.log(data); return data; } catch (error) { console.l..

• format_list_bulleted 프로젝트/올해도 아좌좌
• · 2024. 8. 6.
• textsms

JWT 쿠키에 저장하기

왜 쿠키를 사용하는가?올해도 아좌좌 프로젝트를 진행하던 중 기존 리액트 프로젝트 처럼 JWT 토큰을 로컬스토리지에 저장했다. 하지만 Next.js로 프로젝트를 만들고있기 때문에 로컬스토리지에 저장된 토큰은 서버 컴포넌트에서 접근하지 못했다...!그리고 추가적인 문제가 있는데, 만약 자동 로그인 기능을 사용하려 한다면 로컬 스토리지에 접근해 토큰을 가져와야 로그인이 되어있다는 것을 알 수 있다. 하지만 Next가 렌더링시 window에 바로 접근이 불가능한데 이 때 Recoil에 토큰의 기본값을 null로 설정해 놓은 상태에서 API를 불러오면 Authorization에 들어가는 토큰값이 null로 들어가는 문제가 생긴다 😭(+ 서버 컴포넌트에선 로컬스토리지에 접근할 수 없다. Recoil에 저장한 전역..

• format_list_bulleted 프로젝트/올해도 아좌좌
• · 2024. 8. 6.
• textsms