UI/UX

음식점에서 세부 메뉴를 선택할 때 깔끔한 UI를 위해 모달을 이용해 구현해 봤습니다.메뉴 컴포넌트Modal 컴포넌트Modal을 제외한 나머지 어둡게 처리할 컴포넌트먼저 메뉴 리스트 중, 하나의 메뉴를 클릭하면 Modal 창이 나오도록 Menu 컴포넌트를 구성했습니다.u

아이템들을 행으로 나열하고 설정해놓은 width를 넘어갈 때 overflow-x: scroll로 스크롤을 만들어 보일 수 있게 구현했습니다. 이때 스크롤 바를 움직이는 게 아닌 모바일 환경에서 옆으로 밀어서 이동하는 것처럼 마우스 드래그로 구현해봤습니다.Categori

페이지 이동 시 이전 페이지의 스크롤 값이 변하지 않아 다음 페이지에도 스크롤이 내려가있는 문제를 해결했습니다.react-router의 useLocation hookuseLocation hook을 사용하면 location 객체에 접근할 수 있습니다.pathname과 w

SPA에서 자주 사용하는 Infinity Scroll을 IntersectionObserver로 구현한 과정입니다.Infinity Scroll은 페이지를 클릭하면 다음 페이지 주소로 이동하는 pagination과 달리 말 그대로 무한하게 데이터의 끝까지 스크롤이 가능하게

브라우저의 뒤로가기, 앞으로가기 버튼 이벤트 감지를 정리한 글입니다.React router에서 파라미터로 페이지를 구분하는 경우, 브라우저의 뒤로가기 버튼을 눌렀을 때 파라미터에 반응하여 페이지가 이동하는 경우가 있습니다.예를 들어 위와 같이 array 원소들의 id를

React rotuer의 Redirect를 이용해 로그인 인증 시 로그인 페이지를 불렀던 페이지로 돌아가도록 구현했습니다.Redirect의 속성 중 이동할 url을 적는 to 속성과 state를 담는 state 속성이 있습니다. 이 state에 현재 url 정보를 담아

잘못된 경로로 접속한 경우 보여줄 404 Error Page 작성법입니다.잘못된 경로로 접속한 경우 라우팅 처리를 합니다. react-router-dom의 switch 문을 이용해 에러 페이지 라우팅 처리를 할 수 있습니다.switch는 마치 if 문과같이 동작해 맞는