TIL

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

absolute / relative 사용 시 수직 가운데 위치시키기 absolute right-0 top-1/2 transform -translate-y-1/2

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

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

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에서 제..