Link to~로 페이지를 이동할 때에 스크롤의 위치가 전 페이지의 위치 그대로 있어서 해결법을 찾아 봤다. React Router 공식문서에서도 해결법을 소개하고 있는데 Scroll Restoration이라고 부르는가보다 Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet. reactrouter.com ScrollToTop이라는 컴포넌트를 ..

우선 구글 폰트에서 사용하고 싶은 폰트를 찾는다. 둘러보다가 마음에 드는 폰트를 Select this style 로 선택을 하면 장바구니처럼 폰트들이 Selected families에 담긴다. Selected families를 보면 아래쪽에 알아서 내가 선택한 폰트들을 이용할 수 있는 코드를 만들어 놓았기 때문에 폰트가 쓰일 스타일시트에 그대로 복사 붙여넣기를 하면 된다. 리액트 폰트 추가 / 리액트 구글폰트 / 리액트 폰트 적용 / 리액트 구글폰트 추가 / 리액트 구글폰트 적용 / React 폰트 추가 / React 구글폰트 / React 폰트 적용 / React 구글폰트 추가 / React 구글폰트 적용

모달 컴포넌트 내에 추가해 주면 스크롤 방지 document.body.style.overflow = "hidden"; 모달 닫을 때 쓰는 handle 함수에 추가해 주면 스크롤 방지 해제 document.body.style.overflow = "unset"; 참고: https://velog.io/@potter/리액트-모달창-작동시-스크롤-방지 React 모달 스크롤 막기 / CSS scroll lock / 리액트 모달 스크롤 막기 / React 모달창 스크롤 막기 / 모달창 스크롤 막기 / 모달 스크롤 막기 / 리액트 모달창 스크롤 막기

언젠가 모달창을 쓸 일이 있었는데, 그냥 구글링 한 코드 그대로 복붙해서 갖다 썼던 기억이 있다. 이번에는 디자인도 제대로 입혀서 쓰고 싶어서 더 많이 찾아봤는데 대부분 라이브러리를 많이 이용하는 것 같았다. 나는 내가 맡은 구역 이외에도 다른 팀원이 가져다 쓸 수 있도록 템플릿 같은 개념의 ModalFrame을 만들어 놓고 추가적인 속성이나 안에 들어가는 컴포넌트들은 ModalFrame의 children으로 구성하도록 하고 싶었다. 또, 모달 배경을 블러 처리 해야 했고 그 배경을 눌렀을 때 모달이 닫히게 만들고 싶었기 때문에 열심히 찾아보고 만들어보고 하던 중 딱 맞는 블로그 발견. 이 분 블로그를 보고 참고해서 만들었다. _handleModal로 모달이 open/close 되는 토글 함수를 전달해 ..

동아리 홈페이지를 만들던 중 mouse hover 시 프로젝트 명이 포함된 바로가기...? 아무튼 클릭을 유도하는 식으로 이미지가 변하는 걸 구현해야 했다. 이전 프로젝트에서도 비슷하게 hover 때 바뀌는 이미지를 구현했었는데 그때 코드를 참고하려고 봤더니 웬 state까지 동원해서 onMouseEnter, onMouseLeave 이런 걸로 구현을 했었다 (...) 이것도 좋은 방법인지는 모르겠지만 전보단 훨씬 낫기 때문에 ^__^ 처음에는 어차피 그냥 배경이 검은색이니까 이미지에 hover 시 opacity 속성을 주려고 했으나 프로젝트 명도 들어가야 되기 때문에 방향을 틀었다. 그래서 Card 컴포넌트로 CardImage, CardHover를 감싸서 두 개를 겹쳐놓고 CardHover는 보였다 안 ..