NOMO.asia
UserScript 로 click 이벤트를 수정 및 삭제(hijacking) 하기
개발/UserScript 2019. 8. 30. 04:26

이 글은 UserScript 환경에서 JavaScript 를 이용해 이벤트의 동작을 수정 및 삭제(hijacking) 하는 과정을 정리한 글이다. 꼭 UserScript 뿐만이 아니라 웹사이트의 동작을 바꾸는 브라우저 확장기능을 JavaScript 기반으로 개발한다면 모두 사용할 수 있는 방법이다. 예제어떤 웹 채팅 시스템이 있다. 이 채팅 시스템은 다른 사용자가 올린 링크를 클릭할 때 아래와 같은 확인 창을 띄운다.문제는 이것이 링크의 안전성 여부를 직접 확인해주는 것도 아니고, 최초 1회만 물어보는 것도 아니면서 매번 링크를 클릭할 때마다 단순히 물어보기만 하기 떄문에 결국 사용자를 귀찮게만 만드는 쓸모없는 절차라는 점이다.그래서 나는 브라우저 확장 기능의 일종인 UserScript 로 이러한 동작,..

VIEW POST
visibilitychange 이벤트를 무력화하기 위한 방법들
개발/UserScript 2019. 8. 26. 02:32

Twitch, Youtube 같은 웹사이트는 사용자가 웹페이지를 최소화 했거나 다른 탭을 보고있는지를 체크한 후 재생 중인 동영상의 화질을 낮추거나, 화면은 내보내지 않고 음성만 재생하거나, 자동 재생이 되지 않도록 막아 데이터 전송량을 줄이는 동작을 한다. 이 때 사용자가 웹페이지를 보고있는지를 확인하기 위한 것이 바로 visibilitychange 이벤트 (https://developer.mozilla.org/ko/docs/Web/API/Page_Visibility_API)이다. 이 이벤트에 리스너로 등록된 함수는 웹페이지의 visibility 상태가 변하면, 즉 사용자가 탭을 다른 탭으로 변경하거나 원래 탭으로 복귀하는 등의 행동을 취하면 실행되게 된다. 따라서 웹사이트의 관리자가 앞서 설명한 경우..

VIEW POST
Javascript 로 Twitch API 접근하여 Stream 정보 얻기 - v3 과 v5 버전의 차이
개발/JavaScript 2019. 8. 12. 11:04

이전에 [Javascript 로 Twitch API 접근하여 Stream 정보 얻기] 라는 글을 포스팅한 적이 있었는데 당시 Twitch API v3 을 이용하며 적은 것이었다.최근 한 통의 메일을 받았는데, 이 메일에는 Twitch API 의 버전이 v3 에서 v5 로 변경되어서(사실 바뀐지는 꽤 되었다) 구버전인 v3 은 더 이상 지원하지 않을 예정이라 몇 가지를 수정해주어야 한다는 내용이 담겨있었다. 다음의 링크로 가면 이에 대한 내용을 볼 수 있다. [v3 to v5 Migration Guide - Twitch Developers] Twitch API v5 의 변경점 - Login name 대신 User ID 를 사용해야 함 대표적인 변경점으로, v5 에서는 Live stream 의 정보를 가져올..

VIEW POST
물리 기반(physics based) 이란 표현은 대체 뭘까?
엔지니어링 2019. 8. 8. 16:20

나는 최근 취미로 Chrono Engine 이라는 오픈소스 시뮬레이션 툴에 대해 공부하고 있는데, 이 툴의 소개글 중 physics-based modelling and simulation 이라는 설명이 있었다. 우리나라 말로 다시 적으면 물리 기반 모델링 및 시뮬레이션 정도가 되겠다. 내가 의아했던 부분은 이 툴이 시뮬레이션 툴로 사용되고 있음에도 굳이 "물리 기반"이라는 표현을 썼다는 것이다. 시뮬레이션 툴이라면 당연히 물리 기반이어야 하는것이 아닌가? 만약 이 툴이 그래픽 작업을 위한 툴이라면 물리 기반이라는 단어를 씀으로써 이 툴이 물리 수식을 기반으로 한다는 것을 강조할 수 있었을텐데 왜 그것도 아니면서 물리 기반이라는 표현을 썼을까? 그러니까 내 의문은, 물론 이런 표현을 써도 상관은 없겠지만 ..

VIEW POST
스팀 게임 Visitor 2 (방문자 2) 공략 (스포)
게임 2019. 8. 1. 22:25

# 이전 편인 방문자1 에 대한 공략은 [이곳을 클릭]2018년 출시되었던 실사 기반 추리 게임 방문자(Visitor) 의 후속작, 방문자2가 출시되었다. https://store.steampowered.com/app/1065200/Visitor2__2/ Visitor 2 에 대한 간단평 이 게임이 전작보다 확실히 더 좋아진 부분은 이쁜 등장인물이 추가되었다는 것이다! 모사 역을 맡은 배우가 참 이쁘다. 가잼비가 뛰어나다는 점도 여전히 장점. 단점으로는 게임이 친절하지 않다는 것. 이전작도 마찬가지였지만 이번작의 한글 번역 상태가 더 나빠서 이해하기가 더 어려웠고 몰입도 방해됐다. 하지만 높은 난이도가 꼭 번역의 문제라고 하기에는 중국어를 하는 현지인도 어려운 몇몇 단계를 못푸는 것은 마찬가지였다. 이번..

VIEW POST
듀얼 모니터로 휴먼폴플랫 로컬 멀티하기 (NVIDIA 기준)
게임 2019. 8. 1. 12:42

얼마 전 조카가 우리집에 놀러와서 같이 게임하려고 로컬 멀티가 되는 PC게임을 찾다가 휴먼폴플랫(Human Fall Flat)이 로컬 멀티가 된다는 것을 알았다. 그래서 게임을 바로 구매한다음 조카와 같이 로컬 멀티로 즐겼는데, 한 모니터에서 화면이 절반으로 나뉘는 방식으로 로컬멀티를 이용할 수 있었다.그런데 나는 듀얼 모니터를 쓰기 때문에 모니터 하나로만 이 게임을 즐긴다는 것이 너무 아쉬워서, 듀얼 모니터로 로컬 멀티가 가능한 방법을 찾아놨다가 조카들이 다시 놀러왔을 때 적용해서 써먹을 수 있었다. 아래에서는 이 방법을 정리해보았다.NVIDIA 의 Surround 기능 활성화하여 휴먼폴플랫 로컬멀티를 듀얼모니터로 즐기기 출처: https://steamcommunity.com/sharedfiles/fi..

VIEW POST
SONY 블루투스 이어폰 WI-SP500 이어팁 주문하기
정보 2019. 7. 26. 16:14

나는 소니에서 나온 스포츠 인이어 블루투스 이어폰 WI-SP500 을 1년 전쯤 선물받아 지금까지 사용해오고 있다. 이 제품은 운동을 할 때 외부 소리를 들으면서 음악을 들을 수 있게 만들어진 것인데, 이러한 점을 고려하면 생활 방수, 음질, 디자인, 배터리 연결 시간 등이 모두 무난한 괜찮은 제품이라고 생각된다. 그런데 이 제품의 한 가지 아쉬운 점을 꼽자면 이어폰 팁이 쉽게 빠진다는 점이다. 주머니에서 꺼낼 때나 주머니 안에서 스칠 때 이어폰 팁이 본체에서 쉽게 분리된다. 목에 걸고다니면서 흔들리다가 이어팁이 빠지는 경우도 있다. 빠진 이어폰 팁이 운 좋게 주머니 안에 남아있을 때도 있지만 그렇지 않은 경우도 있다보니, 결국 1년이 지난 지금은 딱 한 개의 이어폰 팁만이 남았다. 이렇게 쉽게 이어폰팁..

VIEW POST
플로(FLO) 뮤직 PC 웹에 어두운 모드 기능을 추가하는 Userscript
개발/UserScript 2019. 7. 15. 00:13

최근 플로(FLO) 뮤직(https://www.music-flo.com/) 이라는 음원 스트리밍 사이트를 알게되었다. 마침 휴대폰 통신사가 SKT 인 사용자에게 6개월 간 50% 할인을 제공하는 이벤트를 진행 중이길래 결제하여 이용하게 되었다. 스마트폰의 경우에는 전용 어플을 이용하면 되고, PC의 경우 별도의 클라이언트 설치 없이 웹으로 접속해 이용하면 된다. 그런데 웹으로 이용할 때의 배경이 하얀색이다보니 늦은 밤이나 새벽에 작업할 때는 너무 밝아서 눈이 부셨다. 그래서 어두운 모드 기능을 추가하는 Userscript(사용자 확장 기능)를 만들었다. FLO 뮤직 PC 웹에 어두운 모드 기능을 추가하는 Userscript 유저스크립트를 설치 후 새로고침 하면 자동으로 어두운 모드가 활성화된다. 이 스크..

VIEW POST
VMware 시간 동기화 해제 & 초기 윈도우 설치 시간 지정
정보 2019. 7. 12. 22:27

가상 PC 환경을 구축하기 위한 VMware 는 개발 중인 프로그램의 테스트 환경으로의 역할로도 유용하게 사용된다. 만약 어떠한 소프트웨어를 개발할 때 Windows 의 설치 시점과 현재 Windows 시간의 관계에 따라 프로그램 구동을 다르게 하고싶다면, 이 기능의 테스트를 위해 Windows 설치 일자를 조정해야 테스트가 가능할 것이다.VMware 를 사용하지 않는 경우에는 메인보드 BIOS 설정에서 시간을 원하는 시간으로 설정하고 인터넷 연결을 끊은 채로 Windows 를 설치하면 될 것이다. 다만 매번 이런 과정을 진행하는 것은 매우 수고로우므로, VMware 로 가상 머신을 만들어 복사 & 보관해놓으면 편하게 테스트가 가능할 것이다. 아래에서는 VMware 에서 시간 동기화를 해제하고, 초기 윈..

VIEW POST
Userscript 를 Webpack 을 이용하여 개발하기
개발/UserScript 2019. 7. 3. 20:41

발단 내가 작성하고 있는 어느 한 유저스크립트는 처음 30줄 정도의 코드로 시작했다. 그리고 2년이 지난 지금은 1만줄이 넘는 꽤 커다란 크기를 가지게 되었다. 이렇게 파일이 커지게 된 것은 동적으로 요소(element)를 생성하기 위한 html 과 css 등이 꽤 많은 부분을 차지하고 있다는 이유도 있지만, cdn 등에서 불러오는 몇가지 라이브러리를 제외하고는 대부분의 내용을 한 파일에 포함해야 하다보니 부피가 많이 커진 것이 원인이다.이렇게 라인 수가 커짐에 따라 생긴 가장 큰 문제는 유지보수이다. 함수와 이벤트가 너무 많아서 내가 사용하는 코드 에디터의 책갈피 기능을 이용하더라도 어디가 어딘지 찾기 어렵고, 필요한 부분을 찾기 위해 매번 검색 기능을 이용해야했다. 어떤 웹사이트를 탐색할 때 효율성을..

VIEW POST