코딩이슈2 프로젝트로 느낀 window.location.href와 origin의 차이 프로젝트를 진행하던 중 링크공유 및 카카오 공유하기 기능을 맡게 되었다. 링크 공유하기는 window.location.href를 사용해서 현재 url을 복사하면 된다는 아주 간단한 생각을 했다. href를 사용하면 현재 페이지의 전체 URL을 문자열로 반환하며 웹브라우저의 주소 표시줄에 표시되는 것과 동일한 주소가 나온다. const ShareBtn = () => { const [isToast, setIsToast] = useState(false) const url = window.location.href const shareToFacebook = () => { const sharedLink = encodeURIComponent(url) window.open(`http://www.facebook.com/.. 2024. 1. 30. 01.18 window.innerWidth 페이지에 질문하기 버튼 컴포넌트를 반응형으로 만들게 되면서 궁금했던점 컴포넌트는 재사용 하는 것이 좋으니 useState를 활용한 동적인 변경 or 스타일드 컴포넌트의 media쿼리를 활용해서 만들기를 고민하다 둘다 해보기로 결정! 버튼이 desktop화면일 때는 (1200px이상) 질문 작성하기가 보이기! 모바일 화면( max-width: 767px) 일때는 질문 작성만 보이게 만들기 처음에는 스타일드 컴포넌트로만 만들수 있을 것 같아서 뚝딱뚝딱 해본 결과는 이렇게 잘려서 나왔다. @media (max-width: 767px) { width: 120px; height: 54px; white-space: nowrap; overflow: hidden; } white-space : nowrap 를 통해서 줄.. 2024. 1. 18. 이전 1 다음
