kipid's blog

# Change browser URL or URI (window.location, Unique Resource Identifier) without reloading or redirecting a page 페이지를 일부만 바꾸고 싶을때, 혹은 JavaScript 변수들/데이터들을 유지하고 싶을때, 주로 AJAX request 를 이용한다. 그런데 사용자에게 일부가 바뀐 이 페이지의 주소는 이것이다라고 알려주고 다른 사람들과 공유하기 편하게 하려면, 바뀐 페이지에 바로 접속할 수 있는 주소로 URL (window.location) 이 바뀌어주는 것이 좋아보인다. 물론 이 주소로 접속을 하면 서버에서는 그 바뀐 페이지를 다시 보여주도록 디자인되어야 할테고. 인스타그램, 페이스북, GitHub 등의 사이트들에서..

# How can I block MathJax.js to render texts enclosed by backtick ``? 구글로 검색해보고 , ChatGPT 에게 물어본걸 좀 더 정리함. 정리하는건 사람이/내가 더 나은듯? AI 도 뭐 별거 없어서 ㅡ,.ㅡ;; ## TOC ## Google search (Feat. stackoverflow) 구글 검색에서 뜬 건 . 좀 공부를 해야하고 긴 글을 정독해야 하지만 ref 도 잘 달아주고 해서 좋음. 아주 간단하게는 바로 아래처럼 MathJax.js 를 load 했던걸, ```[.lang-html] ```/ 아래와 같이 바꿔주면 된다는듯. (That will be faster as well as it is a smaller file.) ```[.lang-h..

# Learning PHP PHP (PHP Hypertext Preprocessor, though originally it was Personal Home Page Tools) 를 배워봅시다. 꽤나 역사가 있는 언어인만큼 (since 1995) tutorial page들도 많고, 잘 정립되어 있는듯. ## TOC ## RRA Official PHP.net (PHP Hypertext Preprocessor); and PHP Manual Tutorials Open Tutorials.org - PHP 기본 수업; and PHP 고급 수업; and PHP 소셜 프로그래밍 w3 Schools.com - PHP Tutorial Competition with other server-side languages Tech..

# Learning Play Framework Play도 요즘 주목받는 server-side 언어인듯? 2009년쯤에 만들어졌고 Scala, Java 언어로 짤 수 있고... 좀 공부해봐야 알듯. Vert.x랑 비교해서 어떤게 좋을라나? 국내에는 Play 관련 포스팅이 거의 없는듯도. ## PH 2014-07-29: First posting. ## TOC ## RRA Official Play Framework.com/ Related posts iam1492.tistory.com - Play framework으로 블로그 개발하기 (1) - Starting up the project, 2012-03-02 // 설명 글. 6개의 포스팅이 있음. Outsider's Dev Story - Play framewor..

# Vert.x 로 https (SSL/TLS) server 만들기 Vertx 로 secure server 인 https (SSL/TLS) server 를 만들어 봅시다. ## TOC ## keytool .jks 우선 RSA key 를 만들어 줘야 하는데... 명령어는 다음과 같다. 윈도우 cmd 에서 다음과 같은 명령어를 입력하자. ```[.linenums] C:\Recoeve> keytool -genkeypair -alias recoeve.net -keyalg RSA -keysize 2048 -keystore recoeve.jks -validity 3650 // 실행하면 다음과 같이 뜸. Enter keystore password: Re-enter new password: What is your fi..

# Web site - 다국어 지원 (multi-language support) 다국어를 지원하는 여러 방법들이 있는거 같긴한데... 내가 다루기 편한 형태로서 다국어 지원하려고 다음과 같은 JAVA class 들을 만듬. ## PH 2016-01-29 : First posting. ## TOC ## class FileMap ```[.linenums.scrollable] package recoeve.db; import java.lang.StringBuilder; import java.util.Set; import java.util.HashSet; import java.util.ArrayList; import java.util.Map; import java.util.HashMap; import java.u..

