Honsal's Dailylife

슬래시나 아포스트로피가 파이어폭스 검색 바를 열지 않도록 설정하는 방법 슬래시(/) 키 요즘 들어 부쩍 개발 문서 페이지를 자주 보게 되면서 슬래시 키를 누르는 횟수가 늘어났다. 리액트 문서 나 Next.js 문서 , 혹은 내가 직접 운영중인 깃랩, 또는 깃헙 등등 여러 사이트의 여러 문서/소스 코드를 어느 때보다 많이 접하게 되었다. 그러다보니 슬래시 키 역시 비례하여 많이 누르게 된다. 코드에 주석을 달 때 외엔 누를 일이 그리 많지 않은 키였는데 언제부터인지 이런 메이저 사이트들이 슬래시 키에 검색 기능을 바인드 하기 시작하면서 번거롭게 마우스로 검색 박스를 클릭하지 않고, 키보드에서 손이 떨어질 일 없이 슬래시 키를 눌러 검색 기능을 호출한 뒤 검색하고 그 결과에서 페이지 업/다운 및 Ctrl + F 또는 F3 으로 브라우저 검색 기능을 통해 원하는 내용을 찾는 과정이 반복되고 있다. 크롬과 파이어폭스 문제는 파이어폭스로 넘어오며 발생했다. 크롬은 슬래시 키를 눌러도 아무 일이 일어나지 않는다. 때문에 위와 같이 슬래시 키를 사용하는 사이트에 접속해서 로드가 완료되기 전에 슬래시 키를 눌러도 아무 일도 일어나지 않게 된다. 그러나 파이어폭스는 기본적으로 슬래시 키에 퀵서치 기능이 바인드 되어 있다. 그리고 해결 방법을 찾으면서 알게 된 바로는 아포스트로피( ' ) 키 역시 바인드 되어 있다. 이를 해제할 때 접근성 그룹에 속해있는 것을 보면 Ctrl + F 또는 F3 과 같이 두 개 이상의 키를 조합해 누르거나 일반적인 타이핑 범위보다 멀리 떨어진 기능 키를 눌러야 하는 상황 1 을 고려해 넣어놓은 기능인 것 같은데, 나에겐 불필요한 기능이다. 왜냐하면 슬래시 키가 바인드되어 있는 사이트라도, 해당 사이트가 로딩되기 전에 누르면 브라우저 퀵서치 바가 나타나기 때문 이다. 이러면 다음과 같이 불필요한 작업이 추가된다. 사이트에 접속 슬래시를 누름 사이트 로딩이 되지 않아 슬래시가 바인드...

Chrome DevTools Network 탭의 엄청난 렉 확장 프로그램 개발하랴 웹 사이트 개발하랴 API 테스트하랴 올해들어 크롬이 가장 바쁘게 일하고 있다. 당연히 DevTools도 재보지는 않았지만 한 시간에 수백번은 열고 닫는 것 같은데 사실 이렇게 많이 열고 닫을 일은 아니다. 한 번 열어놓고 앵간하면 닫을 일이 없으니까… 하다 못해 외부 사이트에서 열더라도 닫는 건 내가 닫을 일이 없다. 탭을 닫으면 닫히니까. 그럼 왜 이렇게 많이 닫게 됐나? Network 탭의 미친듯한 렉 그 이유는 바로 Network 탭의 미친듯한 렉에 있다. 어느 버전부터 이런 증상이 생긴 것인지는 모르겠지만, 요청이 100개 정도 쌓이면 도저히 사용할 수 없을 정도의 버벅임이 발생한다. 문제는 Network 탭에서만 발생 한다는 것이다. 콘솔에 수백만 줄이 올라가도, 수천 줄짜리 소스를 리포맷해도 이런 문제는 발생하지 않는다. 1 원인 파악 비슷한 사례가 없나 구글링을 해보니 넘쳐나고 있었다. 그 중 한 글에서는 chrome://flags 에서 Force color profile 을 sRGB 로 바꿔보라는 내용도 있었는데, 댓글을 보면 효과를 본 사람이 있는 것 같았지만 일단 나는 아니었다. 그 밑에는 확장 프로그램 관련 문제일 수 있으니 React Developer Tools, Firebug, Omnibug, ... 등을 비활성화 해보라고 하길래 아예 devtools 기능이 있는 모든 확장프로그램을 비활성화 했다가, 전부 다 비활성화 했다가, 별 지랄을 다 해봤으나 증상은 동일했다. 시간은 흘러가고, 일단 파이어폭스로 작업을 하다가 문득 생각이 들었다. 이게 정말 크롬 업데이트 이후로 생긴 문제일까? 결론부터 말하자면, 반은 맞고 반은 틀렸다. Overview 기능 왜 반만 맞고 반만 틀리냐면, 언젠가 업데이트 된 기능 때문이긴 하니까. 문제는 얼마나 오래전에 추가된 기능인지 알 수가 없다. 즉, 얼마 전에 업데이...

모바일 환경에서는 이메일 관련 앱 [1] 을 설치하고 설정하면 이메일을 수신했을 때 푸시 알림이 옵니다. 데스크톱에도 이메일을 위한 프로그램 [2] 이 다양하게 존재하지만 저를 포함한 어떤 유저는 그런 프로그램을 사용하기 싫어하기도 합니다. 데스크톱 푸시 알림 언제부터인지 기억은 안 나지만 메이저 브라우저들이 데스크톱 푸시 알림 기능을 지원하기 시작했습니다. 페이스북이나 트위터 등에 설정이 초기화된 브라우저로 접속하면 알림을 허용할지 묻는 메세지 가 나오는데, 바로 이 메세지가 데스크톱 푸시 알림 기능과 연관되어 있습니다. 알림을 허용하면, 그 때부터는 해당 사이트에서 뭔가 알릴 거리가 있을 때 마치 모바일 앱의 알림마냥 Windows 알림 센터, 혹은 그에 준하는 기능에 알림이 도착하게 됩니다. 지메일 푸시 알림 지메일도 이러한 푸시 알림을 지원합니다. 예전에는 브라우저를 켰을 때 일정 주기마다 이메일을 확인하기 위해 WebmailNotifier [3] 등의 확장 프로그램을 사용했었는데 이제는 지메일이나 이러한 푸시 서비스를 지원하는 메일 서비스에 한해 그럴 필요가 없다는 얘기죠. 이제부터 이 데스크톱 푸시 기능을 활성화하는 방법에 대해 알려드리겠습니다. 우선 위 이미지에 표시된 아이콘을 눌러 지메일 설정 패널을 여세요. 일반적으로 우측 상단에 있습니다. 이후 모든 설정 보기 버튼을 눌러주세요. 기본설정 탭의 데스크톱 알림 섹션까지 스크롤한 뒤, 월하는 메일 알림 형식을 선택하고 Gmail에서 바탕화면 알림을 사용하려면 여기를 클릭하세요 링크를 클릭하세요. [4] 그럼 구글에서 알림 표시 권한을 요청한다는 다이얼로그가 나타나게 됩니다. 허용을 누르세요. 이제 다 됐습니다. 앞으로는 지메일에 도착하는 이메일들이 데스크탑 알림으로 도착하게 됩니다. 지메일, 이메일, ... ↩︎ 아웃룩, Windows 10의 메일 앱, ... ↩︎ 현 X-Notifier ↩︎ 이 링크는 이미 이전에 지메일 알림을 수락한 ...

  바로 전에 탬퍼몽키 포스트 를 올렸습니다. 바로 이 글을 위해서죠. 우선 해당 포스트에서 탬퍼몽키 확장 도구를 설치한 뒤 읽어주시기 바랍니다.   이 포스트는 크롬 또는 파이어폭스 의 Tampermonkey  애드온/확장 도구가 설치돼 있어야 사용 가능합니다.   또한, 이 포스트는 크롬 기준으로 작성됨을 알립니다. 쓰잘데기 없이 짜증만 나는 우클릭 방지 알림   옥션에서 상품 페이지를 둘러보다 우클릭을 하면, 쓰잘데기 없이 뜨는 짜증나는 알림이 있습니다.   바로 위와 같은 알림이죠. 저는 우클릭 드래그 제스쳐로 여러 기능(페이지 앞으로, 뒤로, 새로고침, 다음 탭, 이전 탭, 탭 닫기 등등)을 사용하는 사람인데 우클릭 할 때마다 저 알림이 뜨니 정말 짜증이 났습니다.   심지어, 상품 상세설명은 우클릭을 막는다고 막아지지도 않습니다. 크롬이나 IE나 파이어폭스나 오페라나 사파리나 그 어떤 브라우저든지 개발자 도구를 열고 해당 HTML 엘리먼트로 이동한 뒤 내부 내용을 복사하면 되거든요. 뭐 이것 말고도 방법은 많지만, 가장 간단한 방법이 위와 같습니다. 한 마디로 저 알림은 사용자를 짜증나게 하는 보여주기식 알림창 일 뿐이죠. 알림을 없애기 위한 검색, 그러나   짜증이 난 저는 처음엔 페이지마다 window.oncontextmenu 프로퍼티를 수정해 알림을 없애고 돌아다녔지만, 그것도 한두번이지 너무 귀찮더라고요. 그래서 혹시 이미 나와있는 우클릭 방지 해제 스크립트가 있나 찾아보고 설치했지만, 작동을 하지 않더라고요.   그렇다고 확장 도구를 하나 설치하자니 이미 깔린 게 많아서 뭔가 거부반응이 일어나고... 그래서 그냥 Tampermonkey 스크립트를 직접 하나 만들었습니다. 옥션 우클릭 방지 알림 해제 스크립트   포스트 맨 위에서 다들 Tampermonkey는 설치하셨나요? 이 스크립트를 사용하기 위해...

Tampermonkey   Tampermonkey, 탬퍼몽키? 이름만 들어서는 뭐 하는 확장 프로그램인지 감이 안 오실 겁니다. 직역하면 쓸데없이 참견해대는 원숭이 정도가 되겠네요. 어찌 보면 딱 알맞는 이름일지도 모릅니다. 현재 페이지에 커스텀 자바스크립트를 실행해주는 확장 도구   이유는 탬퍼몽키를 사용하면 특정 사이트, 혹은 사이트의 특정 페이지에 원하는 자바스크립트를 실행시킬 수 있기 때문입니다. 예를 들어서, 쇼핑몰 사이트의 정말 쓰잘데기 없는 우클릭 방지 스크립트를 비활성화시키는 행위 등을 말이죠.   한 번 옥션을 예로 들어볼까요? 옥션 상품 페이지에서 우클릭을 하면 알림창이 뜹니다. 상품 상세설명 무단도용 방지를 위해 우클릭을 비활성화했다는 정말 쓰잘데기 없는 알림이죠. 하지만 탬퍼몽키에 해당 사이트의 우클릭 방지 기능을 비활성화하는 스크립트를 넣어두면, 몇 번을 열고 몇 번을 새로고침해도 다시는 우클릭에 대한 알림이 뜨지 않게 됩니다. 다양한 활용   요즘은 크롬, 파이어폭스 모두 다양한 확장 도구가 나와있습니다. 정말 다양하죠. 하지만 그럼에도 불구하고 자신에게 딱 맞는 확장 도구를 찾기란 쉽지 않습니다. 예를 들어서, 구글 검색 결과 우측에 '제목 복사' 버튼이 생겨서 클릭하면 클립보드에 해당 제목이 복사되는 기능 등, 사용자마다 원하는 기능은 다른데 확장 도구는 그렇게 다양한 사용자 환경까지 고려하지는 않죠.   하지만 Tampermonkey 확장 도구와 자바스크립트 지식이 있다면 웹 페이지 안에서  가능한 모든 기능을 제작해 사용할 수 있습니다. 방금 위에 말씀드린 제목 복사 뿐 아니라, 깊게 들어가면 구글 검색 결과 페이지의 배경을 바꾼다던가, 애니메이션 처리를 하는 등 디자인적인 변경은 물론 네이버 검색 결과 페이지에서 쓸데없는 부분을 없애고 구글과 같이 심플하게 만들어린 뒤 '이 제목을 구글로 검색'과 같은 버튼을 다는 것도 가능하죠. 뭐든지 ...

  방금 개발하면서 겪은 현상인데, localhost 도메인 상에서는 console.log, console.debug, console.error, alert 등 프롬프트 관련 기능이 전부 작동을 안 하는 현상 이 생겼습니다. 웃긴 건, 크롬의 캐시를 지우거나, 컴퓨터를 껐다 키거나 하면 다시 된다는 것 이죠. 물론 한두 시간 정도 켜놓다 보면 또 시작...   이게 정신줄 놓게 만드는 게, localhost가 아닌 방법으로 접속하면 정상 작동 한다는 겁니다. 제 도메인인 honsal.dynu.com, 127.0.0.1 등으로 접속하면 문제없이 프롬프트가 실행됐습니다.   결론부터 말하자면 제 경우 원인은 AdBlock 이었습니다. 왠진 모르겠지만, 애드블럭 차단 사이트에서 localhost를 제외시키면 프롬프트가 정상적으로 작동 되더군요. 전엔 없던 증상인데, 참 어이가 없네요 허허...   아무튼 애드블록을 사용중이신 분이라면 한 번 체크해 보시기 바랍니다. 특히 저와 같이 localhost 만 됐다 안 됐다 하는 상황이라면 해결될 것이라고 생각되네요.   다들 즐코하시길. 2017. 04. 07. 추가   AdBlock 적용 후에도 문제가 지속돼 방법을 알아보다가 개발자용 도구에서 해답을 찾았습니다. [확실한 방법] 개발자용 도구 새로고침 사용   크롬에서 F12 를 누르면 개발자 콘솔이 뜨는 건 다들 알고 계시죠? 그렇게 개발자용 도구를 띄운 상태에서 새로고침 버튼 꾹 누르고 있거나 우클릭하면 메뉴가 뜹니다. 개발자용 도구를 열지 않은 상태에서 우클릭하거나 꾹 눌러봐야 뜨지 않습니다.  꼭 개발자용 도구를 활성화한 뒤 시도 해주세요.   기본 F5를 누르면 실행되는 새로고침은 맨 위의 일반 새로고침(Ctrl + R)입니다. 로컬호스트 캐싱을 방지하기 위해선 그보다 강력한 강력 새로고침(Ctrl + Shift...

원하는 웹 페이지의 색 배치를 손쉽게 따와보자   웹 디자인 중에, 참고할 만한 사이트를 돌아다니다가 너무나도 맘에 드는 색상 배치를 발견했는데 색상 값을 알아내려면 포토샵을 키고 스포이드를 찍어야 한다면 너무 귀찮죠.    크롬의 확장 프로그램인 ColorZilla 는 웹 페이지 상에서 바로 마우스 위치의 색상 값을 알려주고 클릭하면 자동으로 클립보드에 복사 까지 해 주는 유용한 디자인 쪽 확장 프로그램입니다. 그 외의 기능으로는 손쉽게 CSS 그라디언트를 만들어주는 기능이 있습니다. 다운로드 및 설치   ColorZilla 확장 프로그램 페이지 에 접속해서 설치하시면 바로 사용할 수 있습니다. ColorZilla 사용법   ColorZilla를 설치하면 오른쪽 위에 ColorZilla 아이콘이 생깁니다. 클릭하고 마우스를 웹 페이지에서 움직이면 마우스가 위치한 곳의 색상이 표시 됩니다. 클릭하면 바로 해당 색상의 HEX값이 클립보드에 복사 됩니다.   물론, 옵션에서 복사될 형식을 변경할 수도 있습니다.  (Auto Copy 항목 변경)   CSS Gradient Generator 를 사용하면 복잡한 그라디언트도 간단히 만들어 적용할 수 있습니다. 자바스크립트 없이, CSS만으로!   ColorZilla와 Adobe Color CC를 동시에 사용하면 색상 배치는 더 이상 고민거리가 되지 않을 겁니다. 저처럼 타고난 색상 센스가 영 좋지 않지 않다면요.

확장 프로그램 / 다운로드를 위한 대기시간   파이어폭스는 확장 프로그램을 설치하려 하거나 뭔가를 다운로드 하려 할 때 확인 버튼이 활성화 되기까지 대기 시간이 있습니다. 나도 모르게 아무거나 다운로드 받아버리는 경우를 방지하기 위한 조치라고 하지만, 이 기능이 전혀 쓸데가 없는 사람들도 있는 법이죠. 그래서 이런 분을 위해 파이어폭스의 다운로드 대기시간을 없애는 방법 을 알려드리겠습니다. 파이어폭스 다운로드 즉시 활성화   방법은 매우 간단합니다. 파이어폭스의 모든 설정을 관리할 수 있는 about:config 에 들어가 security.dialog_enable_delay 를 원하는 값으로 수정하시면 됩니다. 단위는 ms입니다.   이 값을 0으로 바꾸면 다운로드 딜레이가 완전히 없어지게 됩니다.   이 페이지는 웹 사이트가 아니기 때문에 앞에 프로토콜(http[s]|ftp|sftp|...)을 붙이면 안 들어가집니다. 반드시 주소창에 about:config 라고만 적어주세요.