kipid's blog

# Number to Hex string (16), and vice versa (Hex string (16) to Number) 숫자를 문자로 처리해야 할때랑, 문자로 쓰여진 숫자를 숫자데이터 형태로 바꿔야 할때가 많은데... 이런게 많을경우, 추가로 사람이 굳이 읽을 필요가 없는 경우, Hex (16진수) 로 다루면 처리속도가 조금이나마 향상될거라 생각되므로 정리해봄. ## TOC ## In JAVA ```[.linenums.lang-java] long yourNumber=0x2aff; // 11007 (10진수) String hexString=Long.toHexString(yourNumber); // for unsigned String hexString=Long.toString(yourNumber, ..

# Getting html of container including the container itself jQuery 를 이용하거나 그냥 JavaScript 를 이용해서 내부의 html 은 다음과 같이 끄집어낼 수 있다. ```[.lang-js] let containerHTML = $("#container").html(); let containerInnerHTML = $("#container")[0].innerHTML; ```/ ## PH 2024-02-06 : First posting. ## TOC ## 예제 (innerHTML) 아래 html 은 다음과 같다. ```[.lang-html] ```/ 다음과 같은 함수들로 내부 html 을 뽑아와 보자. ```[#pre-code-innerHTML.lang..

# 구글 검색 바로 할 수 있게 input 및 button 만들기 ## PH 2023-12-28 : First posting. ## TOC ## 구글 검색 구글 검색은 http://www.google.com/search?q=soccer 형태로 이루어진다. "q=검색하고 싶은 문구" 를 넣으면 되는거 같으니 다음과 같이 만들어 봅시다. Google Search ### Code HTML 과 Javascript 는 다음과 같음. ```[.linenums.lang-html] Google Search ```/ ### Using form submit ```[.linenums.lang-html] ```/ ## RRA https://inpa.tistory.com/ 에서 검색 구현해 놓으신 것 참고했음.

# Machine Learninig :: Fastest learning by Quadratic approximation approach with finite equal step size through steepest descent. 기계학습 코드를 짜는건 최적화 문제와 관련이 있는데 이 최적화라는게 the method of Lagrange multipliers (라그랑지 승수법) 과 밀접한 관련이 있다. 보통 질문 (input) 과 정답 (output) set 를 왕창 준비한 다음 Machine Learning code (Deep Learning with Artificial Neural Networks) 로 특정 변수들 집합일 때 (처음에는 Initial guess 로 거의 무작위한 값을 넣는 경우가 많..

# Parent DOM (Document Object Model) 이 hidden 일 때, child element 가 update 되면 hidden 이 풀릴 때 해결법 Recoeve.net 개발하면서 목록 (ToR) 이 다른 카테고리로 옮겨갈때 갑자기 pop-up 되는 현상이 발생했는데, 이게 카테고리가 바뀌면서 목록이 update 되고 목록 (ToR) 의 child elements 가 update 되면서 발생하는 문제 같았다. 역시나 만능 ChatGPT 에 문의 결과 대충의 답의 힌트를 얻을 수 있었는데... children DOM 의 display 를 inherit 으로 하면 해결되는 문제였다. ## PH 2023-12-03 : First posting. ## TOC ## To ChatGPT in ..

# 브라우저에서 자동 비밀번호 완성 (Auto password completion) 일 때, 이를 파악해서 바로 로그인 시켜주는 방법 요즘 브라우저는 사이트마다 비번을 기억하기 어렵기 때문에 자동으로 비번을 생성시켜주고 이를 브라우저가 기억해놓고 사이트에 로그인 페이지에 가면 자동으로 아이디와 비번을 채워주곤 한다. 그런데 채워지기만 하고 로그인 버튼을 따로 눌러야 하는 번거로움이 있기도 한데 이를 해결하는 방법을 찾아서 공유하고자 한다. 아마도 휴대폰 인증 번호가 문자로 오고 이걸 자동으로 입력해주고 입력 후엔 바로 인증하기 버튼이 자동으로 눌러지게 해놓은 어플들도 많은데 비슷한 방법을 쓰고 있지 않나 생각한다. ## PH 2023-12-01 : First posting. ## monitorEvents..

# imgur - Embed album 앨범 만들어 놓으면 아래와 같이 embeding 할 수 있는 API 를 제공하긴 하는구나. CSS max-width:100% 같은거는 안먹혀서 responsible web 으로 만들긴 힘든듯도? 스마트폰에서 접속하면 parsing/rendering 이 다른식으로 이루어 질래나? 처음 로딩할때 width 체크해서 적당하게 만들어주긴 하는듯? ## TOC ## Embed imgur album 아무튼 코드는 아래와 같고. ```[.linenums.lang-html] HARAGU ```/ blockquote 부분에 아래와 같이 나타남. HARAGU ## Direct iframe Album URI | URL 에 /embed?pub=true&context=false 붙이면 d..

