https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-pages Functions: getStaticPaths | Next.js Using Pages Router Features available in /pages nextjs.org next/router → router.isFallback으로 렌더링 인지 가능 const router = useRouter() if (router.isFallback) { return Loading... } 화면 처음 진입 시, getStaticProps 함수가 끝날 때까지 isFallback=true이기 때문에 이때 로딩바를 보여준다. 새 로고침해서 화면 진입 시 router.isFa..

에러페이지를 서버에서 제공하는 경우 비용이 증가되고, 서버에서 가져오기 때문에 느리다. 👉🏼 next.js에서는 static 파일로 에러페이지를 제공하고 있고 커스텀도 가능하다. 404 에러 페이지 커스텀 pages 하위에 404.tsx 생성 : export default () => { return 🤯404에러🤯 } 빌드를 하면 404 페이지가 정적으로 생성된다. server 에러 페이지 커스텀 404와 같은 client 에러는 static으로 만들어서 불필요한 서버 호출 막는 게 좋다. 하지만, 500에러와 같은 server 에러는 보통 정적으로 제공하지 않는다. 에러가 났을 때 서버에 로그를 찍는 등 서버로 에러를 보내는 경우가 많기 때문이다. 이에 맞춰 error 컴포넌트로 server 에러 페이지..

pre-rendering Next.js의 모든 페이지는 기본적으로 사전 렌더링을 한다. 👉🏼 더 좋은 퍼포먼스 👉🏼 검색 엔진 최적화 (SEO) pre-rendering의 2가지 렌더링 방식 둘의 차이는 = 언제 html 파일을 생성하는가? 1) 정적 생성 (static generation) - 프로젝트 빌드하는 시점에 html 파일 생성 - 모든 요청에 파일들을 재사용함 - 퍼포먼스 이유로 next.js는 정적 생성을 권고함 - 정적 생성된 페이지들은 CDN에 캐시 됨 - 주요 함수 : getStaticProps, getStaticPath 2) server side rendering (SSR, dynamic rendering) - 매 요청마다 html 생성 - 항상 최신 상태 유지 - 주요 함수 : g..

✅ react 기초 학습 https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us ✅ Notes 1장-09 : 'proxy' https://hyunseob.github.io/2016/08/17/javascript-proxy/ JavaScript 프록시(Proxy) Proxy As a Design Pattern 프록시는 일반적으로 다른 어떤 클래스의 인터페이스로 동작하는 클래스이다. (중략) 요컨대, 프록시는 내부적으로 실제의 객체(real subject)에..

이전 포스팅에서 이어지는 내용입니다 Create React App(1) - 개발환경 구축, npm WARN ... error!? React를 좀 더 쉽고 빠르게 학습하기 위해 React공식문서를 참고해 create-react-app이라는 React 샘플 웹앱을 설치하고 실행하려고 한다. https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react.. kkangdda.tistory.com 2. JS 코딩하기 1) 사용자정의태그, component public > index.html 살펴보기 src > index.js 살펴보기 import App from './App'; ... ReactDOM.render(, document.getElementB..

React를 좀 더 쉽고 빠르게 학습하기 위해 React공식문서를 참고해 create-react-app이라는 React 샘플 웹앱을 설치하고 실행하려고 한다. https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.reactjs.org 공식사이트에서는 Create React App이라는 Toochain을 제공해준다. 간편하게 개발환경을 구축하고 React를 빠르게 익힐 수 있다. 1. 개발환경 구축 ~ 샘플 앱 구동시키기 : (문제발생) npm WARN saveError ENOENT : no s..