이번 동아리 사이트 개발하면서 모바일뷰는 처음 개발해봤는데, 자꾸 입력 컴포넌트 (input, textarea)를 터치했을 때 화면이 마음대로 확대가 돼서 막는 방법을 찾아 봤다. 생각보다 간단... index.html의 메타 태그에 user-scalable=no를 추가해서 아래처럼 수정해주면 문제가 해결된다. 모바일에서 input 컴포넌트 클릭 시 자동으로 화면이 확대될 경우 해결 방법 / 모바일에서 입력창(input) 눌렀을 때 확대되는 효과 없애기 / 모바일 웹에서 화면이 확대/축소되지 않도록 설정하기 / 모바일웹 사용자 확대 축소 제어 / 아이폰 input, select 확대 기능 없애기

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 되는 토글 함수를 전달해 ..