TIL

Next.js / tailwind 나의 경우 여러단계로 진행이 되는 등록 컴포넌트를 만들고 있었다.그리고 stpper라는 스탭을 보여주는 컴포넌트를 만들어 사용자가 총 몇단계인지 몇번째 단계를 등록중인지 보여주고 싶었다. 이때 stpper는 grid로 개수와 현재 페이를 구분하고 있었다. 그런데 잘 되지 않아 찾아보니 tailwind는 기본적으로 빌드 시 사용하지 않는 스타일을 제거하는 Purge 기능이 있는데 직접적으로 참조하지 않는 클래스를 최종 css 파일에서 제거되어 제대로 작동하지 않는 것 이었다.   이런 경우 클래스들이 제거되지 않도록 tailwind.config.ts 에서 safelist 옵션을 사용해 동적으로 생성될 수 있는 클래스 이름을  주면 된다!    stpper에 동적으로 클래스..

위 에러는 Next.js 에서 next.config.js에 지정되지 않은 호스트이미지를 로드할때 발생되는 에러이다!그래서 아래와같이 작성해주면 해결된다! //next.config.mjs

처음 시도해보는 multipart/form-data  쉬운게 하나도 없다,,ㅎ 장장 6시간을 찾아보았으나 오타로인해.. Boundary를 찾을 수 없다고.. 나의 경우는 formData.append 에서 "images" 로 작성해야하나 오타로 인해 "imgaes" 였다.. ㅎ수정해주니 값을 잘만 받아온다. 참고로 multipart/form-data 형태로 api 요청을 해야하는 경우 axios에서 headers에 content-Type을  multipart/form-data로 해주어야한다!!

이전 내용에 이어서 axiosInstance코딩한 내용을 작성해보고자 한다. fetch보다 사용성도 좋고 error 핸들링이 좋은 axios 알랍유야.. 리펙토링 되었습니다. 리펙토링은 간단한 코드분리 정도이므로 아래 블로그를 참고해주세요.https://anywhereim.tistory.com/112 💡먼저 axiosInstance를 작성하게된 이유를 설명해보고자 한다.1. jwt 토큰을 발급받고 나면 사용자가 요청을 보낼때마다 header에 발급받았던 accessToken을 보내주어야 한다.2. accessToken은 유효기간이 짧기때문에 통신이 일어났을때 accessToken이 만료되면 refreshToken을 이용해 빨      리 재발급을 받아 사용자의 요청이 이루어질 수 있도록 해주어야 한다...

Nextjs 사용자가 소셜 로그인 버튼을 클릭하면 인가코드를 받아서 백앤드에게 전송한다.그리고 나는 백앤드로부터 회원가입이 되어있는 사용자라면 응답으로 accessToken을 받게 된다.  여기서 응답값으로 받은 accessToken은 jwt형태로 받게 된다.  그럼 하루종일 땅파서 드디어.. 하핫..정리해보자. 1. 응답값으로 받은 토큰을 axios를 이용해 디코딩 하는 서버단에 전달해주어야한다.2. jsonwebtoken 라이브러리를 이용해 jwt를 디코딩하고 내용물을 추출해야한다. 3. api 핸들러를 이용해 클라이언트 요청을 받아 jsonwebtoken 에 전달해 jwt를 추출할 수 있도록 해준다.1. axios로 sever(nextjs)에 값 전달하기.>> src/app/api/decodedAx..

주소값을 다양한 곳에서 받기때문에 주소 Form hook 만들기를 시도해보았다...! 신세계..  훅으로 만드는 이유는 여러곳에서 사용되어야 하는 경우가 주된 이유일 것으로 생각이 든다.이때 useFormContext 훅을 사용하면 컨텍스트에서 register와 error 직접 접근할 수 있도록 해준다. 이때 사용할 수 있는 라이브러리로 react-hook-form 이다. 🔧설치 명령어// react-hook-formyarn add react-hook-form​// DaumPostcodeEmbedyarn add react-daum-postcode 내가 작성한 코드를 기준으로 설명을 풀어가보도록 하겠다...!! 셋팅..?처음 사용하기 위해서는 다음과 같은 셋팅이 필요하다.useFormContext에서 제..

새로운 프로젝트를 만들기 위해 next.js를 이용해 초기 셋팅중에 Hydration Error를 마주했다.Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error layout(navbar, footer) 를 모든 페이지에서 보여주되, 로그인페이지에서는 로그인 페이지만 보여줄 수 있도록 하기위해그룹라우터를 이용했고, 그룹라우터 안에서 page와 layout을 만들어주었다. ❓Hydration error가 발생한 이유최상단 layout에 html과 body가 있기..

cmder 이용해 폴더 만들기yarn create next-app 파일이름 --typescript 마지막에 @/* 를 활성화 시킬때는 tap키를 눌러주면 활성화 가능!!tankstact-query- yarn add @tanstack/react-queryreact-toastify- yarn add react-toastifyreact-icons- yarn add react-icons// jwt 토큰 셋팅 도와주는 라이브러리js-cookie- yarn add --dev @types/js-cookie // jwt 디코딩 도와주는 라이브러리jsonwebtoken- 설치 명령어: - yarn add --dev @types/jsonwebtoken - 설치 명령어: - yarn add jsonwebtoken사용해보고 ..

'use client';import { useReserveStore } from '@/store/reserveClassStore';import { PaymentWidgetInstance, loadPaymentWidget } from '@tosspayments/payment-widget-sdk';import { useRouter, useSearchParams } from 'next/navigation';import { useEffect, useRef } from 'react';import { useAsync } from 'react-use';const clientKey = 'test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm' as string;export default function ..

🚨 문제 발생Vercel 배포를 위해 프로젝트를 빌드하던중 빌드 에러가 발생몇몇은 에러 메세지를 통해 바로 잡았으나, 메세지를 통해 문제의 원인이 바로 나타나지않는 에러들이 존재. 🛠️ 문제 해결 과정소거법을 이용해 폴더, 파일, 코드들을 하나씩 비활성화 하면서 문제 원인 분석 🔥 찾아낸 문제점1. Next.js는 빌드 타임에 모든 페이지를 사전에 렌더링(SSR) 하기 때문에 서버에서 컴포넌트를 HTML 형태로 렌더링 진행.✔️ 이 시점에서 클라이언트 사이드 전용 객체를 참조하면 오류가 발생 ➡️ 서버에는 window나 document 같은 객체가 존재하지 않음2.Session storage 나 useSearchParams 같은 URL 매개변수 훅은 빌드 시점에서 빌드 에러가 발생✔️ next.js..