| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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
- components as formulas
- React
- useimperativehandle 사용할때
- express react
- 티스토리챌린지
- 프리렌더링
- useimperativehandle 사용법
- css module classNames
- app.listen
- useref 타입
- 리액트로 채팅 기능 구현하기
- trigger additional callbacks
- 리액트 19 useref
- CSS module 장점
- 이미지 업로드 과정
- 코드잇 스프린트 FE 1기
- node.js(express) + ws(websocket) + react
- dynamic metadata
- 회고
- next.js
- express로 채팅 기능 구현하기
- 특정 dom node만 노출시키고 싶을 때
- inferred type error
- type reference cannot be named error
- 리스티웨이브
- usemutation custom hook
- http.createserver
- pure functions
- 오블완
- 스프린트 여정 마침
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