Joyful 디버깅 (13) 썸네일형 리스트형 [React Router] 리액트 라우터의 URL 파라미터 사용 시 404 오류 해결 방법 (React Router v5, webpack과 함께 사용할 경우 publicPath설정) 문제 상황 상품 리스트 페이지 개발 중, 카테고리번호 별로 다른 상품리스트를 렌더링 하기 위해 리액트 라우터의 URL 파라미터를 사용했는데 같은 방식으로 파라미터를 사용하던 다른 프로젝트에선 볼 수 없었던 아래와 같은 404 오류가 떴다. /categories 까지는 오류 없이 페이지가 잘 나타났지만 /categories 뒤에 '/'와 함께 파라미터를 붙이거나 '/'만 붙여도 해당 오류가 발생했다 해결 방법 이전 프로젝트들에서는 마주친 적 없던 오류였고, 공식문서를 봐도 리액트 라우터의 URL 파라미터 사용법엔 문제가 없었기 때문에 프로젝트 자체의 환경설정 부분이 잘못되었을 확률이 높았다. 관련 키워드로 열심히 검색해본 결과 웹팩에서 사용하는 HtmlWebpackPlugin에 publicPath가 설정되.. [Heroku] 헤로쿠 배포 시 webpack: not found 에러 해결 방법 (devDependencies와 dependencies) 문제상황 오랜만에 예전 프로젝트들을 확인하던 중, 헤로쿠로 배포해 둔 '북샵' 쇼핑몰 서버가 내려간 것을 발견했다. 어차피 최근 헤로쿠 무료 사용 기간이 종료되어서 서버를 옮기는 작업을 해야 했던 프로젝트라 옮기기 전 문제가 없는지 확인하려 프로젝트를 다시 한번 서버에 올려보던 중이었는데, 이상하게 무료기간과 상관없는 에러인 웹팩을 찾을 수 없다는 'webpack: not found'라는 메시지가 나타났다. 웹팩이 분명히 있는데 없다고요..? 이 전까지는 서버에 잘 올라갔는데... 뭐가 문제일지 알아보자 원인 내 프로젝트의 package.json에는 헤로쿠 서버에 클라이언트 파일을 올리기 전, 클라이언트 빌드 명령어를 아래와 같이 지정해 두었고, "heroku-postbuild": "cd client &.. [Webpack5] webpack-dev-server 변경 사항 바로 반영되지 않을 때, 개발모드에서 live reloading, Hot Module Replacement, 새로고침 안 될 때. (웹팩 watchOptions) 타입스크립트 공부를 위해 typescript + react + wepack 프로젝트 보일러 플레이팅 작업을 하던 중 평소처럼 설정한 웹팩이 평소와 다르게 동작하는 일이 일어났다. (도대체 왜 🤦🏻♀️) 웹팩 개발 서버에 작업 변경사항이 바로 적용되지 않는다 ? 문제 우리 webpack-dev-server는요... 개발 중 소스 코드의 변경 사항을 바로 적용해주어 변경될 때마다 매번 다시 웹팩 명령어를 실행하지 않아도 알아서 다 해주는! 아주 유용한 도구라죠... 그런데 가장 핵심인 이 기능이 동작하지 않는다. 개발자 도구를 열어보면, 콘솔에 [webpack-dev-server] Hot Module Replacement enabled. [webpack-dev-server] Live Reloading e.. [AWS] AWS 과금 환불 받는 법, 환불 후기, 환불 기간 (feat. 눈물의 편지) AWS Certified Developer Associate 공부를 위해 aws 계정을 만들어... 퇴근 후 매일 같이 열심히 공부하던 어느 날... 충격적인 메일을 발견하게 된다. ??? 서둘러 AWS에 들어가보니.. 실습 후 다 삭제한 줄 알았던 ec2 인스턴스가 미처 확인하지 못한 region에서 돌아가고 있었다. (무려 5만원이 넘는 돈.. 얼른 환불 방법을 알아보자) AWS 환불 방법 1. 과금이 의심되는 서비스 먼저 종료하기 우선 aws에 접속해 로그인 한다. Billing Dashboard에 들어가 과금된 서비스를 확인한 후 해당 서비스들을 먼저 종료해준다. (미리 종료를 해야 더이상 과금도 안 되고... 호소가 더 쉬워집니다..) 2. 환불 문의 하기 상단의 물음표 메뉴를 클릭한 후 Sup.. [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 함수에 구독과 비동기 작업을 모두 취소하는 방식으로 고칠 수 .. [css] rotate3d를 하면 z-index가 적용되지 않을 때, roatate3d와 z-index 충돌 에러 해결 현재 진행 중인 프로젝트에 rotate3d를 이용해 책을 입체적으로 회전시키는 기능을 추가했다. 개발하는 동안 크롬 개발자 도구에서 확인했을 때는 별다른 문제가 없었는데, 배포한 후 모바일 화면으로 회전 기능을 실행해보니 아래와 같은 문제가 발견되었다. 책이 rotate3d로 회전하면서 Header 영역을 뚫고 나오는 문제였다. 혹시나 하고 책이 회전하는 동안 사이드 메뉴도 눌러봤더니, 역시나 책이 SideDrawer 영역을 뚫고 나왔다. 해결방법 1 ( X ) 처음엔 z-index를 이용해 해결해보기로 하고, Header의 Navbar 컴포넌트와 SideDrawer 컴포넌트에 엄청나게 큰 z-index 값을, 회전하는 책 컴포넌트에는 z-index 값을 1로 적용시켜보았다. 그래도 책 컴포넌트가 Hea.. [React] react-router history.push 해도 url만 바뀌고, 새로고침은 안 되는 문제 해결하기 현재 개발중인 프로젝트에서 history.push 로 url을 이동했는데도 페이지가 refresh 되지 않는 오류를 겪었다. 현재 경로 '/product/과학/' 에서 왼쪽 메뉴의 다른 카테고리 버튼을 눌러 '/product/${이동할 카테고리}' 경로로 이동하는 방식이다. import { useHistory } from "react-router-dom"; const menuClickHandler = (category) => { history.push(`/product/${category}`); }; history.push로 이동하는 위 함수를 카테고리 메뉴 아이템의 onClickHandler로 지정해두었다. import React, { useEffect } from "react"; import { us.. 이전 1 2 다음
