kipid's blog

# For loop examples in JAVA and Javascript## PH2023-09-10 : First posting.## TOC## JAVA Examples```[.scrollable.lang-java]For (int i=0;i catsSet=new HashSet();catsSet.add("[Music/Break]--K-pop");For (String cat: catsSet) { // do something System.out.println(cat);}Collection collection=new ArrayList();collection.add("zero");collection.add("one");collection.add("two");Iterator iterator=collectio..

# HTTP Cookie in Web / HTML / Javascript and Server작성중... (아직 중구난방일 수 있으니 감안하고 보시길...)Client-side (browser) 에 일정 정보를 "key=value" 형태로 저장시켜놓고, 서버에서 사용자를 기억하는데 주로 사용되는 cookie 란 놈이 있다. 매번 browser 에서 server 로 HTTP request 보낼때 이 cookie 란 놈도 항상 같이 보내기 때문에 이런게 가능한 것인데, 보통 request.headers().get("Cookie") 같은 명령어로 server 에서 뽑아낼 수 있다.Server 측에서 주로 사용하는 데이터이긴 하지만, client 측에서도 javascript 를 통해서 접근 가능하기도 해서 XSS..

# Interactive graph and chart in HTML (Highcharts.js and Chart.js)HTML 의 canvas tag 배워서 그리는거랑, 이런 open source js 공부해서 적용해서 그리는거랑 그닥 노력대비 효과 보는게 비슷비슷할듯도 한데... 그래도 당장은 js 있는거 써서 그리는게 더 보긴 깔끔하니 배워봅시다.## PH2023-03-10: To SEE.2017-07-31: 더 정리.2014-06-12: docuK upgrade.2014-??-??: First Posting.## TOC## Highcharts.com참조 .### Line Chart - Basic Line Monthly Average Temperature (Source: WorldClimate.com..

--> --># Super Easy Edit (SEE) of docuK (MarkDown): 사용 설명서 (Manual | Documentation | Tutorial). 쉽게 문서를 작성합시다. Download the below file, and learn how to write SEE (Super Easy Edit) of docuK from the file texts. Replacing only ... part, write well-formatted extended-MarkDown documents easily. Abstract | Description of docuK and SEE This is an HTML document format named docuK which is rendered..

# ESLint & Prettier: Format Document (JavaScript, React styles 통일시키기)Airbnb Style Guide 가 유명해서 이 가이드대로 .js, .jsx 파일들이 포멧화되도록 설정을 해보려고 함.## PH2024-09-27 : First posting.## TOC## ESLint, Prettier 패키지 설치ESLint (EcmaScript Lint) 는 JavaScript에 한정된 Code Formatter (문법이 제대로 맞는지 주로 판단) 라면, Prettier 는 전체 코드 스타일을 다루는 Code Formatter (코드 스타일을 통일시켜주는 일을 주로 함) 이다.```[.scrollable]npm install --save-dev --save-..

# Learning JavaScript, especially class-like Constructor function and Property Inheritance through prototype/__proto__ chainingWeb browser 에서 쓰이는, "Object-based based on prototypes" 특성을 갖는 client-side 프로그래밍 언어인 JavaScript를 배워 봅시다. 여기는 제가 헷갈렸던 부분만 조금 정리.## PH2017-08-14: 코드 스타일만 좀 정리. To SEE.2014-06-13: docuK upgrade.2014-05-21: First Posting.## TOC## Making an instance from a constructor function..

# jQuery.ripples - 이미지에 물결 그래픽 효과 주기최근에 구글링을 하다가 블로그를 엄청 예쁘게 꾸미시고 글 퀄리티도 매우 뛰어난데를 발견했는데, 거기서 신기한게 있어서 나도 배우기 및 적용해볼겸 작성하는 글.## PH2023-11-29 : First posting.## TOC## jQuery.ripples.jsjQuery 라이브러리니 당연히 jQuery 가 선행되어야 하고, 실행 메소드 하나만 해주면 바로 적용이 된단다.유의 할점은 이미지는 태그가 아닌 css의 background-url 속성으로 적용되어야 한다고 한다. (객체 속성으로도 명시할 수 있음.) 아마도 그냥 img 로 load 되면 속성을 변화시키면서 img 를 바꾸는게 막혀서 그런듯 하다. (.gif 로 하면 더 멋질거 ..

