Blog
HTML5 서식 유효성 검사 제어
HTML5 서식은 다양한 기능을 제공해서 과거에 자바스크립트로 구현해야만 했던 기능을 HTML에 속성을 추가하는 방식으로 대체 할 수 있다. 그중에 단연 유용한 기능은 서식 유효성 검사이다. 덕분에 나도 회사 내부용 관리 도구는 유효성 검사를 HTML5 기능만 사용해 만들어 왔다. 하지만 미려한 디자인이 요구된다든가 제공되는 기능만으로는 원하는 기능을 만들 수 없을 때에는 HTML 기능은 배제하고 자바스크립트로 기능을 만들어 왔다. 간만에 바닐라로 기능 구현할 기회가 생겨서 HTML 시맨틱을 유지하면서 커스텀 기능을 넣을 수 ……
dev |2021-11-24 | Comments (0)
엔터프라이즈 블록체인
오늘부터 엔터프라이즈 블록체인으로 출근한다. 아직 홈페이지도 없는 신생 기업인데 한화 시스템즈의 자회사다. 블록체인을 어떻게 비지니스로 풀어갈지 항상 궁금했는데 많은 공부가 될 것 같다. 출근해보니 할일도 많고 좋은분들도 많아서 즐겁게 일할 수 있을 것 같다.
work |2021-11-01 | Comments (1)
인터넷으로 개인간 자동차 명의 이전하기
아내 명의로 되어 있는 차량을 내 명의로 바꿀 필요가 있어서 자동차 명의 이전을 알아봤는데 요즘은 개인간의 거래는 인터넷으로 가능하다고 한다. 기본적으로는 네이버에서 검색한 '자동차 명의이전 인터넷으로 하는 방법(직접 해본 경험을 바탕으로)'을 참고해서 진행해 봤다. 인터넷으로 진행한다고 해서 금방 끝나는 일이 아니다. 절차도 많고 실시간으로 바로 처리되지도 않는다. 자동화되어 있지 않고 사람이 개입하는 것 같다. 게다가 포털에서 신청할 수 있는 시간을 오전 9시에서 오후 4시까지로 제한을 했기 때문에 시간을 충분히 가지고 진 ……
life |2021-10-23 | Comments (2)
스크롤 있는 플렉스 박스에 패딩이 적용되지 않을 때
overflow: auto와 display: flex가 적용된 박스에 padding을 적용하면 오른쪽은 여백이 생기지 않는 버그를 사파리에서 발견했다. 컨텐츠에서 오른쪽으로 margin을 줘도 여백이 생기지 않는다. 하지만 전체 박스 크기에는 패딩이 영향을 미치고 있기 때문에 완전히 무시되는 것은 아니다. 스크롤 되는 영역에서만 여백이 생기지 않는 문제이다. 어떻게 할지 고민하다가 검색해 보니 비슷한 경우를 발견했는데 padding을 사용하지 않고 :before와 :after를 사용해서 마치 플로트를 클리어 시켜주듯이 가상 요 ……
dev |2021-10-20 | Comments (2)
배열 reduce에 초기값 지정
배열의 reduce를 접할 때 마다 뭘 '줄인다'는 것인지 잘 모르겠는데 개인적으로는 차원을 줄일 수 있어서 그런가 보다 정도로 생각하고 있다. 배열의 합을 구할때 이 reduce 함수가 아주 유용하고 MDN의 reduce 페이지를 보면 다양한 용례가 있다. 그동안 배열의 합을 잘 사용하고 있었는데 일부 경우에 동작하지 않는 것이 발견되어서 살펴보니 TypeError: Reduce of empty array with no initial value라는 타입 오류가 나고 있었다. let arr: number[] = []; ……
dev |2021-09-22 | Comments (0)
크롬이 웹에서 모달을 없앤다
모달이라고 하면 사이트별로 디자인해서 사용하는 레이어 팝업창이 떠오르지만 여기서 말하는 모달은 alert나 confirm, prompt와 같은 자바스크립트 기능을 말한다. 이 기본 모달이 사용자로 하여금 메시지의 출처를 헷갈리게 해서 보안 위험을 일으키고 있으니 크롬이 이 기능을 없애버리겠다고 한다. 뭔가 "랜섬웨어에 걸리지 않으려면 랜선을 뽑으세요."와 비슷한 느낌인데 우선 크로스 오리진 콘텐츠에서 이 기능을 없애고 최종적으로는 모든 곳에서 없앤다고 한다. 문제는 이 기능을 핵심적으로 사용하고 있는 사이트들이 웹에는 이미 너 ……
browser |2021-08-21 | Comments (1)
CSS-in-JS와 성능
리액트같은 컴포넌트 기반 도구를 사용할 때 CSS를 JS안에 포함(CSS-in-JS)시키는 도구를 많이 사용한다. CSS를 JS 안에 작성하면 컴포넌트 파일을 하나로 유지하면서 기능과 스타일을 같이 관리할 수 있어서 선호하는 사람이 많다. CSS가 JS안에 포함된 경우와 별도의 파일로 분리된 경우의 성능을 비교를 한 글(Real-world CSS vs. CSS-in-JS performance comparison)을 봤다. 결론부터 얘기하자면 원 글에도 나와 있듯이 결국 JS의 크기를 줄이는 것이 성능에 유리하고 결과적으로 CS ……
dev |2021-06-28 | Comments (0)
리액트와 스벨트 비교 글 몇 개
"Svelte for the Experienced React Dev" 글의 내용이 좋아서 공감가는 부분을 뽑아 봤다. 가감한 부분이 있어서 보다 자세한 내용은 원글을 보는 것이 좋다. 표준 CSS 구문으로 스타일을 지정할 수 있고 컴포넌트 범위로 스코프가 설정된다. 컴포넌트가 랜더될 때 마다 다시 실행되지 않고 한번만 실행되기 떄문에 메모이즈나 업데이트 조건 제어 같은 추가 코드가 필요 없다. 상태변경에 따른 실행이 필요할 경우 리액티브 구문(reactive statement)을 추가해서 사용할 수 있다. 하나의 컴포 ……
dev |2021-06-06 | Comments (2)
우분투에 최신 버전 노드 설치하기
우분투에 apt-get으로 노드(nodejs)를 설치했더니 10.X 버전이다. ESM(ECMAScript Module) 구문에서 오류가 나면서 스벨트킷 앱이 돌지를 않는다. 게다가 npm도 따로 설치해야 한다. 검색해보니 설치할 수 있는 많은 방법 중에 노드소스(NodeSource)에서 배포하는 판을 까는 것이 제일 권장되는 것 같다. 아래와 같이 PPA(Personal Package Archive)를 추가해서 설치하면 최신 버전의 노드를 설치할 수 있다. curl -fsSL https://deb.nodesource.co ……
dev |2021-04-21 | Comments (0)
Accessibility.kr에 스벨트킷 적용
피엠위키(PmWiki)로 구축해놓고 거의 방치되어 있던 Accessibilty Korea에 스벨트킷(SvelteKit)을 적용했다. Accessibility Korea는 예전에 접근성 관련된 일을 많이 할 때 정보화 진흥원에서 하지 않는 일들을 진행해 보려고 야심차게 만든 사이트였지만 많은 활동을 하지는 못했다. 장애인 웹 사용 실태 조사 빼고 나머지 내용은 크게 의미가 없는 것 같아서 이번에 싹 정리 했다. 웹 접근성 진단 서비스라는 좀 특이한 서비스가 돌아가고 있는데 예전 웹 접근성 품질마크 사전 평가에 사용되던 서비스다. 품질 ……
work |2021-04-18 | Comments (0)