Next.js (3) 썸네일형 리스트형 [Next.js] [Page Router] Page와 Routes 설치하기 Next.js 12 에는 페이지라우터 방식을 사용한다. 다음과 같이 필요에 따라 패키지를 설치한다. npx create-next-app [프로젝트 이름] ➜ ~ npx create-next-app pages-test ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … [No] / Yes // NO [페이지라우터] 방식.. [Next.js] Rendering Rendering JavaScript 를 이용해서 HTML 을 만드는 행위로, 기존 SPA 를 만들 때 사용하던, CSR 의 rendering 표현에 가깝다. const element = ( Hello, world! ); // JSX의 동작 -> Javascript로 HTML 태그를 만든다. const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); Pre-rendering Client 에 HTML 이 이미 로드가 된 이후가 아닌, 이전에 JavaScript 를 이용해 HTML 을 만드는 것을 말한다. 언제 HTML 을 만드느냐에 따라서, SSR (Server Side Rendering), SSG (Stat.. [Next.js] MPA 부터 SSR 까지 MPA(Multi Page Application) 원시적인 서버사이드 렌더링 방식으로, 페이지 이동시나 렌더링시 깜빡 거리는 것으로 유저 사용성을 저하시킨다. 이를 보완하기 위해 CSR 방식의 React 를 사용해서 SPA 를 만들기 시작함. /about → about.html /profile → profile.html SPA (Single Page Application) - CSR (Client Side Rendering) React 의 SPA 를 이용하게 되면서 새로고침이나 깜빡임 없이 유저 사용성이 개선되었으나, 단점이 존재한다. 자바스크립트 번들 사이즈가 커짐에 따라서 초기 로딩 속도가 증가하는 것 (클라이언트 사이드 렌더링의 문제점) 빈 HTML 부터 시작해서 시간이 오래 걸림. // React.. 이전 1 다음
