Redux Router v6 Documentation
리액트 라우터 용어
- location: 유저가 있는 곳을 나타내는 객체, URL과 다른 추가적인 것들도 들어있음
- location state: URL로 인코딩 되지 않는 location과 함께 지속되는 값
- History Stack: 브라우저가 저장하고있는 방문 히스토리 뒤로가기 버튼을 click & hold 하면 history stack을 볼 수 있다.
- History action: POP, PUSH, REPLACE 를 동해 history stack을 변경
- Segment: / 사이에 있는 글자들,
/user/123은 2개의 segment를 가지고 있다. user와 123 - Path pattern: URL처럼 보이지만 Dynamic segment
("/users/:userId")또는 Star segment("/docs/*")와 같은 특수 문자가 있을 수 있음 - Dynamic segment: 동적으로 변경되는 segment
- URL Params: dynamic segment에 매칭되는 URL로 부터 파싱된 값
- Router: top level 컴포넌트, 다른 컴포넌트와 hook들을 사용가능하게 해 줌
- Route Config: routes object 트리
- Route: { path, element } 혹은
<Route path element>형태 객체, path가 일치하면 element 렌더 - Match: route가 URL에 매치되었을 때 url, pathname 등 정보를 보관하는 객체
- Matches: 현재 location에 매칭되는 routes 배열, 이 구조는 nexted routes를 가능하게 한다.
- Outlet: matches 집합에서 다음 일치 항목을 렌더링하는 컴포넌트
location
{
pathname: "/bbq/pig-pickins",
search: "?campaign=instagram",
hash: "#menu",
state: null,
key: "aefz24ie"
}location search
지정된 매개변수에 값을 할당
// given a location like this:
let location = {
pathname: "/bbq/pig-pickins",
search: "?campaign=instagram&popular=true",
hash: "",
state: null,
key: "aefz24ie"
};
// we can turn the location.search into URLSearchParams
let params = new URLSearchParams(location.search);
params.get("campaign"); // "instagram"
params.get("popular"); // "true"
params.toString(); // "campaign=instagram&popular=true",location hash
현재 페이지 scroll position 표시에 사용
location state
url에 보이지 않는 값들
하위 컴포넌트에 데이터 전달 가능
location key
각각의 location은 unique key를 가진다
location based scroll management, client side data caching 등에 유용하다
react router location key 이용하여 data caching 해보기
Next.js 입문하기
직관적인 페이지 기반 라우팅 시스템
페이지별 Pre-rendering, Static Site Generation, Server Side Rendering
빠른 페이지 로드를 위한 자동 코드 스플리팅
최적화된 prefetching 과 Client side routing
Sass 제공, css in js 라이브러리도 사용 가능
Fast Refresh 지원
serverless function으로 API endpoint 빌드 할 수 있는 API routes 제공
확장 가능
현재 learn basics navigate beween pages까지 진행 assets, metadata, and css 공부 할 차례
Assets, Metadata, and CSS
The second page we added currently does not have styling.
Let's add some CSS to style the page.
NExt.js has built-in support for CSS and Sass.
For this course, we will use CSS.
This lesson will also talk about how Next.js handles static assets like images and page metadata like the <title> tag
What you'll learn in this lesson
how to add static files (images, etc) to Next.js
How to customize what goes inside the <head> for each page.
How to create a reusable React component which is styled using CSS Modules.
How to add global CSS in pages/_app.js.
Some useful tips for styling in Next.js
Prerequisites
Basic CSS knowledge. This course will go over how to add CSS in a Next.js app, but it won't cover CSS fundamentals.
If you're looking for detailed documentation on Next.js styling, take a look at the CSS documentation.
Next.js는 정적 자원들, 이미지 같은 것들을 top-level 'public' 디렉토리에 지원.
img tag 대신 최적화된 Image 컴포넌트를 사용
