Blog
:has() 셀렉터
부모 요소 셀렉터는 오래전 부터 많은 개발자들이 원하는 기능이었다. 하지만 탐색 순서나 순환 참조와 같은 브라우저 성능과 관련된 구현 문제가 있어서 오랬동안 실현되지 못했다. 20여년이 지나서야 CSS4 스펙에 추가되고 2021년에 구현을 시작한 브라우저가 나오고 2022년에 기능을 탑재한 브라우저들이 출시됐다. 지금은 파어어 폭스를 제외한 대부분의 브라우 ……
dev |2023-07-16 | Comments (0)
PG RX-78-2 Gundam 30th Anniversary Extra Finish Version
10년도 더 전에 일을 좀 도와드리고 선물로 받은 키트다. 그동안 엄두가 안나서 조립을 못하고 있었는데 계속 들고만 다니고 있어서 맘먹고 조립을 했다. PG는 처음으로 조립해 봤는데 무게도 그렇고 MG나 RG에서는 느껴보지 못한 완성도를 느낄 수 있었다. 기존의 PG RX-78에 코팅을 새로한 버전이라고 하는데 조명이 안좋아서 사진은 별로지만 금속 광택의 ……
hobby |2023-06-04 | Comments (0)
두 변수의 값 서로 바꾸기
프로그래밍 커리큘럼 초기에 나오는 주제다. 보통 임시 변수를 쓴다. temp에 a를 넣고 a에 b를 넣고 b에 temp를 넣는 식이다. 숫자라면 임시 변수 없이도 가능한데, 더했다 빼거나, 곱했다 나누기, 또는 XOR 연산을 사용할 수 있다. 이게 궁금했던 것은 아니고 아름다운 방법은 없나 찾아봤는데 구조 분해(destructuring)를 쓰면 한줄에 ……
dev |2023-06-03 | Comments (3)
text-decoration: underline 의 하위 요소 전파
파이어폭스와 크롬에서는 나오지 않는 밑줄이 사파리에서만 나왔다. 사파리의 랜더링이 잘 못 되었을 거라고 생각하고 살펴봤는데 오히려 파이어폭스에서 밑줄이 나오지 않는 것이 이상했다. MDN에서 text-decoration을 보니 부모 요소에 적용된 밑줄을 자식 요소에서 취소 할 수 없다고 나와 있어서 사파리의 랜더링이 맞는 것 같았다. 밑줄이 나오지 않 ……
dev |2023-05-13 | Comments (0)
비밀번호의 강도를 알려주는 zxcvbn
사용자가 추측하기 쉬운 비밀번호를 사용하면 계정이 탈취될 수 있기 때문에 보통 비밀번호 규칙을 정해서 너무 쉬운 비밀번호는 사용 하지 못하게 한다. 최소 길이를 제한하거나 영어 대소문자나 숫자, 특수문자를 포함하도록 하는 경우가 많다. 하지만 다양한 기호를 섞어서 비밀번호를 만들기 보다는 16자 정도의 충분히 긴 비밀번호를 사용하는 것이 보안상 더 도 ……
dev |2023-04-23 | Comments (0)
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)