📅 오늘 한 일
1. better 와이어프레이밍
2. UI 작업 시작
✏️ 무엇을 배웠나
1. 'use client'
next.js는 SSR이나 SSG 같은 pre-rendering이 기본값이다. 서버에서 HTML이 미리 렌더링된 다음에 클라이언트에 전달되는 구조다. 서버에서 받은 초기 HTML은 상호작용이 불가능하다. 웹을 동적으로 만들어주는 건 JS 코드인데 JS 코드는 클라이언트인 브라우저 상에서 돌아가기 때문임.
next.js 문서를 보면 서버 컴포넌트와 클라이언트 컴포넌트를 구분하고 있는데 이 둘 사이의 경계선으로 작용하는 게 'use client'
OnClick 이벤트라든지 상호작용이 필요할 때는 클라이언트 컴포넌트가 시작되는 지점에서 'use client'를 선언해줘야 함.
2. next.js 13에서 스타일드 컴포넌트 적용
리액트에서 썼던 것처럼 하니까 스타일드 컴포넌트가 작동하지 않았다. 공식 문서 찾아보고 해결했는데 생각해보니 당연한 일이다. 스타일드 컴포넌트는 css-in-js 중에 하나이기 때문에 서버 컴포넌트에서는 사용할 수 없었던 것. 공식 문서에서도 css-in-js는 런타임 js가 필요하기 때문에 서버 컴포넌트에서 지원하지 않는다고 말하고 있다.
참고 : 현재 emotion은 지원하지 않고 있다
참고 : 서버 컴포넌트의 스타일 지정을 위해서 CSS나 Tailwind를 사용하는 게 좋다고 하고 있음
🥵 무엇이 어려웠나
1. 디자인
완벽주의를 내려놓기가 어렵다. 디자인이 아쉽고 괜찮아 보이다가도 다시 보면 아쉽고 시간만 흘러가서 결국 일단락하고 작업을 시작했는데 지금도 너무 아쉽고 갈아 엎어버리고 싶다!
🏷️ 오늘의 코멘트
이번 기회에 Tailwind를 써볼까
⛰ 프론트엔드 개발 공부 블로그