CSS Module
사내 프로젝트 중에서도 [파일명].module.css를 사용하는 것이 있었고
이번에 Next.js 강의를 들으면서도 [파일명].module.css가 있었다
이 것의 사용법은 이러하다
// layout.module.css
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
border-bottom: 1px solid #132f52;
}import styles from "./layout.module.css";
export default function RootLayout() {
return (
<html lang="en">
<body>
<header className={styles.header}>
<h1>Demo Note</h1>
</body>
</html>
);
}
- 사용 시 클래스 명이 고유하게 생성된다
- 고유한 클래스명 덕분에 클래스명을 지을 때 중복에 대한 고민을 하지 않아도 된다
- module.css는 Post css라고 한다
- 현재 Next.js로 만든 프로젝트는 별도의 모듈 설치없이도 module.css를 사용할 수 있다
- CRA를 eject 해보면 postCss관련 라이브러리들이 설치되어있는 것을 확인 할 수 있다
- Next.js에서도 유사하게 이미 포함되어있는 것 같다
- PostCSS가 뭔지 알아보자
Post CSS
- A tool for transforming CSS with JavaScript
- 자바스크립트로 CSS를 변환하는 도구
- CSS 후처리기, CSS 작성을 더 편하게 만들어주는 javascript 도구(plugins)이다
- Post CSS 플러그인 종류
- auto prefixer
- PostCSS Preset Env
- CSS Modules
- stylelint
- Post CSS는 CSS를 작성하면 웹팩으로 컴파일 할 때 자바스크립트로 변환 과정을 거치면서 CSS를 더 편리하게 사용할 수 있게 도와주는 도구이다
CSS module 과 같이 사용하면 좋은 라이브러리
- clsx와 classnames 중 택 1
참고
움직이는 만큼 행복해진다