TIL

* 가장 하단에 참고 블로그가 있습니다. 참고한 블로그를 보고 제가 이해한 대로 재작성 하였습니다. 제가 이해한대로 작성하였으니 잘 모르시겠다면 하단에 참고 블로그를 확인해주세요. 간단 명료하게 잘 작성해주셨습니다. 전역상태 관리로 zustand를 사용하고 있어 zustand를 이용해 컨펌창을 만들어보려고 한다. confirm() 을 호출하면 기대하는 동작1. confirm 다이얼로그 띄우기2. 다이얼로그가 닫히면 결과 반환. confirm 다이얼로그를 띄우기 위해서는 modal과 같이 boolean값으로 상태를 변경시키고,상호작용이 끝나는 시점에 결과 값을 받기 위해서는 ` Promise `(대기, 완료, 실패) 되었을때 그 결과를 ` resolve `를 통해 반환받으면 된다. confirm창의 동작을..

사용자 미리보기 이미지를 띄울때 백앤드에게서 미리보기 url을 받아서 보여주는 로직이 있다. 사용자가 미리보기 상태에서 이미지를 삭제하면 서버에 삭제 요청을 하게 되는데 이때 404가 났다.  내가 확인 한 부분 1. 관리자창 요청url 확인2. 요청 url 값 스웨거에서 테스트 해보기3. url 요청 시 받은 값과 삭제 요청 시 url 확인  위 내용을 전부 확인했을 때 삭제 요청 url은 문제가 없었다. 그런데 관리자 창 네트워크에서 페이로드를 살펴봤을때 쿼리스트링으로 보냈던 url이 조금 이상했다. 그래서 axios 에서 받은 url을 추가로 확인해 보았다.  이상한 url을 받고 있었다. 이는 인코딩이 되지 않아 발생되는 문제였다.   위 처럼 encodeURIComponent(url) 을 이용하..

Next.js 에서 Image tag를 사용하면서 너무 많은 경고를 받아 나혼자 메모겸 작성.. ㅎ fill을 사용하는 경우   사용하지 않는 경우

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

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사용해보고 ..

error.js 파일을 만들어 에러 발생 시 나올 페이지와 에러처리 로직 작성해보기로!!(use client) error.js 는 react Error Boundary 를 생성해 중첩된 경로에서 런타입 오류를 처리할 수 있도록 도와준다고 한다. ❓원리중첩된 하위 세그먼트와 해당 하위 항목을 자동으로 래핑해 React Error Boundary를 생성하고 오류가 발생하면 해당 세그먼트로 격리되서 나머지 앱은 정상적으로 동작  error 페이지 경로app/global-error.tsx 또는 그룹라우팅 안에 (page)/error.tsx'use client'; // Error components must be Client Componentsimport { useEffect } from 'react';impor..

next.js / typeScript 사용 1. 체크된 상품의 productId 저장 const [checkItem, setCheckItem] = useState([]); 2. 체크박스의 체크상태를 관리 (초기에 모든 체크박스 상태는 ture) const [isChecked, setIsChecked] = useState(true); 3. 체크박스의 상태가 변경될 때 호출되는 함수 const handleCheckedBoxChange = (e: React.ChangeEvent) => { setIsChecked(e.target.checked); handleSingleClick({ checked: e.target.checked, productId: productId! }); }; e.target.value를 통..

컴파일 단계에서 타입을 체크 컴파일러? : 타입검사해줌,다른 프로그래밍 언어로 변환하는 도 설치방법(cmder 사용중) yarn yarn create vite 프로젝트이름 --template react-ts yarn create react-app twitter --template typescript npm npm create vite@latest 프로젝트이름 -- --template react-ts 기본타입