Next.js를 사용하시는 분들이라면, 공부를 해보신 분들이라면 "use client"로 페이지 렌더링을 어떻게 할지 설정한 경우가 있을 거에요. 아 혹시!! 렌더링을 설정한다는 것도 모르겼나요?? 괜찮습니다. 제가 그랬거든요.오늘은 "use client"!!!!"대체 언제 써야 하고, 왜 중요한 거지?" 에 대해서 알려드릴게요!1. Next.js: 서버에서? 브라우저에서?Next.js는 SSR(서버 사이드 렌더링) 덕분에 서버에서 HTML을 미리 만들어서 쏴줍니다. 덕분에 SEO에도 좋고 초기 로딩도 빠르죠! 근데… 모든 걸 SSR로 해결할 수는 없어요. 🤔 예를 들어, 우리가 버튼을 클릭하거나 스크롤 이벤트를 처리하고 싶다면 브라우저에서 실행해야겠죠?여기서 바로 CSR(클라이언트 사이드 렌더링)이 ..

프로젝트를 진행하면서 Next.js에서 갑작스럽게 4094 에러가 발생하기 시작했습니다. 처음에는 프로젝트가 정상적으로 작동했지만, 진행되면 될수록 이 에러가 점점 빈번해졌습니다. 에러 해결을 위해 다양한 방법을 시도했지만 쉽지 않았고, 결국 스스로 문제의 원인을 찾아 해결하게 된 과정을 공유하려 합니다.처음 4094 에러가 발생했을 때, 저는 먼저 구글링을 통해 문제를 해결하려 했습니다. 하지만 이 에러에 대한 정보는 거의 없었고, Stack Overflow와 GitHub에서도 명확한 해결책을 찾기 어려웠습니다. 대다수의 답변이 이 에러에 대해 잘 모른다는 것이었습니다.1. 재부팅과 기본적인 해결책 시도일반적으로 시스템에서 문제가 발생하면 재부팅부터 시도하는 것이 첫 번째 방법입니다. 저는 VSCode..

웹 개발을 하다 보면 한 번쯤 들어봤을 리액트(React)와 넥스트.js(Next.js)!이 둘의 차이점 중 하나는 바로 렌더링 방식이야. 그럼 이 두 강력한 툴의 렌더링에 대해 알아볼까? 🔥리액트: 클라이언트 사이드 렌더링(CSR)의 대표주자! 🌐리액트는 클라이언트 사이드 렌더링(CSR)을 사용해. 여기서 "렌더링의 주체가 클라이언트"라는 말이 무슨 뜻이냐고? 쉽게 말해, 웹 브라우저에서 모든 걸 처리한다는 뜻이지.리액트 렌더링 방식웹 브라우저에서 렌더링이 이루어짐페이지 소스를 보면 자바스크립트로 가득 찬 파일들만 보임검색엔진 최적화(SEO)에 불리할 수 있음 🤔리액트 공식 홈페이지에 가서 페이지 소스를 보면, 실제 화면에 보이는 텍스트나 버튼 등이 HTML 소스에는 없고, 자바스크립트 파일로만 ..