# Compiling and Running JAVA (Build System) through batch (.bat) and shell script (.sh) Windows 에서는 batch (.bat) file 로 Mac/Unix/Linux 에서는 shell script (.sh) file 로 JAVA file 을 compile 하고 run/execute 시키는 방법. 특히나 package 가 있고 import 가 있는 java 파일을 자동으로 컴파일하고, class 파일은 따로 클래스 폴더에 넣고 그 클래스 폴더의 class 파일을 자동으로 잘 찾아서 실행시키도록 디자인. 자바 까는 법은 참고. ## TOC ## Windows ### batch file (runJava.bat) 관리자 권한으로 JAVA..

# Netflix iframe 으로 퍼오기. Netflix 도 유튜브처럼 iframe 으로 퍼오는게 가능한지 테스트. ```[.lang-html] ```/ iframe 설정 X-Frame-Options set to deny 때문에 안되는듯?

# 실시간 HTTP 양방향 통신 (Web socket, Polling, Long-polling, and so on) 웹 페이지가 한번 로딩 된 이후에 서버에 새로운 데이터가 들어오거나 기존 데이터에 변화가 일어나서 이미 로딩이 끝난 사용자의 웹페이지에도 무언가 변화를 일으키고 싶을때도 있을텐데 이런걸 가능하게 해주는 방법에 대해 알아보자. "웹 페이지가 다시 로드되지 않고도 실시간으로 변동사항을 반영해 변화하게 하려면 어떻게 해야할까요. 이런 고민들은 의외로 많은 곳에서 만나게 됩니다. 웹에서 실시간 모니터링 도구를 만들어야 한다던가, 스포츠 실황중계처럼 매우 짧은 시간간격으로 변화하는 상황을 사용자에게 보여주어야만 하는 서비스를 만든다던가 할 때, 우리는 이와 같은 고민에 빠지게 됩니다. 함께 접속한 ..

# Specific event handler on HTML element? How to check whether a specific event handler is bound/asigned to a HTML element or not. (Testing jQuery on/off/trigger) jQuery on/off/trigger 명령어 사용하면서 "이미 element 에 handler 가 붙어있는지 아닌지 어떻게 알아낼 수 있지?" 등이 궁금해서 정리하는 글. ## TOC ## jQuery on/off/trigger HTML element 의 event handler 를 다루는 방법 중 jQuery 의 on/off/trigger 사용하는게 가장 깔끔한 방법이라고 생각. 코드도 이해하기 쉽게 디자인 되어있..

# Number and Bit operations in JAVA and Javascript JAVA 에는 unsinged number type 이 따로 없는듯 하고. Javascript 에서는 data type 자체가 없음. Javascript 는 이런 data type 을 알아서 대부분 처리해주기 때문에 편한면이 많긴한데, 실제 operator (+, -, *, /, and bit operations) 들이 어떻게 구체적으로 동작하는지를 알아내기가 힘들다는 점도 있는듯. ## TOC ## string.charCodeAt(index) and String.fromCharCode(int) in Javascript JAVA 에서는 str.codePointAt(int i) and String.valueOf(in..

Font Test in HTML HTML에서 여러가지 Font testing. Table of Contents Which font-size is the best among "px", "mm", "pt", "em", "%" 아래 div를 감싸고 있는 parent div의 font-size를 10px로 해놨음. (style="font:10px/1.6 '맑은 고딕'") 굳이 10px로 정한 이유는 child div들(+다른 child tag들)의 font-size를 em(혹은 %)로 표시할거라서 계산 상 편의를 위함임. 보통 em을 쓰는 것이 권장되는 방법이라고 함. 즉 font-size를 정할 때 (px, cm/mm, pt)보다 %나 em을 쓸 것을 더 권장함. Parent의 font-size 기준으로 일관..

# HTML 가로 Slide 구현하기 다음이나 네이버 메인 페이지의 가로 slide 들이랑, 사진 가로 slide 들을 어떻게 구현할 수 있는지 궁금해서 알아보는 중. 똑똑하게 scroll 동작을 인식해서 가로 slide 를 바꿔주는게 필요한듯. CSS 를 어떻게 해줘야 하는지가 조금 헷갈리고... ## TOC ## 사진 가로 slide ## rolling, flexible, counter content 1 content 2 content 3 content 4 prev next current : 2, total : 4 ## limit, page:2, speed:300 content 1 content 2 content 3 content 4 prev next ## multiple, view:3, limit ..