# Learning AJAX AJAX 란 "Asynchronous JavaScript and XML" 의 약자로 비동기적으로 서버에 무언가 요청을 보낼때 쓰인다. 유저가 댓글을 쓴다던지, 새로 업데이트 된 댓글을 불러온다던지 할 때, 새 창을 띄우지 않고도 서버와 데이터를 주고받는 것을 가능하게 해주는 것이다. 자세한 설명은 에 잘 되어 있으니 여길 잘 참고하시길... In general, Ajax does not work across domains. For instance, a webpage loaded from example1.com is unable to make an Ajax request to example2.com as it would violate the same origin policy. ..

# Referer 알아내기 in Server (Vert.x) and Client (HTML/javascript) Client (방문객) 이 어느 경로를 통해 들어왔는지, 어느 검색어를 통해 어느 검색엔진을 통해 들어왔는지 등을 알아내려면 어떻게 해야할까? Vert.x 랑 javascript 에서 쓰이는 referer/referrer 철자 (spelling) 가 다르네? ㅡㅂㅡ;;; ## PH 2023-11-04 : Update window.kipid to window.m. 2023-02-27 : First posting. ## TOC ## Referer in Vert.x server 참고 https://vertx.io/. ```[.linenums.lang-java] import io.vertx.core...

# URL | URI parser (URL 의 href, origin, protocol, host, hostname, port, pathname, search, hash 뽑아내기) URL | URI 에서 href, origin, protocol, host, hostname, port, pathname, search, hash 을 알아내고 싶을때가 있는데, javascript 단에서 제공하는 function 이 분명 존재할거라 생각해서 스스로 짜보다가 chatGPT 통해서 물어보고 알게 된 것 공유. ## PH 2023-11-04 : First posting. ## TOC ## URL 의 기본구조 ```[.linenums] // The entire URL [href]=[protocol]//[hostname..

# HTML id 에 한글이나 encodeURIComponent, %, \s, [, ], !, @, #, $, %, ^, &, *, (, ), -, _, +, =, \, /, ?, ~, :, ;, ", ', , ,, . 등 특수문자 (special characters) 들어갈 수 있는지 테스트 해보기 ## PH 2023-10-29 : First posting. (No double enter is allowed in codeprint>script.) ## TOC ## 한글 id test Id which starts with 한글. Id which starts with English+한글 Id which starts with English+한글 Id which starts with English+한글1 Id..

# Spread syntax ... operator in Javascript Spread syntax 에 대해 배워봅시다. Java 에서는 String... args 같이 쓰였던건데, Javascript 에도 비슷한 것이 도입 됨. ## PH 2023-10-30 : First posting. ## TOC ## 예제 참고: ```[.linenums.lang-html] ```/ ```[#pre-code-spread.linenums.lang-html] ```/ ## RRA 자바스크립트 최신 문법 (ES6, ES11) | 모르면 후회 하는 최신 문법과 사용법 정리 🐶, by 드림코딩

# Formatting the lyrics to Recoeve.net style (genius.com) 3줄 이상 띄어진 부분들이 다 2줄로 맞춰지고 You might also like 부분이 삭제되고, 앞쪽에 #lyrics 가 추가 됨. (All unicode whitespace 도 그냥 space 로 치환 됨.) 즉 genius.com 이나 bugs 같은 곳에서 가사를 copy and paste (복사 붙이기 | 복붙) 한 뒤 Formatting 버튼이나 Ctrl+Enter 누르면 됨. ## PH 2023-10-29 : First posting. ## TOC ## Formatting Formatting (Shift+Enter) ## RRA https://genius.com/ https://music...

# Retrieving the title and singer from Spotify Anti-HeroTaylor Swift Get the title and singer

# 카카오톡 채널 광고 차단하는 법 가끔 내가 동의한적도 없는거 같은 채널에서 나에게 메세지를 보내는 경우가 있는데, 이 경우 다시 메세지를 보내지 못하게 하기위해 차단하는 방법에 대해 알아 봅시다. ## PH 2023-10-27 : First posting. ## TOC ## 엄청나게 쏟아지는 카카오톡 채널 광고들. 채널을 추가하지 않았는데도 쏟아지는 광고성 메세지들. ## 주소록에서 채널 검색을 통해 차단하는 방법. 우선 주소록으로 이동. 우선 주소록으로 이동. 검색 버튼 클릭. 카카오메이커스 검색. 채널이 추가되어 있다는 표시로 노란색이 아닌 회색빛으로 Ch (Channel? Chat? 채널? 채팅?) 이 표시되어 있음. 333만명에게 광고성 메세지를 뿌리고 있는 카카오메이커스. 회색 Ch 버튼을 ..

