에바니네

Next에서 fallback 이미지 처리하기

어느 날 갑자기 S3에서 날라오는 이미지가 에러가 나기 시작했다. 네트워크 탭을 봐서 URL을 보니까 하나같이 S3에서 날아오는 놈들이 죄다 Not Found가 떠버린다. 그래서 fallback 처리하기로 했다. 기본 fallback 이미지는 alt 문자열이랑 같이나와서 정말 못생겼기 때문이다. fallback 이미지를 대체해주는 자체적인 attribute가 없기 때문에 Custom Components로 FallbackImage라는 컴포넌트를 만들었다. 그리고 그 안에서 받은 이미지가 onError를 뱉어낼때, props.src를 fallback 이미지가 저장된 path로 바꿔주는 그런 간단한 로직이다. import { NextPage } from 'next'; import Image from 'next..

외부 링크 새탭으로 열어보자

일단 메인페이지 하단에 푸터와 간단한 컨텐츠를 내 식대로 변경을 했습니다. 그리고 이제 인스타링크를 누르면 새탭에 열리게끔 해야하는데, 뭐 간단히 a 태그와 target="_blank" 로 열어재꼇습니다. 그런데 제가 학습하면서 기억하기로는 보안을 위해서 다른 어트리뷰트를 추가해줬던 기억이 있어서 서치를 해보았습니다. https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/ How to Use HTML to Open a Link in a New Tab Tabs are great, aren't they? They allow the multitasker in all of us to juggle a bunch of online tas..

페이지이동에 관해서 ...

현재 로그아웃 로직을 다시한번 훑어보면서 리팩토링을 하다가 문제가 발생했었다. 로그아웃을 하고나서도 마이페이지로 들어가지는 것이여따.. 네트워크를 확인해보니까 어째서인지 쿠키에서 삭제되었어야할 'access' 토큰이 헤더에 쏘-옥 담겨서 잘 넘어가는 것이였는데, 이럴 수가 있나 싶었다. 음 내가 의심해볼만한건 router.push() 뿐이였다. 남아 있던 데이터를 기억하는 듯해보였기 때문이다. 그래서 router.push를 한번 읽어보았다. 그리고 찾다보니 window.location.href와 같이 특정 상황에서 바꿔가면서 쓰는 것을 확인하게 되었다. 그리고 나는 쿠키를 삭제하고 적용을 시켜야하니 새로고침이 한번 필요하다는 생각이 들었고, window.location.href를 적용시켜서 사용을 해보니..

Pagination 전문가 React-Query...

우측은 피그마 디자인인데, 페이지네이션이 있다는 걸 확인했다. 앞서 무한스크롤을 구현할때, useInfiniteQuery를 썼었다. https://evan6-6.tistory.com/79 무한 스크롤 feat. useInfiniteQuery, Observer 일단 퍼블 단계에서는 Axios로 첫번째 페이지만 가져와서 뿌려준 상태였다. 또한 Query에서 상태관리도 안되구... 근데 알아보니까 React Query에 페이징에 특화된 훅이 있었다. useInfiniteQuery... https://ta evan6-6.tistory.com 이 Hook은 API 요청 반환값에서 Page와 PageParams를 캐시에 저장합니다. 그리고 다음,이전페이지 같은것을 감지 해서 알아서 boolean으로 뱉어주고 약간 ..

토스 결제창 연동하기

장바구니를 얼추 끝내고 주문 결제 단계에 도달했다. 그래서 Swagger를 참조해보니 토스 페이먼츠 연동하세연 음... 결제같은거 처음이였다. 그래서 일단 공식문서 밖에 답은없다. https://docs.tosspayments.com/guides/windows/card 신용·체크카드 결제창 연동하기 | 토스페이먼츠 개발자센터 결제창에서 카드사를 선택하고 카드사 인증을 거쳐 결제할 수 있도록 연동해보세요. docs.tosspayments.com 이렇게 CDN으로 가져올수도 있고 SDK 패키지를 설치해서 사용할 수 있다. 자세한 내용은 아래 링크로 가자 https://docs.tosspayments.com/reference/js-sdk 일반 결제 JavaScript SDK | 토스페이먼츠 개발자센터 토스페이..

Unable to preventDefault inside passive event listener invocation - 에러

passive 이벤트 리스너 동작안에서 preventDefault를 사용할 수 없다. 갑자기 이런 에러가 나왔다. Passive Event Listender 가 무엇일까? 아니 passive가 무슨 말이지 ? JS 바이블 MDN에서 검색을 해봤다. 그러니까 저런 에러가 나는 이유는 저기 기본값이 true로 되어있는 이벤트들 중에서 내가 preventDefault( )를 호출했거나, preventDefault( )를 이상하게 쓴것임을 알수 있었다. 에러를 막아보겠다고 저렇게 쓸데없는 preventDefault()를 박은 과거의 내가 보인다. 체크박스를 클릭하면 에러가 나질 않고, 체크박스로 감싸진 Text를 클릭하면 저렇게 에러가 나는걸 발견하였고.. 그런데 내가 생각했던 그 passive 속성이 defa..

무한 스크롤 feat. useInfiniteQuery, Observer

일단 퍼블 단계에서는 Axios로 첫번째 페이지만 가져와서 뿌려준 상태였다. 또한 Query에서 상태관리도 안되구... 근데 알아보니까 React Query에 페이징에 특화된 훅이 있었다. useInfiniteQuery... https://tanstack.com/query/v4/docs/reference/useInfiniteQuery useInfiniteQuery | TanStack Query Docs const { fetchNextPage, tanstack.com 일단 기본적인 반환값들은 useQuery와 겹치는게 많지만 추가로 위에 저 반환 값과 옵션들이 새로 생긴거라고 볼 수 있는데, fetchNextPage, feetchPreviousPage : 다음, 이전 페이지를 적용해서 fetch를 해줌 h..

JWT 토큰 Refresh 하기 feat. Axios

일단 소셜로그인을 통해서 인가코드를 가져와서 백엔드에게 Access, refresh 토큰을 가져와서 교환하는 것까지는 진행을 했다. 밥먹고 오니까 토큰이 만료됬다고 나오더라 그래서 빨리 refresh 로직을 만들어야겠다고 생각을 했는데, 이때 Axios interceptor가 생각이 났다.. 공식문서가서 다시 한번 읽어보자. https://axios-http.com/kr/docs/interceptors 인터셉터 | Axios Docs 인터셉터 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다. axios.interceptors.request.use(function (config) { return config; }, function (error) { return Promise.rej..