| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- useimperativehandle 사용할때
- 리스티웨이브
- 티스토리챌린지
- css module classNames
- 오블완
- next.js
- dynamic metadata
- pure functions
- express로 채팅 기능 구현하기
- 스프린트 여정 마침
- node.js(express) + ws(websocket) + react
- React
- components as formulas
- express react
- usemutation custom hook
- app.listen
- 코드잇 스프린트 FE 1기
- 프리렌더링
- 회고
- useimperativehandle 사용법
- trigger additional callbacks
- 이미지 업로드 과정
- 리액트 19 useref
- http.createserver
- 리액트로 채팅 기능 구현하기
- type reference cannot be named error
- useref 타입
- CSS module 장점
- inferred type error
- 특정 dom node만 노출시키고 싶을 때
Archives
- Today
- Total
목록CSS module 장점 (1)
Life is connecting the dots .
Next.js에서 CSS module, Styled-components 사용하기
최근에 React와 Next.js 프로젝트에서 CSS module과 styled-components를 사용해 보았다. 어느 방법이던 스타일 코드를 작성할 때 비슷한 부분이 많았지만 설정이 필요한 부분이나, 조건에 따른 스타일링을 적용방법, 주의할 점 등에 대해 새롭게 알게 된 점이 있어서 나중에 필요할 때 꺼내보고자 정리해 두려고 한다. CSS module 기본 사용법 CSS module의 기본 사용법은 다음과 같다. module.css 확장자를 사용하여 CSS 스타일 파일을 만들어 주고, 사용처에서는 해당 파일을 import해와서 사용하면 된다. import로 불러온 styles 객체 안에 있는 값인 CSS 파일에서 선언한 클래스 이름을 참조해서 className을 지정해 준다. 클래스이름이 .card..
Programming/Next.js
2023. 12. 2. 19:18