바쁘다는 핑계로 너무 오랜만에 글을 올리는 것 같네요. 😥 1일 1커밋 그거 뭐 별일인가 하는 생각으로 살고는 있지만, 그것관 별개로 770일간 쌓아 올린 탑이 무너지는 건 슬픈 일이라 일하면서도 꾸준히 contribute은 진행하고 있습니다.그러다 보니 퇴근하고 코드 좀 치면 산책(매일 한 시간 이상은 뒷산을 걷습니다) 나갈 시간이라 블로그에 통 신경을 못 쓰고 있었네요. ua에 내장된 window.confirm,...
원활한 협업을 위해 ESLint나 Prettier 등의 도구를 활용하곤 합니다. 하지만 이를 로컬에서만 실행되게 하면 '설치하지 않는다', '무시한다' 등의 옵션이 존재하기도 하고, 설치가 제대로 되지 않았으나 설치가 된 줄 알고 작업하는 불상사가 벌어질 수도 있습니다. 더불어, 테스트 케이스 수준에서 걸러지는 오류를 처리하는 등 자동화할 수 있는 작업들을 Pull Request 시에 자동으로 처리하는 방법에 대해 알아보고자 합니다....
create react app으로 react 애플리케이션을 생성하면 이런 문제에 관해 크게 고민할 일이 없으나, 전 cra에서 snowpack을 거쳐 요즘은 vite를 쓰고 있기에, 테스트 환경을 알아서 구축해줘야 합니다. 참고로 vite는 Vue.js를 만든 Evan You가 제작한 빌드 도구로, Esbuild를 사용해 제작되었습니다.Webpack 등으로 개발 서버를 시작해 HMR을 사용해도, 코드 양이 늘어나기 시작하면 병목이 나타나기 마련입니다. Vite는 ES Modules, Esbuild를...
반응형 웹이란 말은 이제 쓰는 것조차 이상하게 느껴질 정도로 디스플레이의 크기에 맞는 화면을 보여주는 건 당연시되고 있습니다. 근데 단순히 디스플레이의 크기에만 모든 디자인을 맞추는 게 정답이 아닐 때가 종종 있습니다.예를 들어 사진만 표시되다 커서를 올리면 텍스트를 출력하는 등 다양한 상황에 :hover 선택자를 활용해 디자인하는데, 터치스크린에서 꾹 누르는 동작 등도 hover로 인식하기에 마우스 등의 장치가 없을...
Javascript를 이용해 HTML Canvas에 Dynamic Gradient를 그려 이미지로 출력하는 방법
![[CSS, JS] 노트, 원고지 만들기](https://marshallku.com/wp-content/uploads/2021/03/노트-원고지-만들기-400x400.png)
CSS와 자바스크립트로 노트와 원고지에 글을 쓰는 느낌을 주는 방법
grid-template-rows: masonry란 스펙이 작년에 추가되어 이제 자바스크립트 한 줄 없이도 Masonry 레이아웃을 구현할 수 있는 시대가 오긴 했지만, 크롬 최신 버전에서도 layout.css.grid-template-masonry-value.enabled를 활성화해야 작동할 정도로 브라우저 지원율이 처참한 수준입니다. 모든 요소의 position을 absolute로 준 뒤 JS에서 위치 지정 (CSS + JS) (세로로 요소가 정렬되어도 상관없다면) Flex box 등으로 레이아웃 지정 (CSS) grid-auto-rows와 grid-row-end를 활용해 레이아웃...
자바스크립트 라이브러리가 별로인 이유 이미 하이라이팅이 끝난 html을 사용하기에 클라이언트가 할 일이 줄어든단 점, .cshtml등의 파일은 지원하지 않는 라이브러리가 많단 점을 제외하고 단순히 하이라이팅된 결과물만 봐도 보통 VSC가 압도적으로 우세합니다.훨씬 정교한 하이라이팅에 다양한 테마까지 지원되니 한 번 써보시면 도대체 라이브러리가 왜 필요한가 싶으실 겁니다. 일렉트론을 기반으로 구동되기에, html 에디터만 있으면 하이라이팅 된 html을 복사할 수...
평소 즐기는 게임인 스도쿠를 푸는 앱을 만들어봤습니다.
