NOMO.asia
이메일 주소를 canvas로 적어놓기
개발/JavaScript 2019. 5. 3. 15:42

최근 블로그 스킨을 수정하면서 이것저것을 많이 바꾸었다. 그리고 이렇게 바꾼 것 중 하나가 이메일 주소를 적어놓는 부분이다. 항상 블로그 사이드바 상단에 연락용 이메일 주소를 적어놨었는데, 이메일 주소를 그냥 텍스트로 적어놓으면 광고봇들이 긁어가서 스팸 메일을 날려댈 수도 있으므로 이미지로 만들어서 넣어놨었다. 기존에 이미지로 삽입해둔 이메일의 폰트가 마음에 들지 않아서 이미지를 수정하려다가, canvas 를 이용해 삽입해보면 어떨까? 라는 생각을 하게되었다. 이러면 봇이 긁어갈 일도 없을테고, 어차피 이번 스킨 수정의 테마는 모던이니 복잡한 디자인도 필요 없었고, 별도의 편집기 없이 간단하게 수정해서 넣기도 좋을테니 말이다. 그런데 canvas 를 이용해 email을 삽입하더라도, 소스코드에는 emai..

VIEW POST
키워드에 자동으로 링크를 달아주기 위한 방법 고민해보기 (JavaScript)
개발/JavaScript 2019. 5. 2. 22:46

어떤 글에서 특정 키워드들을 찾아 자동으로 링크를 달아주려고 방법을 고민해보았다.고민해야 하는 것들 처음에는 쉽게 구현할 수 있을거라고 생각했지만 구현하다보니 몇가지 걸리는 부분이 있었다.키워드에 이미 링크가 걸려있다면 링크를 달아서는 안 된다. 그냥 링크를 달아버리면 링크가 중첩해서 걸릴 수 있다. html 태그는 바꾸면 안 되고, text 만 바꿔주어야 한다. 예를 들어, 이미지 src 속성, 그러니까 이미지 주소에 키워드가 포함되어 있다고 해서 이미지 주소의 일부를 태그로 감싸버리면 이미지가 깨져서 출력될 것이다. 이미 찾아서 링크를 단 것에 다시 링크를 달아서는 안 된다.안 좋은 예시 예를 들어, 아래와 같은 글이 있다고 하자. pineapple은 맛있어. pineapple 과 apple 이라는 ..

VIEW POST
티스토리를 SPA(단일 페이지 어플리케이션) 처럼 만들기 도전
개발/JavaScript 2019. 4. 29. 17:49

티스토리를 SPA(단일 페이지 어플리케이션) 처럼 만들기 티스토리는 기본적으로 모든 링크를 클릭할 때 마다 페이지를 매번 이동하는 구조로 되어있다. 그런데 적어도 내 스킨에서 각 링크를 클릭할 때마다 바뀌는 부분은 본문 영역 뿐이다. 그래서 티스토리를 SPA(Single Page Application)처럼 단일 페이지에서 별도의 페이지 이동 없이 내용을 동적 로딩하도록 만드는 방법이 있을까 고민해보았다. 처음에는 티스토리 API 에서 글목록, 글내용을 가져와 Ajax 로 뿌려주는 것을 구상했다. 그런데 티스토리 API는 이용자가 항상 토큰을 발급받아야 하고, 토큰 발급 전 티스토리 로그인이 강제되므로 티스토리에 로그인하지 않을 방문자가 대부분인 이 경우에는 적합하지 않았다. 그래서 Ajax 로 html ..

VIEW POST
용산 북천돈까스 방문기
먹을거 2019. 4. 26. 13:13

지난 4월 8일, 용산에 들렸다가 이 근처를 잘 아는 누나한테 메뉴 추천을 받아서 북천돈까스 라는 곳에 방문했다. 유명한 곳이라 기다리는 사람이 꽤 있었다. 점심 시간에 들렀는데 가게 앞에 줄이 서있었고, 기다리는 시간은 20분 정도였다.기다리는 동안 직원분이 밖으로 나오셔서 미리 주문을 받아가셨다. 우리 뒤로는 줄이 더 없어서 우리보다 조금 늦게 온 사람들은 바로 들어갈 수 있었다. 기다리는 시간은 날마다 다르다는듯. 여기서 가장 유명한, 아름답다는 표현에 걸맞는 브라운 돈까스를 시켰다. 가격은 9000~10000원선. 돈까스는 가장 좋아하는 음식 중 하나지만 요즘은 잘 안 먹는데, 이유는 다이어트를 한다는 것도 있지만 입천장 까지는게 싫어서인게 크다. 이곳의 돈까스는 촉촉한 소스에 적셔진 돈까스가 입..

VIEW POST
ANNO 1800 의 짜잘한 팁 몇가지
게임 2019. 4. 19. 01:54

ANNO 1800 는 게임 내에서 게임 플레이에 필요한 모든 설명을 상세하게 해주지 않는다. Try and Error 를 하면서 시간이 지나면 알게되기는 하지만, 튜토리얼에서 설명해줘야 마땅한 내용들을 알려주지 않는다 -_-;;. 그래서 이 글을 보는 누군가는 시행착오를 줄일 수 있게끔 게임 내에서 설명해주지 않는 기능들과 몇가지 팁을 정리해보았다.이 글은 튜토리얼을 진행했거나 게임을 1~2시간 정도 플레이 한 유저가 읽으면 가장 적절할 것으로 생각된다. 스포일러가 있을 수 있으니 주의. 아주 기초적인 플레이 방법이 게임의 플레이 방법은 아래의 순서와 같다.인구를 늘려서 수입을 높이고 테크트리를 해금한다.본섬에 없는 토착자원을 얻기 위해 섬멀티를 한다.퀘스트, 외교 활동, 무역 등을 통해 이득을 얻고, ..

