TIL

이전 내용에 이어서 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..

최근 채용 트렌드1. 지원서 작성의 간소화2. 나만의 매력 보여주기 잘 읽히는 이력서와 안 읽히는 이력서이력서란 "나를 표현하는 하나의 프로덕트"💡가독성💡읽는 사람 입장에서 생각하기 매력적인 이력서의 조건- What? (무엇을 했는지)- How? (어떻게 했는지)- Growth (꾸준히 성장가능할 ) 이력서 작성 꿀팁- 이력서는 자율제출이더라도 PDF로 제출하기! (모든 컴퓨터환경에서 다른 파일들을 다 열람하기 어려울 수 있다.)- 1-3장으로 간결하게! (디테일한 내용은 포토폴리오 주소링크를 첨부하면 좋다)- 직무 관련 경험(프로젝트, 스터디 )- 지원화는 회사의 흥미와 로열티 (기술 스택 및 채용 요건, 채용사이트, 기업블로그 등, 기술에 대한 탐구)- 포트폴리오(개인DB_notion, git, ..