Blog
컨트롤, 알트, 쉬프트 키를 확인하는 방법
최신 브라우저들은 키보드 이벤트나 마우스 이벤트에 컨트롤(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)
파이어폭스 번역 오류 수정
내 할일 목록에서 '폰툰 주소의 반영을 확인'해야 한다는 항목을 보고 무슨 내용인지 잠시 고민을 했다. 맥락도 적어 놓지 않아서 어디에 노출된 문장이었는지 기억해 내는데 조금 시간이 걸렸다. 영문은 `{ $count } login`과 복수형인 `{ $count } logins`이고 처음에는 `{ $count } 로그인`으로 번역했다가 `{ $count }회 로그인`로 바꾼 것을 볼 수 있다. 개인적으로 비밀번호 관리를 파이어폭스의 로그인 저장 기능을 사용하는데 주소창에 about:logins를 입력하면 관리할 수 있는 화면이 ……
work |2022-02-05 | Comments (0)
버튼에는 손모양 포인터가 적합한가
가끔 버튼에 포인터를 올리면 손모양 포인터가 나와야 한다는 요구사항을 접하곤 한다. 의도는 버튼이 클릭 가능한 요소이기 때문에 손모양으로 나와야 한다는 것이다. 하지만 기본값을 변경하려는 이유로는 약하다. 운영체제의 기본값을 보면 버튼에 적용되는 포인터는 화살표 모양이다. 운영체제를 사용하는 환경과 웹을 사용하는 환경은 연결되어 있기 때문에 비슷하게 유지하는 것이 사용자에게 더 자연스러울 것이다. 많은 경우 버튼에 포인터를 올렸을 때 클릭 가능, 또는 인터랙션 가능하는 표시는 배경색을 바꾸거나 효과를 추가해서 나타낸다. 클릭 ……
dev |2022-01-27 | Comments (0)
MySQL을 SQLite로 변경
업데이트를 안하고 있는 사이트가 있는데 MySQL을 사용하고 있다. 서버 사양이 낮다보니 젠체 메모리 사용량이 80%~90%정도 인데 MySQL만 내려도 상당히 많은 메모리를 확보할 수 있어서 MySQL을 SQLite로 옮겨봤다. 먼저 데이터 옮기는 방법을 찾아봤는데 이미 몇가지 MySQL을 SQLite로 변환하는 방법이 있었다. LazSqlX은 윈도우 프로그램이래서 스킵하고 RebaseData를 사용해 봤다. 웹사이트에 MySQL 덤프 파일만 업로드 하면 간단하게 변환이 된다. 무료일 경우는 100줄만 변환되는 제약이 있는데 ……
dev |2021-12-05 | Comments (0)
HTML5 서식 유효성 검사 제어
HTML5 서식은 다양한 기능을 제공해서 과거에 자바스크립트로 구현해야만 했던 기능을 HTML에 속성을 추가하는 방식으로 대체 할 수 있다. 그중에 단연 유용한 기능은 서식 유효성 검사이다. 덕분에 나도 회사 내부용 관리 도구는 유효성 검사를 HTML5 기능만 사용해 만들어 왔다. 하지만 미려한 디자인이 요구된다든가 제공되는 기능만으로는 원하는 기능을 만들 수 없을 때에는 HTML 기능은 배제하고 자바스크립트로 기능을 만들어 왔다. 간만에 바닐라로 기능 구현할 기회가 생겨서 HTML 시맨틱을 유지하면서 커스텀 기능을 넣을 수 ……
dev |2021-11-24 | Comments (0)
엔터프라이즈 블록체인
오늘부터 엔터프라이즈 블록체인으로 출근한다. 아직 홈페이지도 없는 신생 기업인데 한화 시스템즈의 자회사다. 블록체인을 어떻게 비지니스로 풀어갈지 항상 궁금했는데 많은 공부가 될 것 같다. 출근해보니 할일도 많고 좋은분들도 많아서 즐겁게 일할 수 있을 것 같다.
work |2021-11-01 | Comments (1)