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 는..

Intro 안녕하세요. 이번시간에는 Next.js에서 Viewport(뷰포인트)를 설정하는 방법에 대해 알아보겠습니다. How to apply viewport in nextjs _document.js 파일을 사용하여 아래와 같이 전체 페이지에 meta 태그를 추가해주면 됩니다. import Document, { Html, Head, Main, NextScript } from 'next/document'; class MyDocument extends Document { render() { return ( ); } } export default MyDocument;

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 124. 모듈 요약 getStaticProps 함수도 실행해보고 유효성 재검사 옵션을 통해 해당 컴포넌트가 배치되고 주기적으로 재생성하게 설정해봤습니다. 또한 getStaticPaths 함수를 결합하여 동적 페이지를 생성했고 폴백 옵션을 추가함으로써 예상되는 모든 경우의 인스턴스에 알아서 대응할 수 있도록 했습니다. getServerSideProps 함수도 실행하는 걸 확인했습니다. 하지만 클라이언트 사이드 데이터 페칭으로 전환했습니다. 그 함수는 다음에 실습할 수 있습니다. 이제 여러분은 Next.js에서 쓸 수 있는 데이터 페칭의 핵심 구조를 배웠습니다. 그중 일..

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

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 69. 모듈 개요 이번 섹션에서는 이벤트 앱을 간단하게 만들어보도록 하겠습니다. 이벤트 목록을 확인하고, 그 중에서 한 이벤트를 선택할 수도 있습니다. Creat a Complete NextJS Project From Scratch Add Static & Dynamic Routes Add Regular Components & Connect Everything! 70. 프로젝트 계획 / : Startign PAge (show featured Events) /events: Events Page (show all Events) /events/event> event-item..

Intro Next.js를 사용하던 도중 다음과 같은 에러가 발생하였습니다. Error: Invalid with child. Please remove or use Why? {props.children} next/link 를 활용하여 Link 태그 안에 a 태그를 넣어줬던 코드에 문제가 있었습니다. 에러 화면에 나와있는 Next.js 사이트에 한번 접속해봤습니다. (https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor) Why This Error Occurred Next.js 13버전이 나오면서, Link 태그는로 렌더링 되므로 를 사용하는 시도는 유효하지 않다고 하네요! How to solve the problem npx @next/co..

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() { ..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 52. 모듈 개요 파일 기반의 routing, 정적 및 동적 routes, 페이지간의 네비게이팅에 대해 배울 예정입니다. 53. 시작 설정 Setup 사이트 소스 코드 참고 54. 파일 기반 라우팅이란 무엇일까? React.js는 react-router-dom을 사용하여, 라우트를 진행합니다. 하지만 Next.js는 라우터를 설치하지 않고, 라우트와 페이지 구조를 정의하는 데 JSX와 JS 코드를 사용하지 않습니다. Next.js에서는 React 컴포넌트 파일을 생성합니다. 특별한 폴더에 일반적인 React 컴포넌트 파일을 생성합니다. 이후 Next.js가 설정된 폴..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 1. Welcome to the Coursel 시작하도록 하겠습니다. 꾸준히 화이팅 🤟🤟 2. Next.js란 무엇인가? Next.js를 왜 사용하는 걸까? NextJS는 프로덕션용 React 프레임 워크 입니다. 큰 규모의 프로덕션용 React 앱을 쉽게 구축할 수 있도록 해주는 많은 기능을 가지고 있습니다. ReactJS는 사용자 인터페이스 구축을 위한 JS 라이브러리입니다. 즉 Third Party 패키지로 프론트 엔드 프로젝트에 추가되는 라이브러리 입니다. 결국 클라이언트 측 JavaScript 코드라는 이야기 입니다. 주로 사용자 인터페이스 부분인 컴포넌트,..

Intro Next.js로 구현된 프로젝트에서 특정 페이지들을 숨기는 요청사항이 들어왔습니다. 보통 Next.js는 pages라는 폴더 하위에 파일 혹은 폴드를 작성하게 되면 해당 파일/폴더를 자동으로 라우팅 해줍니다. 처음 단순하게 NavBar 네비바에 있는 특정 link tag 를 주석처리했지만, url로 해당 페이지 직접 접근시 접근이 가능했습니다. How to do Next.js의 공식 문서를 살펴보면, Next.js는 Redirects라는 기능을 제공하고 있습니다. 위 기능은 Next.js 프로젝트 폴더 root에 있는 next.config.js 파일에서 설정할 수 있습니다. Redirects Redirects allow you to redirect an incoming request path ..