Blog
런타임 CSS-in-JS의 성능
"Why We're Breaking Up with CSS-in-JS"(번역) 전에도 CSS-in-JS가 성능 문제를 가지고 있다는 글을 본 적이 있는데 이번에는 글을 쓴 사람이 이모션(emotion)의 컨트리뷰터여서 좀 더 사람들이 관심을 가진 것 같다. 간단히 요약하면 CSS-in-JS는 스코핑 등의 장점이 있지만 런타임 성능을 떨어뜨린다는 내용이다. CSS-in-JS와 CSS의 랜더링 성능을 비교해보니 전자는 54.3ms, 후자는 27.7ms로 약 두배 가량 성능차이가 있었다고 한다. 리액트를 사용하는 많은 사람들이 ……
dev |2022-12-11 | Comments (0)
HTML을 SVG로 변환하기
"Forking Chrome to turn HTML into SVG". 크로미움을 패치해서 HTML을 SVG로 변환하는 과정을 설명한 글이다. 특별한 장점이 있어서 변환을 했다고 생각되지는 않는데 재미있는 시도라고 생각된다. 요즘 SVG를 관심깊게 보고 있어서 더 그렇게 느껴지는 지도 모르겠다. 변환 과정에서 나온 기술적인 문제를 완전히 이해하지는 못했는데 결과적으로 크로미움을 패치해서 HTML이 SVG로 변환된 결과를 보여주고 있다. SVG가 느리다는 것을 알고는 있었는데 역시나 HTML 보다는 좀 느리다. 나로서는 문 ……
web |2022-11-18 | Comments (0)
테이블에 border-radius가 적용되지 않을 때
테이블을 스타일링 할 때에는 보통 먼저 너비를 고정하고 셀의 간격을 없애는 스타일을 적용하고 시작한다. 이렇게 해야 셀의 너비가 내용물에 따라 변하지 않고 셀에 선을 넣었을 때도 끊어지지 않게 나온다. table { table-layout: fixed; border-collapse: collapse; } 최근에 표에 border-radius가 적용되지 않는 현상을 발견했는데 위와 같이 하면 셀 보더가 없어져서 라운딩이 적용되지 않는다고 한다. border-collapse는 기본값으로 두고 bord ……
dev |2022-10-15 | Comments (0)
SVG 애니메이션
20년 넘은 기술임에도 불구하고 SVG는 그동안 많이 사용되지 않았다. 로고같은 곳에 조금씩만 사용되었는데 요즘은 대부분의 아이콘을 SVG로 처리할 정도로 활용처가 많아졌다. 피그마나 제플린 같이 백터 그래픽을 쉽게 다루고 추출할 수 있게 해주는 도구의 발전도 한 몫 했다. 덕분에 나도 최근들어 SVG를 많이 사용하게 됐는데 CSS와의 조합이 아주 좋아서 유용하게 사용하고 있다. 이미지 파일은 한 번 추출하면 변형을 할 수가 없는데 SVG는 코드로 되어 있기 때문에 수정도 용이하고 동적인 처리도 할 수 있다. 예를 들어서 모양 ……
dev |2022-08-28 | Comments (2)
각종 소프트웨어의 지원 종료 날짜를 알려주는 사이트
파이썬의 버전 관리 정보를 찾다가 발견한 사이트인데 endoflife.date라는 각종 프로젝트의 종료 시기를 안내해주는 사이트가 있다. 소프트웨어를 만들어 배포할 때 하위 호환성을 어디까지 유지해줘야 하나 고민하게 되는 경우가 많은데 그럴때 유용하게 사용할 수 있는 사이트이다. 물론 공식 지원이 끊겼다고 해서 사용자들이 없어지는 것은 아니지만 부족한 자원으로 유지 운영을 할 때에는 좋은 기초 자료가 될 수 있다. 웹 개발자라면 브라우저 지원 정보를 많이 참고하게 되는데 브라우저들의 출시와 지원 만료 정보도 확인할 수 있다. ……
software |2022-07-31 | Comments (0)
컨트롤, 알트, 쉬프트 키를 확인하는 방법
최신 브라우저들은 키보드 이벤트나 마우스 이벤트에 컨트롤(Ctrl), 알트(Alt), 쉬프트(Shift) 키들이 눌렸는지 알려주는 기능이 있다. 각각 event.ctrlKey, event.altKey, event.shiftKey를 이용해서 이벤트 발생 시에 이런 기능키가 눌렸는지 확인할 수 있다. 맥의 경우 컨트롤 키를 누르고 마우스 클릭을 하면 마우스 오른쪽 클릭을 한 것 처럼 컨텍스트 메뉴가 열린다. 많은 경우 윈도우에서 컨트롤 키로 할 수 있는 기능이 맥에서는 커멘드 키를 눌러야 된다. 커멘드 키는 event.metaKe ……
dev |2022-06-19 | Comments (0)
마키나락스
마키나락스(MakinaRocks)에 Frontend SW Engineer로 합류 했다. 마키나락스는 AI 스타트업으로 제조와 산업을 대상으로 하고 있다. MLOps 제품도 출시했는데 나도 제품 개발에 참여하게 될 것 같다. 회사 규모도 커지고 있고 채용도 많이 하고 있어서 당분간은 바쁘고 즐겁게 일하게 될 것 같아 기대된다.
work |2022-06-02 | Comments (0)
접근성 기능 오용 사례
사용자가 직접 콘텐츠를 만들어서 올리는 서비스는 접근성 높은 콘텐츠를 올릴 수 있도록 기능을 제공하는 것이 중요하다. 가장 대표적인 접근성 기능이 사용자가 콘텐츠를 올릴 때 대체 텍스트나 자막을 같이 제공할 수 있게 하는 기능이다. 기능이 제공되고 있어도 사용자가 그 기능을 올바르게 이해하고 사용해야 하기 때문에 어려운 부분이 있다. 유투브는 사용자가 클로즈드 캡션(closed caption)을 영상에 넣을 수 있게 기능을 제공하고 있다. 언어에 따라서는 음성 인식을 통한 기계 자막까지 제공해서 나도 아주 유용하게 사용하고 있 ……
accessibility |2022-05-30 | Comments (0)
scrollIntoView로 스크롤 제어
스크롤을 제어하는 가장 쉬운 방법은 URL 해시를 이용한 링크 이동이 있고 여기에 좀 더 정교한 조작이 필요하다면 Window.scrollTo()를 사용하는 방법이 있다. Window.scrollTo()를 사용하면 세밀한 조작에 애니메이션까지 가능하지만 대상의 위치를 Element.getBoundingClientRect()와 같은 기능을 사용해서 일일이 계산해 줘야 한다. element.scrollIntoView를 사용하면 번거로운 작업을 하지 않고도 페이지 내에서의 스크롤 이동을 쉽게 구현할 수 있다. 개발자 도구에서 HTM ……
dev |2022-04-30 | Comments (0)
Form의 checkValidity 기능
서식 전송 전에 각 입력 박스에 오류메시지를 보여주기 위해서는 입력 요소의 oninvalid 이벤트를 이용하면 효과적으로 구현할 수 있다. 반면 요즘 많이 볼 수 있는 UX 중의 하나가 필수 요소를 모두 체크 했을 때 전송 버튼을 활성화하는 방식인데 개별 체크 박스를 검사히지 않고 전체 서식의 입력이 유효한지를 알 수 있다면 더 간단히 구현할 수 있다. 이 떄 이용할 수 있는 기능이 checkValidity와 reportValidity이다. checkValidity는 오류 메시지를 보여주기 않고 reportValidity는 서 ……
dev |2022-03-26 | Comments (1)