# Time zone table | settingRecoeve.net timezone 설정을 위해 공부/연구하는 중. 어떻게 선택하게 해야 쉽게 설정 가능할까나?## PH2023-10-26 : Update. Vatican img. 근데 왜 sublime text 에서 HTML syntax 로 안보여주고 하얗게 일반 text 처럼 나올까나? 이상하네 ㅡ,.ㅡ;;;2023-07-05 : First posting.## TOC## Time in javascript```[.linenums.lang-js]new Date();Wed Jul 05 2023 08:21:44 GMT+0900 (한국 표준시)// Local time 으로 표시해줌. UTC+09:00new Date().toUTCString();'Tue, 04 ..

# React 를 배워보자. (Learning React) with TypeScript and esbuild bundling## PH2024-08-28 : First posting.## TOC## Initiate React AppBundler 로는 Tree shaking 과 multi threading 을 지원해서 가장 빠르고 좋다는 esbuild 를 사용합시다. ```mkdir hello_reactcd hello_reactnpm init react-app .npm run startnpm install --save-exact --save-dev esbuildnpm audit fix --force// audit 뜻 : 1.감사 2.단속 3.청강 4.세무조사npm install --save-dev @babe..

# JavaScript 중급 서술형 평가 (자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명, 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명, 브라우저가 어떻게 동작하는지 설명, 이벤트 버블링과 캡처링을 설명하고 이를 방지하기 위한 방법을 서술, 프로미스(Promise)의 3가지 상태에 대해 설명)## PH2024-08-31 : First posting.## TOC## 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명자바스크립트에서 this 키워드는 실행 컨텍스트에 따라 그 값이 결정되며, 현재 실행중인 함수 또는 메소드의 "소유자"를 가리킵니다.전역 실행 컨텍스트에서 this 는 전역 객체 (브라우저에서는 window, Node.js 에서는 global..

# 마지막이 ```/ 로 끝나면 error 나는거 해결합시다.어랏 에러가 안나네. 뭐가 바뀐거지? =ㅂ=;;;## PH2024-08-30 : First posting.## TOC## Codes printed```[.scrollable.lang-js]window.m = window.k = {}; // window.m can be asigned another JSON or number/string and so on. But window.k must be kept.(function (m, $, undefined) {m.version0 = "2.12";m.getUTF8Length = function (s) { let len = 0; for (let i = 0; i = 0xd800 && code arr[sort..

# Regular Expression (정규 표현식), and match/replace method in JavaScript, JAVA, and Python정규 표현식 테스트. replace, match, split 등에 쓰임. 꽤나 유용. 새로운 프로그래밍 언어(?)를 만들때에도 필수적으로 쓰일듯한. JavaScript 말고도 대부분의 언어 (Java, C, C++, LabVIEW, PHP, Perl 등등등) 에서 이런게 다들 비슷하게 구현되어 있음.그런데 비슷하긴한데, 다들 조금씩은 달라서 헷갈리는게 많긴 한듯. 특히 JAVA, Python 이... JavaScript 가 제일 깔끔한듯한 느낌적인 느낌.## PH2024-02-24 : Python 추가.2024-01-07 : Small edit. (?..

# 말풍선, inRef 만들기, 만드는 법 in HTML by JavaScript (아랫쪽, 윗쪽, 왼쪽, 오른쪽 말풍선) - 안내서 만들기다음과 같은 , 아랫쪽 말풍선 만드는 법을 구현해서 SEE (Super Easy Edit) of docuK 를 구현했었는데, 이런 말풍선을 어떻게 만들 수 있는지 정리하고 공유하기 위해 포스팅.## PH2024-08-26 : First posting.## TOC## 말풍선 만들기## RRApure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial).Super Easy Edit (SEE) of docuK (MarkDown): 사용 설명서 (Manual | Docume..

# week3 위클리 페이퍼 (var, let, const 를 서로 비교 // 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명 // 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명)## PH2024-08-12 : First posting.## TOC## var, let, const 를 서로 비교var 는 예전에 쓰던 변수 선언 방식으로 hoisting, 중복 선언 가능, function scope 만 지원 등 프로그래밍을 할 때 안좋은 점, 헷갈리게 하는 점이 너무 많아 요새는 안쓰는 추세로 가고 있다.let 은 변하는 값을 담는 변수를 선언하는 방식으로 primitive 변수나 JSON 등에 두루 쓸 수 있고, const 는 한번 할당되면 변하지 않는 변수 선언으로..

