공부하자

문제 상황웹과 앱 환경에서 하단바를 다르게 표시해야 했다const BottomNav = () => { return 하단 내비게이션;}; 이걸 어떻게 웹/앱 환경에 따라 다르게 보여줄까?  1. 환경 감지 방법1.1 User-Agent 활용 User-Agent 문자열을 분석하여 앱 환경인지 확인하는 방법이다.iOS나 Android 앱의 웹뷰에서 접속 시 특정 문자열(MyCustomApp)을 추가하도록 설정해 감지한다.const useCheckEnvironment = () => { const [isApp, setIsApp] = useState(false); useEffect(() => { // User-Agent 문자열 가져오기 const userAgent = navigator.userAge..

이거는 사실 css 카테고리인데... 그냥 여기에 씀 문제 상황웹앱 st로 세로가 긴 화면을 개발하는 중에 화면 안의 컴포넌트들이 많아서 화면의 세로 길이를 넘어갈 때 스크롤이 되지 않거나 하단에 고정해둔 다음으로 넘어가는 버튼에 가려지는 문제가 생겼다.이게 내가 개발중인 화면이다.보통의 비율의 핸드폰에서는 평범한 화면이겠지만이제 se같은 극단적인 화면 비율의 상황에서는 이런 상황이 발생한다. 문제 원인다음 버튼을 bottom 스타일을 적용해서 화면의 하단에 footer마냥 위치해둬서 생기는 문제이다.다음 버튼도 그냥 화면의 컴포넌트의 가장 밑에 위치해두고 scroll 여부를 허용하면 금방 해결 될 문제겠지만 나는 다음 버튼을 footer처럼 모든 스크린의 바닥에 위치하게 하고 싶었다. 이유 : 그게 더..