Blog

DOM의 변화를 감지하는 MutationObserver

보통 자바스크립트 프레임워크를 사용해서 개발할 때에는 DOM을 직접 다루지 않아도 모든 요소를 제어할 수 있기 떄문에 거의 사용할 일이 없는 API이다. 하지만 플러그인이나 확장 기능 개발과 같이 직접 제어할 수 없는 부분의 영향을 받는다면 더할 나위 없이 유용한 API이다. 회사의 제품 중에 주피터랩의 플러그인 형태로 개발된 링크(Link)가 있는데 확장 ……

dev | 2023-04-11 | Comments (0)

지정된 디렉토리에서 Git 명령어 실행하기

크론탭에 git pull을 주기적으로 하는 명령어를 등록하려고 했다. 보통은 cd로 이동하고 실행을 하는데 특정 디렉토리에서 pull을 하는 명령어가 없나 찾아보니 역시나 있었다. -C를 이용해서 지정된 디렉토리에서 Git 명령을 실행할 수 있다. cd ~/my-project && git pull && cd - 이렇게 사용해 왔다면 git ……

dev | 2023-03-26 | Comments (0)

SvelteKit을 SPA로 사용하기

검색 엔진 최적화(SEO; search engine optimization) 측면에서는 서버측 랜더링(SSR; server side rendering)을 사용해야 한다. 하지만 로그인이 필수여서 검색 엔진에 노출되지 않는 사이트에 SSR을 적용할 이유는 별로 없어 보인다. 단일 페이지 애플리케이션(SPA; single page application)은 웹서 ……

dev | 2023-03-12 | Comments (0)

event.keyCode와 event.code, event.key

새로 설정한 스벨트킷(SvelteKit) 프로젝트에 기존에 사용하던 UI 모듈을 추가하고 있었는데 못보던 타입스크립트 오류가 보였다. Hint: 'keyCode' is deprecated. (ts) if (event.keyCode === 27) { ESC 키가 눌렸는지 검사하는 코드였는데 지금까지 잘 쓰고 있던 event.keyCode에 무 ……

dev | 2023-01-07 | Comments (2)

런타임 CSS-in-JS의 성능

"Why We're Breaking Up with CSS-in-JS"(번역) 전에도 CSS-in-JS가 성능 문제를 가지고 있다는 글을 본 적이 있는데 이번에는 글을 쓴 사람이 이모션(emotion)의 컨트리뷰터여서 좀 더 사람들이 관심을 가진 것 같다. 간단히 요약하면 CSS-in-JS는 스코핑 등의 장점이 있지만 런타임 성능을 떨어뜨린다는 내용이다 ……

dev | 2022-12-11 | Comments (0)

HTML을 SVG로 변환하기

"Forking Chrome to turn HTML into SVG". 크로미움을 패치해서 HTML을 SVG로 변환하는 과정을 설명한 글이다. 특별한 장점이 있어서 변환을 했다고 생각되지는 않는데 재미있는 시도라고 생각된다. 요즘 SVG를 관심깊게 보고 있어서 더 그렇게 느껴지는 지도 모르겠다. 변환 과정에서 나온 기술적인 문제를 완전히 이해하지는 못 ……

web | 2022-11-18 | Comments (0)

테이블에 border-radius가 적용되지 않을 때

테이블을 스타일링 할 때에는 보통 먼저 너비를 고정하고 셀의 간격을 없애는 스타일을 적용하고 시작한다. 이렇게 해야 셀의 너비가 내용물에 따라 변하지 않고 셀에 선을 넣었을 때도 끊어지지 않게 나온다. table { table-layout: fixed; border-collapse: collapse; } 최근에 표에 borde ……

dev | 2022-10-15 | Comments (0)

SVG 애니메이션

20년 넘은 기술임에도 불구하고 SVG는 그동안 많이 사용되지 않았다. 로고같은 곳에 조금씩만 사용되었는데 요즘은 대부분의 아이콘을 SVG로 처리할 정도로 활용처가 많아졌다. 피그마나 제플린 같이 백터 그래픽을 쉽게 다루고 추출할 수 있게 해주는 도구의 발전도 한 몫 했다. 덕분에 나도 최근들어 SVG를 많이 사용하게 됐는데 CSS와의 조합이 아주 좋아서 ……

dev | 2022-08-28 | Comments (2)

각종 소프트웨어의 지원 종료 날짜를 알려주는 사이트

파이썬의 버전 관리 정보를 찾다가 발견한 사이트인데 endoflife.date라는 각종 프로젝트의 종료 시기를 안내해주는 사이트가 있다. 소프트웨어를 만들어 배포할 때 하위 호환성을 어디까지 유지해줘야 하나 고민하게 되는 경우가 많은데 그럴때 유용하게 사용할 수 있는 사이트이다. 물론 공식 지원이 끊겼다고 해서 사용자들이 없어지는 것은 아니지만 부족한 자원 ……

software | 2022-07-31 | Comments (0)

컨트롤, 알트, 쉬프트 키를 확인하는 방법

최신 브라우저들은 키보드 이벤트나 마우스 이벤트에 컨트롤(Ctrl), 알트(Alt), 쉬프트(Shift) 키들이 눌렸는지 알려주는 기능이 있다. 각각 event.ctrlKey, event.altKey, event.shiftKey를 이용해서 이벤트 발생 시에 이런 기능키가 눌렸는지 확인할 수 있다. 맥의 경우 컨트롤 키를 누르고 마우스 클릭을 하면 마우 ……

dev | 2022-06-19 | Comments (0)