VIEW POST
Twitch 채팅 참여자(viewer, chatter) 리스트 가져오기 (JavaScript)
개발/JavaScript 2019. 4. 15. 15:11

Twitch 채팅 참여자 리스트 가져오기 별로 어려운 것은 없으나 코드를 작성할 일이 있어 기록해둔다. 아래의 그림과 같은 트위치 채팅창에서 ≡ 모양 아이콘을 누르면 (참고 - 19년 8월 현재는 사람 모양 아이콘으로 바뀌었다.) 아래의 그림처럼 채팅 참여자 리스트가 나온다. (시청자의 아이디는 직접 *로 처리했으며 실제로는 온전히 다 나온다.) 위와 같은 Twitch 방송의 채팅 참여자 리스트를 얻으려면 아래의 주소로 요청을 하면 된다. client-id 등은 필요 없다. https://tmi.twitch.tv/group/user/[broadcaster id]/chattersajax 호출 예제 jQuery 와 ajax로 호출하는 예제 코드는 아래와 같다. twitchplayspokemon 의 채팅 참여..

VIEW POST
OpenModelica 설치하기
엔지니어링/Modelica 2019. 4. 15. 09:48

아래에서는 Modelica 언어 기반 오픈소스 툴인 OpenModelica 를 Windows 환경에서 설치하는 방법에 대해 다룬다.OpenModelica.org 홈페이지 접속 OpenModelica 의 공식 웹사이트인 openmodelica.org 에 접속한다.이후 상단 메뉴의 DOWNLOAD 에서 자신의 운영체제(Windows, Linux 등...)를 선택한다.내 경우에는 WIndows 이므로 해당 메뉴를 선택해주었다. 그러면 아래와 같은 화면이 나타날 것이다. Official Release 옆의 링크를 클릭한다. 그러면 아래와 같은 페이지로 이동된다. 32bit 와 64bit 의 차이는 얼마나 큰 모델을 다룰 수 있느냐의 차이이다.32bit 프로그램 에서는 메모리를 4GB 까지밖에 사용할 수 없기 때..

VIEW POST
티스토리 구버전 에디터 버튼을 추가하는 Userscript
개발/UserScript 2019. 4. 5. 17:07

티스토리 구버전 에디터 버튼을 추가하는 Userscript 티스토리 구버전 에디터와 새 버전 에디터를 동시에 사용하기 위한 Userscript 를 만들었다.미리보기 새 에디터가 활성화 되어 있는 경우, 스크립트를 설치 하면 아래와 같이 버튼을 추가해준다.이러한 것을 만든 이유는, 이번에 티스토리가 내놓은 새 에디터의 완성도가 떨어져서 구버전 에디터를 쓰고싶기는 한데, 어차피 새 버전 에디터에 적응해야 할 것이므로 두 에디터를 함께 쓸 수 있도록 이와 같이 만들었다. 참고로 페이지의 경우에는 이전 에디터가 제대로 동작하지 않는 것 같다.설치하기 브라우저에 맞는 Tampermonkey 확장 기능을 설치한다. Firefox - Tampermonkey Chrome - Tampermonkey확장기능 설치 후, 이..

VIEW POST
티스토리 블로그 구독 버튼 추가 후 SyntaxHighlighter 가 작동하지 않는 증상 임시 해결
개발/JavaScript 2019. 3. 24. 00:29

티스토리에 추가된 블로그 구독 기능2019년 3월 20일, 티스토리에 블로그 구독이라는 기능이 추가되었다. 여타 사이트의 구독 or 팔로잉 기능과 비슷하게, 마음에 드는 블로그를 구독하여 글을 쉽고 빠르게 모아볼 수 있는 기능이다. 자세한 설명은 다음의 링크 참조. https://notice.tistory.com/2477?category=110385 블로그 구독 버튼은 티스토리 관리자 페이지의 [메뉴바/구독 설정] 에서 활성화 할 수 있다. 이 블로그는 해당 기능이 나오자 마자 바로 블로그 구독 버튼을 활성화 해주었다. 블로그 구독 버튼 활성화 후 SyntaxHighlighter 가 작동하지 않는 증상 발생그런데 블로그 구독 버튼을 활성화 한 후 3일 만에 알게된 것인데, SyntaxHighlighter..

VIEW POST
한샘 팔렛 IoT LED 방등 2개월 실사용 후기
지름 2019. 3. 21. 07:19

본 구매 후기는 한샘 팔렛 IoT LED 방등 제품을 직접 구매하여 약 2개월 동안 사용한 후 작성된 후기이다.팔렛 IoT LED 방등을 구매하게 된 배경 방 인테리어를 바꾸면서 조명을 고민하다 아래와 같은 요구사항이 생겼다.쉴 때는 색온도를 낮춰 포근하고 감성돋는 분위기를 내고, 작업 or 공부등을 할 때는 색온도를 높여 주광색이었으면 싶었다. → 색감 조절이 되는 전등을 써보고 싶었다.기존에도 스위처라는 장치를 이용해서 원격으로 침대에 누워서 불끄는 것 정도는 가능했지만, 그래도 이왕이면 새로 구매하는 스마트 등에 어플로 켜고 끌 수 있는 기능이 있으면 좋을 듯 싶었다.필립스, 샤오미 이라이트 등 여러 제품을 비교한 후, 최종적으로 가격이 적당하면서 보증기간이 긴 한샘 팔렛 IoT LED 방등을 구매..

VIEW POST