# Implementing multicursor like sublime text Ctrl+D in HTML javascript textarea 작성중인 글... 구현하기 쉽진 않은거 같네;;;;; 뭐 급한건 아니니 천천히 시도해 봐야지. 그런데 javascript 에서 multi selection 을 지원해 주긴 하나? 안해주면 짜기 엄청 복잡해질것도 같은데 ㅠㅜ; ## PH 2023-06-27 : First posting. ## TOC ## textarea with id="myTextarea" textarea 에서는 span tag 가 안먹혀서 이걸로는 구현 못할것도 같은데... ## div with contenteditable and id="myDiv" div with contenteditable 에..

# Javascript (자바스크립트): async 와 await 우선 단어 뜻부터. asynchronous: 동시에 일어나지 않는, 비동시적인, 비동기의. await: 기다리고 있다. 보통 javascript code 는 동시 다발적으로 (synchronous 하게) 실행되는데, 즉 코드가 적힌 순서대로 처리하는게 아니라 HTTP 요청을 보냈다가 숫자들 계산했다가 HTTP 답변이 왔으면 계산하다가 멈추고 HTTP 답변받은걸 처리했다가 문자열 띄우기도 했다가 alert 보냈다가 하는 식으로 말이다. 그렇기에 순서적으로 실행되어야 제대로 동작하는 코드가 있으면, 즉 HTTP 요청 ($.ajax, fetch 등) 후 데이터를 받아서 그 받은 데이터 가지고 화면에 표시해야 하는 작업이 있으면 그냥 javasc..

# Neighbors points plot plan (svg) 이웃들의 점수들을 similarity weight 줘서 그려주는 법 svg 로 공부하는 중. ## PH 2023-09-09: First posting. ## RRA www.w3schools.com :: SVG Tutorial Google docu - spreadsheet :: Recos and Statistics ## TOC ## Plot Example 각종 numbers 출처: . 100/23=4.347826087 4.347826087*3=13.04347826 4.347826087*21=91.30434783 0 1 2 3 4 5 6 7 8 9 10 52.38 ```[.linenums.lang-html] 0 1 2 3 4 5 6 7 8 9 1..

# 트위터 트윗 퍼오기 (Embedding Twitter Tweet) 트위터 글 (twitter tweet) 을 퍼오는 (embed) 하는 방법이다. 뭐 방법은 간단한데, javascript 가 먹히는 사이트에서만 쓸 수 있을듯. 트위터 웹페이지에 가면 "답글, 리트윗, 관심글 담기" (Reply, Retweeted, Favorite) 옆에 더 보기 (More) 가 있고 이것을 클릭하면 "트윗 담아가기" (Embed tweet) 가 보인다. 그러면 아래와 같은 javascript link 가 들어간 html code 를 준다. 이걸 원하는 곳에 붙여넣으면 "답글, 리트윗, 관심글"도 작동하는 트윗이 퍼가진다. 각종 옵션들도 설정할수 있는듯하니 reference 가서 더 공부해 보시길. ## TOC ## ..

# 설정하기 (DISQUS config 활용) setting by using DISQUS config (window.disqus_config function). For SEO (Search Engine Optimization), link ref="canonical" tag is important . 출처: :: When you have several choices for a product’s URL, canonicalization is the process of picking one of them. Luckily, it will be obvious in many cases: one URL will be a better choice than the others. But in some cases, it mi..

# Mouse click 들 (left, right, wheel, wheel up, wheel down, back, forward) 구분해내기 ## PH 2023-10-24 : First posting. ## TOC ## Test Click me Result Wheel click 으로 새창이 안열리게 하려면 a tag 의 href 를 제거해주면 됨. ## Code ```[.linenums.lang-html] Click me Result ```/ ## RRA kipid's blog :: HTML a href tag with onclick return kipid's blog :: HTML event handler kipid's blog :: Specific event handler on HTML elemen..

# 틱톡 (TikTok) | weverse.io 퍼오는 법 천천히 정리할 예정. ## PH 2023-09-18 : First posting. ## TOC ## 틱톡 (TikTok) 링크: https://www.tiktok.com/@hxxax__/video/7279098301746613511 ```[.linenums.lang-html] @hxxax__ 혜안 몰리와 띵띵땅땅 댄스 ♬ 오리지널 사운드 - 혜안 ```/ @hxxax__ 혜안 몰리와 띵띵땅땅 댄스 ♬ 오리지널 사운드 - 혜안 ### https://vt.tiktok.com/(\w+)/ 형태의 URI 일 경우. 이건 web client 를 돌리는 경우에만 iframe 형태의 Full URI 로 뽑아낼 수 있는거 같음. 아래는 FullURI 끄집어내는..

