react (3) 썸네일형 리스트형 [React Router] 리액트 라우터의 URL 파라미터 사용 시 404 오류 해결 방법 (React Router v5, webpack과 함께 사용할 경우 publicPath설정) 문제 상황 상품 리스트 페이지 개발 중, 카테고리번호 별로 다른 상품리스트를 렌더링 하기 위해 리액트 라우터의 URL 파라미터를 사용했는데 같은 방식으로 파라미터를 사용하던 다른 프로젝트에선 볼 수 없었던 아래와 같은 404 오류가 떴다. /categories 까지는 오류 없이 페이지가 잘 나타났지만 /categories 뒤에 '/'와 함께 파라미터를 붙이거나 '/'만 붙여도 해당 오류가 발생했다 해결 방법 이전 프로젝트들에서는 마주친 적 없던 오류였고, 공식문서를 봐도 리액트 라우터의 URL 파라미터 사용법엔 문제가 없었기 때문에 프로젝트 자체의 환경설정 부분이 잘못되었을 확률이 높았다. 관련 키워드로 열심히 검색해본 결과 웹팩에서 사용하는 HtmlWebpackPlugin에 publicPath가 설정되.. [React] useRef로 transition이 동적으로 적용되지 않는 문제 해결 추천 책 리스트를 보여주는 무한 캐러셀을 만들던 중 transition 관련 문제가 발생했다. 설명을 위해 필요한 대략적인 컴포넌트 구조는 아래와 같다. const BookCarousel = () => { return ( ... ) }; export default BookCarousel; BookCarousel에서 무한 캐러셀을 구현하기 위해 마지막 페이지에서 index값을 변경시켜주는데, 이 때는 transiton 효과를 없애야 유저에게 무한으로 캐러셀이 넘어가는 느낌을 준다. (자세한 무한 캐러셀 구현 방식은 나중에 포스팅할 예정이다) BookImageList가 이동하면서 그 하위에 있는 Cover 컴포넌트의 scale사이즈도 변경되는데 여기에도 transition을 적용시켜놓았기 때문에 BookIm.. [React] React 리액트 Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state. 에러 해결 const logOutButtonClickHandler = () => { localStorage.removeItem('jwt'); localStorage.removeItem('registerState'); location.reload(); }; react_devtools_backend.js:2273 Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state. → 로그아웃 이후 로그인 화면으로 돌아왔을 때 위와 같은 오류가 발생했다. 처음엔 화면이 전부 렌더되지 않았을 때 사용자가 시작하기 버튼 클릭 시 위와같.. 이전 1 다음