본문 바로가기

[IT/Programming]

jQuery.ripples - 이미지에 물결 그래픽 효과 주기 # jQuery.ripples - 이미지에 물결 그래픽 효과 주기최근에 구글링을 하다가 블로그를 엄청 예쁘게 꾸미시고 글 퀄리티도 매우 뛰어난데를 발견했는데, 거기서 신기한게 있어서 나도 배우기 및 적용해볼겸 작성하는 글.## PH2023-11-29 : First posting.## TOC## jQuery.ripples.jsjQuery 라이브러리니 당연히 jQuery 가 선행되어야 하고, 실행 메소드 하나만 해주면 바로 적용이 된단다.유의 할점은 이미지는 태그가 아닌 css의 background-url 속성으로 적용되어야 한다고 한다. (객체 속성으로도 명시할 수 있음.) 아마도 그냥 img 로 load 되면 속성을 변화시키면서 img 를 바꾸는게 막혀서 그런듯 하다. (.gif 로 하면 더 멋질거 .. 더보기
한글 포함한 코딩 폰트 추천 (Recommending Coding Font with Korean supported) # 한글 포함한 코딩 폰트 추천 (Recommending Coding Font with Korean supported)## PH2024-09-15## TOC## fonts.google.com :: Nanum Gothic Coding Nanum Gothic Coding 참조: 구글에서 coding 검색하니 이거 하나 뜸. 한글 지원되는 폰트만 보여주는건지, coding font 는 많을거 같은데 =ㅂ=;;;아무튼 한글이 나눔 고딕처럼 꽤나 예쁨. 영어 2글자가 한글 1글자 너비를 가지게 만들어 줬음.해당 font-family 가 안깔린 경우를 위해 아래와 같이 인터넷에서 폰트를 가져올 수 있도록 설정해 줘야 함.``````/CSS 는 다음과 같이 설정하면 됨.```body { font-family:'Nan.. 더보기
event.keyCode deprecated, then event.key, event.code 는 무슨값을 가질까? (키보드 (KeyBoard) event handler: compositionstart compositionupdate compositionend) # event.keyCode deprecated, then event.key, event.code 는 무슨값을 가질까? (키보드 (KeyBoard) event handler: compositionstart compositionupdate compositionend)event.keyCode 로 단축키 설정하고 이것저것 했었는데 이미 몇년전에 deprecated 되었다네요. 에서 키보드가 눌렸을때의 각 값들을 잘 보여주고 있긴 한데, 한영키나 다른 나라 (중국, 일본 정도?) 키보드에서도 잘 동작하도록 하려면 테스트가 필요할거 같아서 본 글을 작성합니다.Korean, Japanese, Chinese typing handled. event.data on input, compositionstart, compo.. 더보기
week1 위클리 페이퍼 (CSS 에 대해 설명 (position, display: flex and grid), 시맨틱 (Semantic) 태그를 사용하면 좋은 점) # week1 위클리 페이퍼 (CSS 에 대해 설명 (position, display: flex and grid), 시맨틱 (Semantic) 태그를 사용하면 좋은 점)## TOC## CSS (Cascading Style Sheets) 의 Cascading에 대해 설명해 주세요.Cascading: 폭포처럼 떨어지는...폭포가 계단형식으로 떨어지는 것처럼 CSS Selector 가 가장 specific (구체적: id, class, tag or postfix (e.g. :hover, :focus, :visited, :nth-child(3), :first-child, ::before, ::after, ::placeholder) 순으로 금은동 메기듯 더 상위 level) 스타일부터 적용시켜 나가면서 덜 spe.. 더보기
React Router 에서 CSS 충돌을 막고 좀 더 개발 친화적으로 CSS 를 다룰 수 있게 해주는 CSS module 을 배워봅시다. (Learning module.css) # React Router 에서 CSS 충돌을 막고 좀 더 개발 친화적으로 CSS 를 다룰 수 있게 해주는 CSS module 을 배워봅시다. (Learning module.css)## PH2024-09-12 : First posting.## TOC## React Router### Install (npm install react-router-dom)```npm install react-router-dom```/과 같은 명령어로 우선 package 를 깔자.### 사용방법```import { BrowserRouter, Route, Routes } from 'react-router-dom';import ReactDOM from 'react-dom/client';import './root.css';import.. 더보기
To correct inaccurate location measured by GPS with Wi-Fi RSSI (Received Signal Strength Indicatior). (Wi-Fi 신호세기를 이용해 GPS 튀는거 잡는 방법.) # To correct inaccurate location measured by GPS with Wi-Fi RSSI (Received Signal Strength Indicatior). (Wi-Fi 신호세기를 이용해 GPS 튀는거 잡는 방법.)Wi-Fi (와이파이) 신호 세기로부터 거리를 추측하는 법을 알아봅시다.ps. License | Patent (특허권) : 상업적으로 사용을 금합니다. 상업적 사용을 원하시면 이 글에 댓글을 달거나 open kakao talk :: kipid 로 알려주세요. (우선 특허는 보류중.)GPS 가 가끔씩 튈 때가 있는데, 이 때 Wi-Fi rssi 를 이용해서 위치가 튀지 않았다는 것을 보정해주면 좋음. 거리가 얼만큼 변한건지 min, max 를 추측하려면 약간은 생각을.. 더보기
JAVA 에서 Selenium 이 제대로 동작 안할 때 해결법 # JAVA 에서 Selenium 이 제대로 동작 안할 때 해결법org.openqa.selenium.NoSuchSessionException 이 자꾸 뜰 때 해결법.## PH2024-09-05 : First posting.## TOC## JAVA 에서 WebDriver 의 path 를 정해주지 말고, Windows 환경 변수에서 PATH 에 WebDriver directory 를 추가합시다.```System.setProperty("webdriver.chrome.driver", FileMap.preFilePath + "/Recoeve/webdriver/chromedriver.exe");curChromeOptions.setBinary(FileMap.preFilePath + "/Recoeve/webdriver.. 더보기
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.. 더보기
week6 위클리 페이퍼 (웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명) # week6 위클리 페이퍼 (웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명)## PH2024-09-03 : First posting.## TOC## 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명웹 페이지 렌더링 방식에는 CSR (Client-Side Rendering), SSR (Server-Side Rendering), SSG (Static Site Generation) 세 가지가 있습니다. 각 방식의 특징과 사용 상황을 설명드릴게요.### Client-Side Rendering (CSR)특징:브라우저에서 렌더링: 모든 JavaScript 파일을 클라이언트(브라우저)로 전송하고, .. 더보기
week5 위클리 페이퍼 (useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명, 리액트 생명주기 (life cycle) 에 대해 설명, React 에서 배열을 렌더링할 때 key 를 설정해야 하는 이유와 key 설정 시 주의할 점을 설명) # week5 위클리 페이퍼 (useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명, 리액트 생명주기 (life cycle) 에 대해 설명, React 에서 배열을 렌더링할 때 key 를 설정해야 하는 이유와 key 설정 시 주의할 점을 설명)## PH2024-09-02 : First posting.## TOC## useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명useMemo 와 useCallback 는 React 에서 성능 최적화를 위해 사용되는 훅입니다. 각각의 역할과 사용법, 그리고 남용 시 발생할 수 있는 문제점을 설명드릴게요.### useM.. 더보기
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.. 더보기

티스토리툴바