TIL

무한스크롤을 아주 쉽게 라이브러리 2개로 구현할 수 있다..!! 사용된 라이브러리1. useInfiniteQuery//설치명령어yarn add @tanstack/react-query​2. react-intersection-observer//설치명령어yarn add @react-intersection-observer/hooks​ react-intersection-observer를 사용한 이유 useInfiniteQuery로만 작성해보려고 하였으나초보자 이지만 코드 분리하는거 좋아하는 편.. axios코드, 훅, 전부 분리해 사용하고 싶은 오기 발동.export const useReadReHomeHomeList = (params: ScrollParamsType) => { return useInfiniteQ..

* 가장 하단에 참고 블로그가 있습니다. 참고한 블로그를 보고 제가 이해한 대로 재작성 하였습니다. 제가 이해한대로 작성하였으니 잘 모르시겠다면 하단에 참고 블로그를 확인해주세요. 간단 명료하게 잘 작성해주셨습니다. 전역상태 관리로 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로 해주어야한다!!