본문 바로가기

javascript

ESLint & Prettier: Format Document (JavaScript, React styles 통일시키기) # 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__ chaining # 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 - 이미지에 물결 그래픽 효과 주기 # jQuery.ripples - 이미지에 물결 그래픽 효과 주기최근에 구글링을 하다가 블로그를 엄청 예쁘게 꾸미시고 글 퀄리티도 매우 뛰어난데를 발견했는데, 거기서 신기한게 있어서 나도 배우기 및 적용해볼겸 작성하는 글.## PH2023-11-29 : First posting.## TOC## jQuery.ripples.jsjQuery 라이브러리니 당연히 jQuery 가 선행되어야 하고, 실행 메소드 하나만 해주면 바로 적용이 된단다.유의 할점은 이미지는 태그가 아닌 css의 background-url 속성으로 적용되어야 한다고 한다. (객체 속성으로도 명시할 수 있음.) 아마도 그냥 img 로 load 되면 속성을 변화시키면서 img 를 바꾸는게 막혀서 그런듯 하다. (.gif 로 하면 더 멋질거 .. 더보기
Time zone table | setting # 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 # 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가지 상태에 대해 설명) # JavaScript 중급 서술형 평가 (자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명, 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명, 브라우저가 어떻게 동작하는지 설명, 이벤트 버블링과 캡처링을 설명하고 이를 방지하기 위한 방법을 서술, 프로미스(Promise)의 3가지 상태에 대해 설명)## PH2024-08-31 : First posting.## TOC## 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명자바스크립트에서 this 키워드는 실행 컨텍스트에 따라 그 값이 결정되며, 현재 실행중인 함수 또는 메소드의 "소유자"를 가리킵니다.전역 실행 컨텍스트에서 this 는 전역 객체 (브라우저에서는 window, Node.js 에서는 global.. 더보기
마지막이 ```/ 로 끝나면 error 나는거 해결합시다. # 마지막이 ```/ 로 끝나면 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 # 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. (?.. 더보기
Super Easy Edit (SEE) of docuK: 사용 설명서 (Manual | Documentation | Tutorial). --> --># 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.. 더보기
말풍선, inRef 만들기, 만드는 법 in HTML by JavaScript (아랫쪽, 윗쪽, 왼쪽, 오른쪽 말풍선) - 안내서 만들기 # 말풍선, 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)의 개념과 그 특성에 대해 설명) # 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 분석 (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.. 더보기

티스토리툴바