Joyful 디버깅 (13) 썸네일형 리스트형 [css] iOS 모바일에서 scroll-behavior smooth 속성이 적용되지 않을 때, 부드러운 스크롤 효과 적용하기 CSS에서 scroll-behavior에 smooth 속성을 직접 지정하거나, 자바스크립트에서 scrollTo 메서드 사용 시 behavior 속성을 추가 해주면 스크롤 이동 시 부드럽게 이동하는 효과를 줄 수 있다. 1. CSS scroll-behavior:smooth; 2. JS에서 코드로 적용 window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); 하지만, 브라우저에서는 분명히 잘 작동이 되는데, 모바일에서는 scroll-behavior:smooth 속성이 적용되지 않는 문제가 생겼다. 모바일 스크롤 smooth를 검색해보았더니, iOS나 OSX에서의 safari에서는 Smooth Scrolling이 적용되지 않아,이를 해결하기 위해서는 자바스크립트 .. [JS] async/await 사용 시 Promise { <pending> } 이 뜨는 이유 ? Promise의 상태, Promise 메서드, Promise.all / Promise.race / Promise.allSettled 재고를 확인하고 싶은 상품들의 ID값을 배열로 받아 map 함수를 돌며 DB를 확인해, 재고가 부족한 상품이 있을 경우 해당 상품을 return 해주는 기능을 구현하고 있었다. 문제 상황 async/await 함수를 이용해 map함수가 전부 실행된 후에 outOfStockList를 response 해주는 로직이다. const checkCountOfStock = async (req, res) => { try { const outOfStockList = await req.body.map(async (product) => { const outOfStock = await Product.findOne({ _id: product.productId, countInStock: { $lt: product.countOfO.. [React] useRef로 transition이 동적으로 적용되지 않는 문제 해결 추천 책 리스트를 보여주는 무한 캐러셀을 만들던 중 transition 관련 문제가 발생했다. 설명을 위해 필요한 대략적인 컴포넌트 구조는 아래와 같다. const BookCarousel = () => { return ( ... ) }; export default BookCarousel; BookCarousel에서 무한 캐러셀을 구현하기 위해 마지막 페이지에서 index값을 변경시켜주는데, 이 때는 transiton 효과를 없애야 유저에게 무한으로 캐러셀이 넘어가는 느낌을 준다. (자세한 무한 캐러셀 구현 방식은 나중에 포스팅할 예정이다) BookImageList가 이동하면서 그 하위에 있는 Cover 컴포넌트의 scale사이즈도 변경되는데 여기에도 transition을 적용시켜놓았기 때문에 BookIm.. [React] Can't perform a React state update on an unmounted component. 에러 해결 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 위 에러는 컴포넌트가 언마운트 되어 사용할 수 없는데도 해당 컴포넌트의 state를 바꾸려고 했을 때 나타나는 에러다. 에러 메시지를 잘 읽어보면, 아무 실행도 되진 않겠지만, 어플리케이션의 메모리 누수가 발생할 수 있으니 useEffect의 cleanup 함수에 구독과 비동기 작업을 모두 취소하는 방식으로 고칠 수 .. 이전 1 2 3 4 다음