# HTML event handler HTML event handler. Javascript/jQuery 로 HTML 에서 일어나는 여러가지 event 들을 처리해서 interactive 한 페이지를 만들 수 있음. 그런데 헷갈리는 것들이 많고, 어떤 event 들이 있는지도 다 기억하기 힘들어서 정리하는 중. ## PH 2016-02-01 : Smart phone touch event 관련 정리. 2015-12-10 : 조금 더 정리. 2014? : First posting. ## TOC ## Mouse and Touch event ### On click event (getting event position) ```[#mouse-event-result.scrollable] mouse-event-resu..

Javascript namespace or encapsulation C, C#, C++, JAVA 등 에서의 "namespace, private variable, private method" 같은 효과들을 javascript에서 어떻게 비슷하게나마 구현할 수 있는지에 관한 이야기. (자세한 정리는 에서 보시길. 제대로 정리하기가 귀찮아서 -ㅇ-;;; 하더라도 천천히 나중에나 할듯.) (예전에 공부하면서 그냥 대충만 정리해 놓은것들이라;;; 여기선 정말 대충, 엉터리로 정리해놨으니 reference들 참고해서 공부하세요.) Closure란 특성을 이용하는 것인데... Garbage collection과도 관련이 있고... Closure란 단어가 너무 추상적인듯도... closure 특성이라고 많이들 이야기..

# 움직이는 사진 gif 만들기 (GifCam.exe) 예전에 움직이는 사진 (gif 이미지) 만들고 싶어서, +어떻게 만드는지 궁금해서 검색해봤을때는 포토샾을 사용해야 한다던지 하는 어려운 방법밖에 못찾았어서 귀찮고, 배우기 힘들어서 그만뒀었는데, 최근에 gifCam 이라고 가볍고 사용법이 간단한 프로그램을 찾아서 정리 및 홍보하려고 글 작성. 꿀캠 (Honey cam) 이란 프로그램도 있었구나 . 이건 오래된 프로그램 같은데 왜 예전에 검색할때 못찾았을까나;;; 이건 WebM, WebP 영상 (gif 랑 비슷하지만 img 가 아니라 video. 용량면에서 1/10 정도라는듯? 그런데 다른 video format 도 gif 비해서는 1/10 정도 아닌가??? 이걸 잘 모르겄네;ㅋ 소리없는 영상들도 gi..

# 반응형 웹 만들기 (Responsible/Scalable web design with css media query) 기본적으로 어느 인터넷 브라우저에서든 Ctrl+mouse wheel 을 하면 scale 을 바꿀 수 있음. Chrome 은 site 별로 이 scale 도 저장해놔서 나중에 왔을때도 같은 scale 로 web-page 를 볼 수 있음. 개인적으로 국내 web page 들 90% 이상에서 글씨 크기가 눈나쁜 나한테는 너무 작아서... 항상 scale up 해서 보는 경향이... Chrome 기본 설정에서도 기본 글씨 크기를 바꿀 수 있긴 한듯. 그런데 어차피 사이트 제작자가 그냥 font 에서 layout 을 맞춰놓은 경우가 많아서.. 이걸 바꾸면 overflow 나고 이럴 경우도 많을듯..

티스토리 단축키 설정 (+단축키 추가/수정하기) 티스토리에 단축키가 있다는걸 최근에야 깨달음;;; 티스토리 단축키 설명은 sidebar에도 표시해 놨음. Posting History 2014-06-20: First Posting. Table of Contents 티스토리 기본 단축키 티스토리 기본 단축키 Q: 관리자 (Admin) A: 이전 글 S: 다음 글 Z: 최근에 올라온 글 X: 최근에 달린 댓글 C: 최근에 받은 트랙백 개인적으로 추가한 단축키 D: Previous Section F: Forward Section L: To the [Lists] 글쓰기에 들어가면 에디터에도 단축키들이 많은것 같지만, 난 HTML로 쓰는 경우가 많아서 이것 관련 정리는 패스. 단축키 추가/수정하기 단축키를 추가하거..

