Dev Diary 💻

Intro 안녕하세요. 이번시간에는 Next의 Link와 MUI(Material-UI)의 Link 차이점에 대해 알아보겠습니다. Next의 Link와 MUI(Material-UI)의 Link Next.js + React + MUI 조합으로 개발경험이 있으신 분들이 꽤 있으실 텐데요, 개발하다보면 Link 컴포넌트를 거의 필수로 사용하게 됩니다. Next.js와 MUI 에는 공통으로 Link 컴포넌트가 들어있습니다. 보통 자동 IDE 툴을 사용하면 자동으로 import 하는 경우가 많은데요, 꼭 확인하고 import를 하셔야 합니다. Next.js의 Link와 MUI(Material-UI)의 Link는 목적이 다른 요소이기 때문입니다. Why? Next.js의 Link 컴포넌트 Next.js의 Link 는..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 86. 모듈 개요 Next.js를 이용하면 풀스택 React 앱을 구축할 수 있습니다. Next.js는 서버 사이드에서 페이지를 사전 렌더링 해줍니다. Next.js는 코드 실행에 있어서 클라이언트 사이드 뿐만 아니라 React 앱이 실행되는 사용자의 브라우저 뿐만 아니라 서버 사이드에서 코드를 실행할 때도 도움을 줍니다. 페이지에 표시되어야 하는 데이터를 준비하거나 로딩하는 작업을 돕는다는 의미입니다. 데이터 fetching이 무엇인가 Static VS Server-side Page 어떻게 데이터 fetch 하는가 이 의미에 대해 자세히 살펴보도록 합시다. 87. ..

Intro next js 를 사용하던 도중 아래와 같은 에러가 발생하였습니다. Error: The default export is not a React Component in page: "/" Why? 에러가 난 코드를 확인해보니, export 만 하고 default 를 적어주지 않았습니다. Next.js에서는 default로 export를 해야 에러 없이 정상 작동 되기 때문입니다. export function HomePAge() { const featuredEvents = getFeaturedEvents(); return ( ); } How to solve the problem export default 코드를 추가해주면 됩니다. 🙌 export default function HomePAge() { ..