즐겁게, 코드

QT나 WPF 등 비교적 허들이 높은 프레임워크 대신 electron이라는 프레임워크를 사용하면, 웹 개발자들도 굉장히 빠르게 데스크탑 어플리케이션을 개발할 수 있게 됩니다. 여기에 그치지 않고 electron-react-boilerplate(ERB) 라는 보일러플레이트를 활용하면 SPA 기반 웹 서비스를 개발하는 것과 거의 유사한 경험으로 데스크탑 어플리케이션을 개발할 수 있게 되는데요, 이 글에서는 ERB를 사용할 때 데스크탑 어플리케이션을 개발할 때 TailwindCSS(테일윈드)를 적용하는 방법을 정리합니다. 본 글은 ERB 문서에서 제공하는 방법으로 스캐폴딩이 완료되었음을 전제로 합니다. TailwindCSS 테일윈드를 적용하기 위해서는 테일윈드 설치 + ERB 설정의 두 단계가 필요한데요, 먼..

오늘은 Tailwind CSS의 실험적인 기능 중 하나인 JIT(Just-In-Time) 모드를 가볍게 소개해보려 합니다. function App() { return ( “테일윈드 CSS는 커스터마이징하기도 쉽고, 빌드 결과물도 가볍고, 무엇보다 엄청나게 빠른 속도로 스타일링이 가능하다는 장점이 있습니다.” Chanmin, Kim 프론트엔드 개발자 인턴 ); } export default App; 테일윈드 CSS를 적용하면 클래스명이 조금 난잡해진다는 댓가를 치르는 대신 엄청난 생산성을 얻게 됩니다. 다만 이렇게 예약된 클래스명을 통해 스타일을 지정하다 보니, 원하는 스타일이 클래스명으로 예약되어 있지 않은 경우에는 별도의 CSS 파일을 생성하거나, 테일윈드 설정 파일을 수정하거나, Emotion 등 C..

📋 내용 : Tailwind CSS의 클래스로 스크롤바 숨기기 한 페이지에 컨텐츠가 전부 표시되지 않을 경우, 브라우저는 스크롤바를 통해 화면을 스크롤할 수 있게 합니다. 다만 이 스크롤바가 디자인을 해치는 경우가 있어서 스크롤바를 숨기고 싶은 경우도 많이 생기는데요, w3schools 에 나와있는 스크롤을 숨기는 방법을 살펴보겠습니다. /* 클래스명이 example인 요소의 스크롤바를 숨기는 코드 */ .example::-webkit-scrollbar { display: none; } .example { -ms-overflow-style: none; /* IE and 엣지 */ scrollbar-width: none; /* 파이어폭스 */ } 이 방법은 분명 동작합니다! 다만 추가적인 CSS 파일 생성..