#responsive

테일윈드 + react 사용 중인데 반응형을 어떻게 구현하면 좋을까요?

안녕하세요 ! 테일윈드 + react로 간단한 투두프로젝트 진행 중인데 반응형을 구현하던 도중 궁금한 점이 생겨서 질문드립니다. 최대 뷰포트 480 이하부터만 특정 컴포넌트(시계, 제목)는 안보이게 하고 기존의 투두리스트 입력할 input, 투두리스트 ul 목록들, 날짜만 보이도록 구현하고 싶은 상황입니다. 480 이상일 때는 위의 말한 컴포넌트들이 모두 보이는 상황입니다! 테일윈드 반응형을 하게 되면 특정 뷰포트일 때만 아예 안보이도록도 구현할 수 있나요? 가능하다면 특정 컴포넌트는 안보여야 하다보니 기존에 구현에 놓은 ui가 안깨지고도 가능한건지, 아니면 직접 재설정 해줘야하는건지도 궁금합니다! 테일윈드 반응형에 익숙치 않아서 어렵네요 ㅠㅠ 위와 같은 고민으로 다른 방법을 찾다보니 useMediaQuery 가 있어서 설치해보고 사용중인데 테일윈드의 단점인 클래스명 길어지는 것, 일일히 태그마다 지정해서 사용해줘야한다는 것을 해결해 줄 수 있을 것 같았는데 특정 컴포넌트가 아예 안보이게 하다보니 조건부렌더링으로 해서 코드가 길어지고, 480 이하 일때 안보이기는 하나 ui가 모두 다 깨져서 결국엔 다시 테일윈드로 레이아웃을 맞춰주게 되더라구요.. 코드로 예를 들자면 import { useMediaQuery } from 'react-responsive'; function TodoHead() { const isSmallScreen = useMediaQuery({ query: '(max-width: 480px)', }); return ( !isSmallScreen && ( <div> <h1 className="mt-[100px] text-center text-6xl font-bold text-white"> Todo List </h1> </div> ) ); } export default TodoHead; 이와 같이 짜둔 상황인데 480 이하일 때는 의도대로 제목이 안보이기는 하나, 해당 컴포넌트가 사라지면서 모든 ui가 깨지니까 결국엔 다시 레이아웃을 조정해야하는 상황인거죠 ㅠㅠ 테일윈드 단점을 해결하고자 쓴건데 좋은 방법이 아닌 것 같기도하고.. 사실 초보라서 사용하던 테일윈드를 활용해서 해결 가능한건지, useMediaQuery 이게 좋은 방법인지도 아닌지도, 아님 굳이 사용할 필요가 없는건지.. 잘 판단이 안서는 상황이네요..ㅎㅎ 도와주세요 선배님들의 조언이 필요합니다 !!

모바일에서 레이아웃을 풀스크린으로 채우고 싶은데 자꾸 스크롤 바가 생깁니다.

안녕하세요! 화면 정가운데에 로그인폼을 넣으려 하고 있는데요, flex container를 만들고 사이즈는 width: 100vw; height: 100vh를 줘서 꽉 차게 만들었고요, justify-items: center; align-items: center; 로 폼을 가운데 정렬해줬습니다. 개발자 도구에서 responsive 로 봤을 때 화면 사이즈에 상관 없이 항상 중앙에 오는 것을 확인 했는데요.. 실제 기기에 띄워 보니 스크롤 바가 생기고 있습니다 ㅠㅠ 스크롤 바가 왜 생기는지 알려주실 선생님 계실까요?

웹 개발 반응형 테스트할 때 에뮬레이터도 사용해야할까요?

안녕하세요, 리엑트로 웹 개발을하고 있습니다. 1인 개발을 통해서 수익까지 창출하려고 하는데 서비스 특성상 모바일 접속이 많을 것 같아서 반응형에 신경을 많이 쓰려고해요. 현업에서는 웹 반응형 구현할 때 어떤 방법으로 테스트하는지 궁금합니다. 개발자 도구 통해서 responsive 조정해가면서 개발하고 있긴한데, 시뮬이나 에뮬레이터 실제로 켜보고 웹 접속해서 해봐야하는지 궁금하네요. 보통 어떻게 하시나요?

React-responsive 훅 관련

안녕하세요 리액트를 통해서 미니 프로젝트를 하나 만들고 있습니다! 반응형으로 만들기 위해서 react-responsive 를 설치한 다음 mediaquery 태그로 감싸고 최소 너비를 지정해 주었습니다. 대부분은 반응형으로 작동하지만 일부 요소들은 적용이 되지 않고 독립적으로 작동하는 것 같은데 이런 경우가 있나요..?