히어로배너에 효과를 줄려고 document 나 localStorag 안되서 UseEffect 적용해봣더니.. 에러메세지가..!
It only works in a Client Component..? 잉? 그렇다 나는 Server Component를 작업하고 있는 것을 까먹고 있었다.
생각을 해보자. 클라이언트는 브라우져 렌더링을 컨트롤 하는 거고 , Next는 옛날 JSP 같이 서버에서 렌더링해서 그냥 데이터를 쏴주는 거다. 그니깐 상태관리를 못하징 .. 그리고 localStorage나 Document를 사용할 수 없다.
[렌더링 정리]
그래픽 마스터로써로 잊고 있었던 Client & Server side rendering 을 정리해보겠다.
렌더링이란 컴퓨터그래픽스에서 공부했던 연산(Compute)과 어떤 프로그램 뷰포트(게임프로그램,<canvas> 등)에 뿌려주는것(ㅇ
Client side rendering : 브라우져에서 연산 후 렌더링
Server side rendering: 서버에서 연산 후 렌더링 (추가 기록 )
[삽질기록]
--스타일 작업하면서 메모--
아니 그러면 Next 에서는 크롬 윈도우 객체들 사용 못하는건가?
https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
폰트보니깐 굉장히 신기하네.. Built in automatic self hosting ;; 개쩜
근데 https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
여기보니깐 _app 이 있넹! 근데 나는 app 라우터 사용하고 싶은데, 이건 page 라우터를 사용해야할는 것 같아
링크 자세히 보면 pages/building- 어쩌구 /optimizing/font임 걍
나는 Wendy one 폰트 쓰려고 하는데
https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts
얘네들이 추천하는 Variable fonts 에 해당안되서 내가 specify a weight 해줘야해
https://nextjs.org/docs/app/building-your-application/optimizing/fonts#using-multiple-fonts
여기서 Using Multiple Fonts 를 보고 폰트를 설정하면 됨 (export 빠져서 잠시 방황함)
자꾸 layout.js 파일이 보인다. -> 나중에 공부하긴 해야할것 같다.
https://nextjs.org/docs/app/building-your-application/rendering/client-components
Rendering: Client Components | Next.js
Learn how to use Client Components to render parts of your application on the client.
nextjs.org
그니깐 넥스트는 디폴트가 13버전이후로 모두 서버 컴포넌트 사용하는데 사이사이에 Client Component 넣어서 쓴다는 거임
위의 링크 보니깐 Client Component 디렉티브 달아주면 하위의 요소들까지 다 클라 컴포로 인식됨.
만약에 서버<-> 클라이언트간 데이터 주고 받을 일이 있으면 가능하면 서버 -> 클라이언트 로 하고
https://velog.io/@hwisaac/NextJSBeta-Server-and-Client-Components
NextJS(Beta): Server and Client Components
https://beta.nextjs.org/docs/rendering/server-and-client-components서버 및 클라이언트 구성 요소를 사용하면 서버 렌더링의 성능 개선과 클라이언트 측 앱의 리치 인터액티브 기능을 결합하여 응용 프로그램을
velog.io
방법은 여기에 적혀있음.
다시 이제 방법 대충 다 알았으니깐 디자인작업좀 하러 ㅂㅂ
Layout.js
이게 page.js 를 포함하는거네 <html> <body> 태그도 있고... -> 폰트는 여기다가 추가하면 되겠넹!
Radix
아 스타일하기 귀찮아서 라이브러리 쓸려고했는데.. 내가 _app 에 스타일 적용한거 아니여서 pure css 만 먹는데 아래 라이브러리는 막 변수같은거 있어서 custom 하는 방식으로는 못씀 (중단) 걍
https://medium.com/frontendweb/how-to-use-radix-ui-library-with-nextjs-c43a313116ef
How to use Radix UI Library with Nextjs?
Built the website with Tailwind CSS, Radix UI, and Nextjs
medium.com
https://github.com/vercel/next.js/discussions/17089
Selector ":root" is not pure · vercel/next.js · Discussion #17089
What's the meaning of this? error - ./styles/vars.css:1:1 Syntax error: Selector ":root" is not pure (pure selectors must contain at least one local class or id) > 1 | :root { | ^ 2 | --primary-col...
github.com
이거 보면 해결방법 알려주는뎅 module 방식으로 하면서 쉬운거 사용하려했는데.. _app을 재정의 하긴 해야할 것 같다.
나중에 테마css 끼고 사용해보고, 커스텀은 일단 손때야겠다.
