밤토리
728x90
[JS] 페이지 이동 "location.href" 와 "location.replace"의 차이점
Frontend 2024. 8. 2. 21:39

웹 페이지를 개발하다보면 location.href와 location.replace를 혼재하여 쓰는 경우가 있다. 이번 이슈 중 도메인이 서로 다른 팀에서 운영하는 페이지에서 로그아웃 처리 후 닫기 버튼을 누르면 redirect 처리를 해야하는 일이 생겼는데 아래의 내용을 정리해보았다. 둘 다 새로운 페이지 이동에 쓰이지만 사용 용도에 따라 다르게 쓰는것이 좋다. [출처] https://soo-vely-dev.tistory.com/250#--%--location-href%EB%-E%--%-F 특징location.hreflocation.replace브라우저 기록기록에 남음기록에 남지 않음뒤로 가기 지원사용 가능사용 불가, 이전의 이전으로 이동사용 사례일반적인 페이지 이동로그인 후 메인 페이지로 이동 등형태속..

article thumbnail
[ETC] Design mode로 웹 페이지를 편집 해보기
Frontend 2024. 8. 2. 21:07

안녕하세요. 브라우저에서 편집을 바로 할 수 있는 방법을 소개하고자 합니다. 관리자 도구를 열고 콘솔탭에서 디자인모드를 on으로 변경합니다.doucument.designMode = 'on'  디자인모드가 활성화가 되면 하이퍼링크 동작은 수행하지 않지만, 아래처럼 텍스트를 편집할 수 있습니다.몰론 실제 게시글이 변경되는건 아니고 디자인모드를 off로 변경하게되면 정상 복구 됩니다.

article thumbnail
[디버깅] Chrome 안드로이드 내 브라우저 디버깅 하는방법
Frontend 2024. 3. 18. 23:16

안녕하세요. 오늘은 안드로이드 웹 디버깅 하는방법을 공유할까 합니다. 이번 런칭한 웹에서 안드로이드 - 삼성브라우저에서만 발생되는 이슈로 난관에 부딪힌적이 있었습니다. (지금은 해결이 되었고, 저는 아이폰 유저인지만... ^^ 아무튼 해당 이슈는 추후에 공유하겠습니다. ) 이 고통을 덜어내고자, 디바이스의 브라우저별로 웹 테스트 할때 유용한 팁을 공유합니다. - OS : Window - 준비물 : Android 단말기 - 브라우저 : 크롬 1. 안드로이드 단말기기를 PC(usb)에 연결합니다. ( ★ 필수 - usb 디버깅 허용 ★) 2. 주소창에 chrome://inspect/#devices 을 입력하고 접속합니다. 3. usb 디버깅 허용상태라면 아래와 같이 단말기기 정보가 노출되어야 합니다. (노출..

article thumbnail
[JS] 스크롤시 맨 위로 가기 버튼 만들기
Frontend/Javascript 2024. 3. 16. 23:49

안녕하세요. 현생을 사느라 포스팅이 조금 늦었습니다. 요즘 앱이나 웹에서 아래의 이미지와 같이 스크롤을 내리고나서 "위로가기" 버튼 많이 이용하시나요? (혹은 맨 아래로) 오늘은 간단하게 자바스크립트로 "위로가기" 버튼을 만들고자 아래의 코드를 공유합니다. const element = document.documentElement; // 스크롤 이벤트 리스너 window.addEventListener('scroll', () => { const btnStyle = document.getElementById('btn-scroll-to-top').style; // 스크롤을 했을때 100px을 초과하면 보이고 아니면 none 처리 btnStyle.display = element.scrollTop > 100 ? '..

728x90