Customized styling of scroll bars in HTML First posting at 2014-05-26 Cross browsing 문제가 심하긴 한듯. Table of Contents in Webkit browser (Chrome, Safari, Opera) 설정들은 참조해서... ▲ default scrollbars. ::-webkit-scrollbar{ /* 1 */ } ::-webkit-scrollbar-button{ /* 2 */ } ::-webkit-scrollbar-track{ /* 3 */ } ::-webkit-scrollbar-track-piece{ /* 4 */ } ::-webkit-scrollbar-thumb{ /* 5 */ } ::-webkit-scrollbar-..

Improving web performance 그냥 구글에 "improving web performance" 검색하면 여러가지 잘 정리해놓은 페이지들이 나오는듯. References and Related Articles Six Revisions - 10 Ways to Improve Your Web Page Performance, 2008-12-22, by Jacob Gube.; 꽤나 잘 정리되어 있는듯. pamela fox's blog - Improving front page performance: removing images, 5 ways, 2014-01-30.; TinyPNG로 이미지 용량줄이기, Delay load로 scroll 되기 전의 load 줄이기. tutsplus - Best Practic..

Citing the references automatically in HTML (like LaTeX) I cite the first ref . And citing the second , I cite finally the third one . There could be more than one cite in the article . You can check those references. web:, ref2:. kipids:, no:, unknown:. Bubble reference which is cited manually: [01] Ref. [01] This is a manual reference. So this is not listed below in Reference section. On mouse..

LaTeX(라텍스, 레이텍) 소개 및 설명서(Guide)들 LaTeX가 장단점이 있긴한데... 내가 볼땐 단점이 훨씬 더 많은거 같음. 이제는 점점 인터넷 기반 문서 편집기(word)가 대세가 될거 같은데.. 그 후보군중 가장 유력한 것이 LaTeX 같긴 함. 하지만 접근성을 높이려면 많은 수정이 필요할 듯. HTML(인터넷)과의 연계를 높이는 word(문서 편집기)가 최종적으로 살아남을 것이라고 봄. HTML5가 곧 그 역활을 할지도? HTML을 고치느냐, LaTeX, MS Word, 한글 등을 고치느냐의 싸움인데... 둘 다 적절히 고쳐서 연계시켜 나갈듯??? Mark-up language랑 WYSIWYG(What you see is what you get)랑 잘 섞여들어가야 할거 같은데, 왜 아무도..

한국 IT의 미래 재밌게 본 유익한 글들만 몇 개 모아봄. 뭐 이런 글들은 그냥 트위터에서 공유하고 리트윗하고 마는데, 곧 IT업계로 뛰어들 거 같아서;;; 정리해 놓으면 방향 잡는데 도움이 될까하고, 정리한김에 포스팅. 뭐 국내 시장만을 목표로 하는 IT업체에 들어가고(or 창업하고) 싶지는 않지만, 시작은 국내기반일 경우가 크고 큰 그림으로 볼 때 궁극적으로 어떻게 좋은 생태계를 만들어야 할까도 고민해야 할거 같아서... 과연 어떻게 변화할지, 어떻게 변화해야하는지. References and Related Articles 조성문의 실리콘밸리 이야기 - 한국 인터넷에서 잘못 끼워진 첫 단추, 그 이름은 네이버 (NAVER), 2010-03-21, by 조성문.; 최근에도 계속 읽히고 업데이트 되고 있..

CSS3 examples css animation으로 구글 검색하면 많은 example들을 찾을 수 있음. 3D는 무거워서 css3 animation 쓰는게 그닥 좋아보이지는 않음. 그래도... 음....... transition 이런건 좋은듯? http://www.carnationgroup.com/ 이 사이트처럼? References and Related Articles w3schools - css3 animations webdesignerwall.com - 47 Amazing CSS3 Animation Demos (놀라운 CSS3 애니메이션 데모 47개), 2010-02-03 Webstoryboy's blog - 플래시를 능가하는 HTML5/CSS3 16가지 사이트, 2012-06-12

