즐겁게, 코드

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

Tailwind CSS가 요즘 새로운 CSS 프레임워크로 떠오르고 있습니다. Tailwind CSS는 부트스트랩처럼 클래스명을 통해 전처리된 스타일을 적용할 수 있지만, 여기에 더해 tailwind.config.js 파일을 통해 다크 모드 설정, 추가할 플러그인 등 부트스트랩보다 훨씬 광범위하고 편리한 커스텀 기능을 제공합니다. 음... 사실 이렇게 말씀드리면 잘 와닿지 않으실 수도 있어 공식 문서의 예제를 하나 빌려보겠습니다. ChitChat You have a new message! 위 UI를 구현하기 위해서는 이렇게 장황한 CSS가 필요합니다. 만약 CSS에 익숙하지 않다면 여기서 더 헤매야만 하겠죠. 그러나 테일윈드를 활용하면, 이 장황한 코드가 놀랄 만큼 줄어들게 됩니다. ChitChat You..

CSS의 확장팩 중 하나인 Scss에서는 정말 많은 편의기능을 제공하는데요, 오늘은 여러 기능들 중 다른 Scss 파일을 불러올 수 있는 import 기능에 대해 알아보겠습니다. components │ ├── Button │ ├── Button.jsx │ └── Button.scss ├── Card │ ├── Card.jsx │ └── Card.scss ├── Header │ ├── Header.jsx │ └── Header.scss │ ├── App.scss └── App.jsx ... 위의 폴더 구조는 제가 이전에 애용하던 컴포넌트 폴더 구조입니다. 폴더별로 컴포넌트와 스타일 파일을 관리하는 방식은 나쁘지 않지만, scss를 활용한다면 더 멋지게 폴더 구조를 개선할 수 있습니다. components ..

머터리얼 UI(Material UI) 기반 컴포넌트를 꾸밀 때는 makeStyles라는 커스텀 훅과 객체를 사용해 CSS를 꾸미게 된다. 예를 들어 클래스명이 'card' 인 요소를 꾸미는 방법은 이런 식이다. import React from "react"; import { Card, makeStyles} from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ card: { width: "80%", height: "20%" }, })) const CardContainer = () => { const classes = useStyles(); } 자바스크립트에서 객체를 사용하는 문법을 아는 사람이라면 뭔가 이상한 점이 하나 보일 것이다. "..