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