# 괜찮은 에디터들 소개 및 추천 (Introducing/Recommending good code editors) 간단한 소개만 작성. ## PH 2015-12-14 : To SEE. 내용 더 추가 및 정리. 2014-06-24 : First posting. (더 전에 작성한거 같기도 한데, 대충 이 근처일거임. Atom 나왔다는 소식듣고 바로 작성했나? 그 이전에 sublime text 써보고 너무 괜찮았어서 작성했나?) ## TOC ## Sublime Text 구글 출신 개발자가 만든 멋있는 에디터 . (이거 제대로 만들려고 구글은 퇴사한듯 함. 2008년에 version 1 이 나온듯? Jon Skinner left his job as a software engineer at Google in or..

Delayed (Lazy) Loading in HTML by JavaScript (+jQuery) This is sometimes called 'Lazy Loading'. Maths, i.e. equations, are also delayed-rendered by MathJax . (Some of this document are written in Korean (called Hangul). People who do not know Hangul, just read english part. That will be enough.) 사용자가 안보고 넘길것 같은 부분은 굳이 미리 로딩해놓지 말고, 속도를 빠르게, 서버 부담을 적게 덜어주자는 목적으로 Delayed Loading이라는 개념이 있음. 특히나 용량이 ..

# Cloud Server Services (eg. Amazon Web Services) 작성중인 글. 서버 컴퓨터를 사서 웹 서비스를 할수도 있겠지만, 서비스 초반에 서버용 컴퓨터를 사려면 초기비용 및 이것저것 관리비가 많이들테고... Scalable 문제도 많아서 Cloud Server Service 를 이용해 보는것이 좋아보임. (뭐 꽤나 성장을 한다면야 따로 구축해 놓는게 위기/보안관리나 비용면에서 더 절약될지도... 더 할일은 많겠지만.) ## TOC ## Amazon Web Services - EC2 (Elastic Compute Cloud) 어떤 다른 기업의 서비스들이 있는지 잘 모르겠지만, 우선 가장 유명한건 AWS 인듯? 사이트 자체를 엄청 깔끔하게 만들어놔서 더 믿음직스럽기도... (요..

# JAVA SE 8 - API - index with Fuzzy Search Fuzzy search 구현함 김에 JAVA API 링크도 좀 정리해야겠음. 매번 사이트 가서 Ctrl+F 로 class 를 찾았는데... 좀 구림 이 방법이. Class 이름을 정확히 알고 있어야 하고, 뒷자리나 앞자리에 비슷한 이름이 들어간 Class 들도 많아서... 예로 Set, Map 같은 애들. 이런걸 빨리 찾기 위해서는 fuzzy search 도 tuning 좀 하긴 해야할듯. Match score 가 같다면 가장 짧은 Class 가 위로 오도록? ## RRA JAVA SE 8 - API - index.html

# 가상 현실 (VR : Virtual Reality) 개발 내가 이쪽 관련 개발을 할거 같진 않지만, 신기해서 조금만 정리. ## PH 2015-12-14 : First posting. ## TOC ## 입력 기기 ### 모션 캡쳐 (이미지 분석, 동작 인식) 모션 캡쳐 리모콘 : Wii 리모컨 같은거 모션 캡쳐 카메라 : 카메라로 찍어서 분석해서 동작이 뭔지 판별. (Xbox 에서 구현했었었나? 춤 따라하는 게임도 있었던걸로 기억. 화면에 나오는 동작을 잘 따라하면 점수 높고 이런 게임.) 근육 움직임 감지 : 손에 차거나 해서 손의 근육 움직임 분석해서 동작하는 놈도 있었던듯. 이건 정확성이 좀 떨어질거 같다고도 생각. ### 전방위 트레드밀 모션 캡쳐만 가지고는 멀리 걸어가는, 뛰어가는 동작같은걸..