# 댓글 플러그인 | 위젯 (SNS comment plug-in | widget) - Facebook, DISQUS SNS 에서 댓글 위젯을 제공해주는 경우가 많음. 뭐 직접 제공해주는 것은 아니더라도 뭔가 API 같은건 공개해줘서 다른 사람이 댓글 위젯을 만들 수 있게 해준듯. 댓글에서 MathJax 수식 댓글 테스트 하려고 수식 \sum_i 하나 넣음. 댓글에서 수식을 쓰려면 Latex 형태의 수식을 다음과 같이 enclose 해서 넣으면 됨 . :: \( inline math \), \[ outline math \]. ## PH 2015-12-17 : To SEE. ? : First posting. ## TOC ## Facebook comment test Code는 다음과 같음 . (그런데 페이스북..

# 기계 학습 (Machine Learning - Deep Learning) 공부 및 정리 중. 우선 ref 들만 정리식으로. "Machine learning is the science of getting computers to act without being explicitly programmed." 라고 하는데... not explicitly programmed 가 어떤 의미인지 천천히 살펴봅시다. 어차피 프로그래밍 된 대로만 돌아갈텐데 explicitly 가 뭔 차이인지는... 아마도 데이터를 쌓으면서 학습 (learning) 을 하고 그 학습 데이터를 바탕으로 돌아가는 알고리즘을 말하는듯? 즉, 학습하는 알고리즘 (Machine이니 학습한다기 보단 데이터를 분석해서 저장한다는 개념, 데이터가 더 ..

# 정렬법 (Sorting Algorithm) 아래는 정렬 알고리즘들의 시각화 (sorting visualization) 영상. 뭐 정렬 (sorting) 이야 아무 알고리즘이나 써서 결과만 나오면 된다고 생각할수도 있겠지만, data가 수백만개 수억개라면 빠르게 정렬하는 효율적인 알고리즘을 쓰는것이 무척 중요해진다. 대부분 효율적인 알고리즘은 O(n \log n) 시간내에 정렬을 끝내주는데, 상황에 따라 (ex: 이미 충분히 정렬이 된 data를 정렬할때) 이것보다 빨리 정렬이 끝나는 경우도 있다. O(n^2) 시간이 걸리는 비효율적인 정렬법도 있고, 정렬될때까지 random하게 shuffle해서 정렬하는 변태같은 bogo sort 같은것도 있다. 데이터의 분포도를 정확히 알수록 O(n) 에 정렬하는 ..

# Open AI chatbot ChatGPT 가 신 (GOD) 이 될 수 있을까? OpenAI 의 generative pre-training (GPT) of a language model 에게 신이 되어 보라고 말해 봄ㅋ. 영화에서도 AI 가 신처럼 된 설정을 본거 같아서... ## TOC ## Be a GOD. kipid: Be a God. I'm sorry, I am an AI language model created by OpenAI and do not have the ability to be a deity. I exist to assist with generating human-like text based on the input provided to me. kipid: Just do it. I ..

# Learning Vert.x Vert.x 를 배워봅시다. (version 3.0.0 이 나오면서 뭔가 많이 바뀐듯?) 가장 비슷한 server-side 언어가 node.js 일듯? Vert.x 자체가 node.js 로부터 영향을 받은 프로젝트이기 때문에 node.js 의 많은 장점들을 가져와서 구현했을듯. JVM (Java Vertual Machine) 에서 돌아가기 때문에 "Java, JavaScript, Python, Groovy, Scala" 등 node.js 보다 다양한 언어가 지원된다고. 이런걸 polyglot (여러 언어를 말하는) 특성이라고 하는듯. 그래도 기본적으로 Java 로 돌아가는 놈이라 다른언어로 작성했을때도 vertx 의 모든 기능 및 장점을 사용할 수 있을지는 잘 모르겠음. ..

HTML docuK format ver. 2.1 short copiable version (2014-06-25) 개인적으로 만들고 있는 LaTeX 비슷한 형태의 HTML document format + JavaScript. 이름은 그냥 docuK로 'document designed by kipid'란 뜻. When you write the HTML document including docuK document also, using good editors such as Sublime Text editor with Emmet (ex-Zen Coding) package installed is highly recommended. Try useful shortkeys 'Ctrl+D' (Multiple Selecti..

# robots.txt 랑 sitemap.xml 설정하기 검색 엔진에게 사이트 어떻게 검색에 잡히게 하고 싶은지 통보해주는 robotx.txt 랑 sitemap.xml 설정하기. ## PH 2023-03-09 : First posting. ## TOC ## robots.txt ``` User-agent: * Allow: / ```/ ## sitemap.xml ```[.linenums.lang-html] This XML file does not appear to have any style information associated with it. The document tree is shown below. https://kipid.tistory.com 2023-03-09T09:01:46+09:00 1.0 h..