석봉노트 석봉노트

전체 글

• Javascript GoogleTranslateWidget에 대해...

  DEV/javascript 2023. 5. 8. 13:38

  무료 버전(구 버전)으로 구글 번역 위젯을 사용할 일이 있었는데 이게 참 골치가 아프다. 사용하면서 몇 가지 요구사항을 쳐내면서 발견한 것을 작성한다. 1. 특정 단어 번역 안하기 번역하지 않을 Element의 class에 "notranslate"을 추가한다. 위젯을 로드하기 전에 class가 등록되어 있어야 한다. 2. 마우스 호버 이벤트 제거 (단어 위에 마우스를 올리면 단어 번역창이 뜨는 것을 제거하는 방법) 무료 버전에서는 사실 제거가 불가해보인다. CSS로 해당 부분을 제거했다. 3. 번역 언어만 사용 특정 언어만 리스트업 하고 싶은 경우 다음과 같이 설정한다. // googleTranslate new google.translate.TranslateElement({ // pageLanguage:..

  Read More
• 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..

  Read More
• 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 ..

  Read More
• Flutter/Flame 2D Game의 Background Image 등록하기

  DEV/flutter (dart) 2023. 3. 10. 14:32

  본 편은 하단 글을 기반으로 합니다. (사실상 후속 보너스편) 처음 보시는 분은 이해가 되지 않는다면 1편을 보고오십셔. (기존 코드를 기반으로 합니다. 보고오시는걸 추천) https://seokbong.tistory.com/186 Flutter/Flame 2D X, Y축 이동이 가능한 2D 게임 만들기 예시 (Example of creating a 2D game with movable X and Y axes 1. 시작 저번 시간에 Flutter를 이용하여 2D 횡스크롤 (X 축만 이동) 게임의 기본 기능을 구현해 보았다. (좌, 우 이동 및 점프 기능 구현) https://seokbong.tistory.com/184 Flutter/Flame 2D 횡 스크롤 게임 만들기 seokbong.tistory.c..

  Read More
• Flutter/Flame 2D X, Y축 이동이 가능한 2D 게임 만들기 예시 (Example of creating a 2D game with movable X and Y axes)

  DEV/flutter (dart) 2023. 3. 9. 18:27

  1. 시작 저번 시간에 Flutter를 이용하여 2D 횡스크롤 (X 축만 이동) 게임의 기본 기능을 구현해 보았다. (좌, 우 이동 및 점프 기능 구현) https://seokbong.tistory.com/184 Flutter/Flame 2D 횡 스크롤 게임 만들기 예시 1 (Flutter/Flame 2D Horizontal Scroll Game Example 1) 1. 시작 Flutter를 시작하면서 게임을 만들어 보고 싶었다. (사실 바닐라JS로 하려고 했었는데... Flutter 시작한 김에 만들어 보려고 한다.) 프로젝트 이전에 Flame와 친해질 필요가 있었고 (당장 Flutter seokbong.tistory.com https://seokbong.tistory.com/185 Flutter/Fl..

  Read More