이제 막 navbar 만들려고 하는데 에러가 하나 발생했다."In HTML, v> cannot be a child of .This will cause a hydration error."  태그는 문서의 최상위 요소로 와 만 포함할 수 있다.는 태그 안에서만 쓸 수 있는데 의 직접적인 자식이 되면 이런 오류가 난다고 한다.  layout.tsx를 보니 Navbar가 body 바깥에 있다는 걸 확인할 수 있었다.줄 한 칸차이로 이런 오류가 발생하기도 하니 주의하도록 하자.

next 프로젝트를 만들면서 emotion을 사용해보기로 했다.css-in-js가 가능하고 styled-component 형식으로 css 짤 수 있다는 것이 장점이다.특히 토스에서 emotion을 사용한다고 하기에 나도 당장 써보기로 했다. 그런데... 뭔가 이상하다6시간째 에러만 해결하고 있다.next 13 부터는 app router 방식이 사용되는데아직 emotion의 app router 방식에 대한 SSR 지원이 제한되어 있기 때문에client 컴포넌트로 밖에 사용하지 못하는 것 같다. (근데 이럼 next 쓸 이유가...) emotion은 css-in-js 라이브러리인데이 동작방식이 SSR 동작 방식과 상충되는 부분이 있기 때문이다. (하이드레이션 이슈) 결론 : tailwind css나 쓰자

emotion 사용하려고 Global.tsx 만들고 layout에 import 함import { GlobalStyle } from '@/styles/Global' 근데 빨간줄 뜨면서 에러뜸Module '"@/styles/Global"' has no exported member 'GlobalStyle'. Did you mean to use 'import GlobalStyle from "@/styles/Global"' instead?ts(2614) 철자를 틀렸나 싶어서 스펠링 틀린그림 찾기 했는데 다른점 안보인다.뭔 말인지 모르겠어서 gpt한테 물어보니 중괄호가 문제라고 한다.  import 할때 중괄호 치고 안치고의 차이 export 에는 default export 와 named export 가 있다.쉽게..