# jQuery 분석 (Analysis): $.find([CSS Selector]) and $.parents([CSS Selector])요새 jQuery 를 안쓴다는 설이 있어서 jQuery 에서 유용하게 써먹었던 function 들 공부해서 JS (pure JavaScript) 로 변환 좀 해놓으려고 공부 및 정리 중.## RRAhttps://github.com/jquery/jquery/blob/c85454a84306677efda3286a3214419bff945849/src/selector.js#L380 ($.find([CSS Selector]))https://github.com/jquery/jquery/blob/c85454a84306677efda3286a3214419bff945849/src/trave..

# Learning Node.jsServer-Side JavaScript 라 불리우는 Node.js 를 배워봅시다. JavaScript 언어 특성을 server 에 적용하면 무엇이 좋을까나? 무엇이 나쁠 수 있고?간단하게나마 server 에 대해 알고 있어야 이해가 쉬울듯. PHP 같은 것으로라도 간단히 이런것에 대해 조금 이해해 놓는것이? 이거랑은 상관없나? Egoing 님 php 강의에서 server 가 어떤 데이터들을 보내고, client 가 어떤 데이터들을 보내고 받는지 등을 이야기한 동영상이 있었는데... 그것만 보고와서 Node.js 를 공부해도 조금 이해가 편할듯.## PH2016-04-11 : To SEE.2014-05-22 : First posting.## TOC## 장단점Node.js ..

# 여러가지 프로그래밍 언어들 (List of programming languages)언어들 참 많다. code snippet 좀 넣을까?분류를 내가 좀 아는 언어들, 생소한 언어들로 나눈게 에러같긴 하지만;;; 천천히 수정. A Snapshot of Programming Language History. (출처: 알렌 터커의 ‘프로그래밍 언어’ + ) 현재 프로그래밍 언어 랭킹 참조: ## PH 2015-12-12 : php code snippet 에서 escape 를 안했네;;; 2014-11-11 : code snippet 추가. related refs 말머리에 삽입. 2014-06-19 : 더 정리. 2014-01-25 : ref를 LaTeX처럼 자동으로 처리하는 javascript를 짜봅시다..

# HTML a href tag with onclick return 가장 간단하게 HTML a (anchor/닻) tag 를 사용하는 방법은 ``` link or #hash text ```/ 와 같다. 그런데 간혹 이 링크를 다르게 처리하고 싶을때도 있다. (페이지 새로고침 없이 ajax 로 처리한다던지, pop-up 을 하고 싶다던지, stopPropagation 을 필요로 한다던지 등.) 이땐 다른 html element 들에서도 사용되는 onclick attribute 를 써주면 되는데, 아래와 같은 것들에는 주의가 필요하다고 한다. JavaScript recommendations It is often the case that an anchor tag is used with the onclick e..

# 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 드림코딩

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

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..

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

티스토리 단축키 설정 (+단축키 추가/수정하기) 티스토리에 단축키가 있다는걸 최근에야 깨달음;;; 티스토리 단축키 설명은 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로 쓰는 경우가 많아서 이것 관련 정리는 패스. 단축키 추가/수정하기 단축키를 추가하거..

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이라는 개념이 있음. 특히나 용량이 ..

# Learning AngularJS AngularJS 라고 JavaScript 를 확장해서 쓰는 framework 가 있다고 한다 . jQuery 랑 비슷한 놈이라고 생각해도 되는데, jQuery 가 HTML DOM (Document Object Model) 기반으로 selector 및 chainning 을 구현해 놓은 것이라면, AngularJS 는 MVC (Model–View–Controller) 기반으로 동적인 페이지 (Dynamic page) 를 쉽게 만들기 위한 목적으로 만들어진 감이 크다고 생각된다. 뭐 개인적으론 당장 동적인 페이지를 필요로하지 않아서, 배울 필요성을 당장 느끼지는 못하는데... 멋진 dynamical HTML page 를 만들고 싶다면 꼭 배워둬야만 하는 framework..