Next.js에서 window 등 client 객체 사용하기
- Next.js는 기본적으로 SSR임
- 따라서 평소처럼 window, document 등 client에서 쓰는 객체를 평범하게 사용하려고 하면 반드시 error가 남
- 위와 같은 객체들은 꼭 useEffect를 통해 mount 되고 사용하는 것을 추천함
Next.js에서 window 객체를 사용해 화면 크기를 구하는 hook 예제
How to detect window size in Next.js SSR using react hook?
I am building an app using Next.js and react-dates. I have two component DateRangePicker component and DayPickerRangeController component. I want to render DateRangePicker when the window's width is
stackoverflow.com
tailwind css의 mobile first
- tailwind는 mobile first임
- 따라서 반응형으로 스타일링을 할 때, mobile을 default로 하고, pc를 옵션으로 설정해야 함(mobile을 타겟으로 하는 것들 sm:...등은 사용하지 않아야 함
https://tailwindcss.com/docs/responsive-design#mobile-first
Responsive Design - Tailwind CSS
Using responsive utility variants to build adaptive user interfaces.
tailwindcss.com
'TIL(Today I Learned) > 2022년' 카테고리의 다른 글
| 04.09 - 유튜브 영상 controller처럼 3초후 show / hide 구현 (0) | 2022.04.10 |
|---|---|
| 03.23 - react-sortable-tree 사용 시 에러 npm dedupe 로 해결 (0) | 2022.03.23 |
| 02.21 - 자바 챔피언 양수열님의 조언 (0) | 2022.02.22 |
| 02.14 - input에서 한 글자 입력 후 focus를 잃는 현상 / string으로 js object 값에 접근하기 (0) | 2022.02.16 |
| 01.25 - 브라우져별 지원하는 동영상 format이 다를 수 있다 (0) | 2022.01.25 |