📃 Front-End/Next.js

📃 Front-End/Next.js

Next.js - 뒤로가기 할 때 이전 스크롤 위치 유지

2022.12.21

_app.tsx const router = useRouter() useEffect(() => { window.history.scrollRestoration = 'auto' const cacheScrollPositions: Array = [] let shouldScrollRestore : null | {x: number; y: number} router.events.on('routeChangeStart', () => { cacheScrollPositions.push([window.scrollX, window.scrollY]) }) router.events.on('routeChangeComplete', () => { if (shouldScrollRestore) { const {x, y} = shouldScr..

📃 Front-End/Next.js

Dynamic Routes

2022.10.26

[slug] 값은 어떻게 활용할 것 인가? - pages/category/[slug].js slug 값에 따라서 우리가 원하는 페이지가 다르게 보여져야 합니다. 1. useRouter Next.js 에서 제공하고 있는 라이브러리 import { useRouter } from 'next/router' // 선언 const router = useRouter(); const { slug } = router.query; 1.1 category.js import { useRouter } from "next/router"; const CategorySlug = () => { const router = useRouter() const { slug } = router.query return ( Category {slu..

📃 Front-End/Next.js

Next.js - Assets, Meta data, CSS

2022.10.26

1. Assets 1.1 public 디렉토리 정적 데이터를 제공하는 경우 최상위 디렉토리의 public 를 이용하면 됩니다. 이미지 경로는 public 폴더가 / 로 매칭 됩니다. 1.2 최적화 되지 않은 이미지 그러나, 일반 HTML 의 img 를 사용하면 아래의 상황들을 수동으로 처리해야 합니다. 다양한 화면 크기에 이미지가 반응형으로 적용되는지 다른 툴 또는 라이브러리로 이미지 최적화 뷰포트에 들어갈 때만 이미지 로드 등 ... 하지만, Next.js 는 Image 를 처리하기 위해 즉시 사용 할 수 있는 구성 요소를 제공 합니다. 1.3 Image Component - 이미지 자동 최적화 Next.js 는 기본적으로 이미지 최적화도 지원 합니다. 이미지 크기 조정, 최적화와 최신 이미지 포멧 (..

📃 Front-End/Next.js

Next.js - Link

2022.10.26

Next.js 에서는 태그를 사용해서 페이지 이동하는 것을 반가워 하지 않습니다. 이유는, 앱 내에서 페이지를 이동 할 때 사용하는 특정 컴포넌트가 존재하기 때문 입니다. React 에서 React router link 를 사용하는 이유와 같습니다. 태그를 사용해서 페이지를 이동하게 되면 애플리케이션은 새로고침이 발생 합니다. Link 페이지간의 탐색을 CSR으로 진행 할 수 있습니다. Code Splitting이 페이지 별로 진행 되어 각 페이지에서 필요한 것만 로드할 수 있도록 합니다. 특정 페이지에서 오류가 발생하더라도 나머지 앱은 정상 작동 합니다. 라우팅 라이브러리가 필요하지 않습니다. next/link 가장 먼저 import 를 합니다. 별도의 설치는 필요하지 않습니다. import Link ..

📃 Front-End/Next.js

Next.js - Routing

2022.10.26

Next.js 의 Router 는 file-system 기반 file-system : 파일을 만들면 그 즉시 라우터로 인지되고 주소가 맵핑이 됩니다. pages/ src/pages/ 리액트에서는 별도의 Router 를 제공하지 않기 때문에 별도의 라이브러리를 사용해야 하지만, Next.js 는 기본적으로 제공을 합니다. pages/ OR src/pages 둘 중 우선순위는? 우선순위는 pages/ 가 우선 입니다. pages/index.js import Link from 'next/link' import { useEffect, useState } from 'react' export async function getStaticProps(){ console.log('server') return { props..

📃 Front-End/Next.js

Next.js - Pre Rendering

2022.10.26

1. React.js 의 방식 1.1 기존의 React 는 CSR 방식으로 화면을 렌더링 합니다. 클라이언트 측에서 화면을 직접 렌더링 합니다. 즉, 브라우저가 유저가 보는 UI 를 만듭니다. React 로 만들어진 화면의 모든 것은 HTML 소스코드 안에 들어있지 않습니다. React 로 만들어진 앱을 개발자 도구로 확인하면, 하나의 만을 가지고 있을 것 입니다. 브라우저가 HTML 을 가져올 때 비어있는 div 으로 가져옵니다. 그 후, 브라우저가 모든 자바스크립트를 요청해서 자바스크립트와 React.js 를 실행 시키고 그 다음 화면이 유저에게 보이게 됩니다. 1.2 만약 자바스크립트를 가져오는 속도가 느리다면? 사용자는 화면이 렌더링 되는 시간을 오래 동안 기다려야 할 것 입니다. 브라우저는 자바..

📃 Front-End/Next.js

Next.js - Data Fetching

2022.10.26

데이터 가져오기, 화면에 무엇인가를 그리려면 어디선가 데이터를 가져와야 합니다. 1. SSR (Server Side Render) 페이지에 대한 요청이 있을 때마다 서버에서 페이지를 만들어 반환 합니다. 서버에서 매번 연산을 해야하며 캐시를 사용하는 것이 상대적으로 어렵기 때문에 SSG에 비해 느립니다. 하지만 항상 최신의 정보를 보여주어야하는 경우, SSR를 사용하는 것이 좋습니다. (프론트)서버에서 HTML 파일을 만들어서 보내기 때문에 CSR에 비해 사용자가 더 빠르게 화면을 인식할 수 있습니다. 하지만 이벤트 등 페이지의 동작을 위해서는 hydrate라는 과정을 통해서 JS 코드가 실행되어야 합니다. 서버 가 그립니다. 그린다 : 데이터를 가져와서 나타낸다. 즉, 서버가 데이터를 가져와서 그린다...

📃 Front-End/Next.js

React의 문제점과 NextJS의 도입

2022.10.26

React의 번거로운 부분 리액트는 애플리케이션을 처음부터 빌드하려면 신경 써야하는 세부사항이 많습니다. Webpack으로 번들링 & Babel 컴파일러로 JSX → JS 로 변환 최적화 (Code Splitting 등)를 해야함 Static Pre-Rendering (성능과 SEO를 위해) / SSR 또는 CSR 를 해야함 리액트 앱과 데이터 저장소를 연결하기 위한 서버 측 코드 작성 NextJS: React 프레임워크 NextJS는 React 의 번거로운 점을 간편하게 해결 했습니다. 직관적인 페이지 기반 라우팅 (Dynamic routes 도 지원함) Pre-rendering, static generation (SSG), server-side rendering (SSR) 이 페이지 단위로 제공됨 자..

이전
1
2
다음

'📃 Front-End/Next.js' 카테고리의 글 목록

티스토리툴바