DEV/javascript
-
Javascript 화면 loading 구현 (화면 로딩 구현)DEV/javascript 2023. 8. 28. 11:03
1. 로딩만 넣는 경우 html javascript const loading = { start: () => { // @로딩 시작 const loading = document.querySelector('#loading'); loading.style.display = 'block'; }, end: () => { // @로딩 종료 const loading = document.querySelector('#loading'); loading.style.display = 'none'; }, } css /* loading */ #loading { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; backgr..
-
Javascript GoogleTranslateWidget에 대해...DEV/javascript 2023. 5. 8. 13:38
무료 버전(구 버전)으로 구글 번역 위젯을 사용할 일이 있었는데 이게 참 골치가 아프다. 사용하면서 몇 가지 요구사항을 쳐내면서 발견한 것을 작성한다. 1. 특정 단어 번역 안하기 번역하지 않을 Element의 class에 "notranslate"을 추가한다. 위젯을 로드하기 전에 class가 등록되어 있어야 한다. 2. 마우스 호버 이벤트 제거 (단어 위에 마우스를 올리면 단어 번역창이 뜨는 것을 제거하는 방법) 무료 버전에서는 사실 제거가 불가해보인다. CSS로 해당 부분을 제거했다. 3. 번역 언어만 사용 특정 언어만 리스트업 하고 싶은 경우 다음과 같이 설정한다. // googleTranslate new google.translate.TranslateElement({ // pageLanguage:..
-
Javascript 웹 페이지의 DOM 변경 사항 감시 및 콜백 지원 (MutationObserver)DEV/javascript 2023. 5. 8. 11:40
MutationObserver 웹 페이지에서 특정 요소의 스타일이 변경되거나, 새로운 요소가 추가되는 등의 DOM 변경이 발생하면, MutationObserver는 이를 감지하고 콜백 함수를 실행 이를 통해, 실시간으로 DOM 변경을 감지하여 이에 대한 처리를 할 수 있음 Sample.js // 감시할 요소 선택 const targetNode = document.getElementById('target'); // MutationObserver 생성 const observer = new MutationObserver((mutationsList, observer) => { for(let mutation of mutationsList) { if (mutation.type === 'childList') { co..
-
Javascript URL 및 QueryString 사용하기DEV/javascript 2023. 5. 8. 11:28
Query string이란 무엇일까? " 웹 페이지의 URL에 추가적인 데이터를 전달하는 방법 중 하나, URL의 끝에 "?" 기호를 사용하고, 그 뒤에 "이름=값" 쌍을 추가하여 사용" 웹에서 간단하게 data를 보관하거나 전달하는 경우 자주 사용되나 사용자에게 직접적으로 노출되는 부분이기 때문에 보안적으로 이슈가 있는 데이터는 사용하지 않는것이 좋다. 그 전에 window.location 객체를 잠깐 살펴보자. [ window.location properties ] hash : 주소값에 붙어있는 anchor값 반환 host : URL의 도메인과 포트 반환 hostname : URL의 도메인 반환 href : URL 반환 origin : 프로토콜 + URL의 도메인 + 포트 pathname : URL ..