NextJS
1.[Next.js] 페이지 라우팅 1
Next.js의 페이지 라우팅 pages /pages 폴더 안에 작성한 폴더와 파일이 url 경로가 된다. 1-1. /pages/index.js 파일에 작성한 컴포넌트는 / 홈 페이지가 된다. 1-2. /pages 하위에 items 폴더를 만들고 파일을 만들면
2.[Next.js] 페이지 라우팅 2
next.config.js 파일에 recdirects()를 추가해 특정 주소에 대해서 리다이렉트할 주소를 지정할 수 있다. permanent 속성 : false로 하면 307 Temporary Redirect를 하고, permanent: true로 하면 브라우저에 리다
3.[Next.js] Image 컴포넌트
Image lazy loading 을 지원하여 해당 이미지가 필요한 순간에 불러오기 때문에 초기 로딩 속도가 빨라진다 이미지 크기 최적화 크기를 반드시 지정해주어야 한다 반응형으로 하고 싶은 경우 부모의 position을 정하고 fill 속성으로 채울 수 있다.
4.[Next.js] Head 컴포넌트, google font 적용
next/head 에서 <Head> 컴포넌트를 import 해서 html 파일의 <head> 태그에 넣고 싶은 내용을 넣을 수 있다.<title> 태그 에 웹 페이지 제목을 넣을 수 있다<link> 태그 에 favicon을 넣을 수 있다/publ
5.[Next.js] 프리랜더링
: 웹 브라우저가 페이지를 로딩하기 이전에 렌더링하는 것 정적 생성(Static Generation) 과서버사이드 렌더링(Server-side Rendering)으로 나뉜다. Next.js에서는 기본적으로 모든 페이지를 정적 생성합니다.: 프로젝트를 빌드하는 시점에 미
6.[Next.js] css 적용 방법들
className을 string 이 아닌 객체의 프로퍼티 형식으로 작성해야 한다.\_app.js 파일 외 모든 파일에서 일반 .css 파일은 불러올 수 없으므로, .module.css 파일을 import 해서 사용해야 한다. 각 파일이 모듈화 되어 있으므로 중복되는 c
7.[Next.js] redirects, rewrites
동적 URL 에서 :(콜론) 과 \*(별표) 뜻/주소/:콜론 : 뒤에 변하는 params 도 포함/products/123 ⇒ /items/123 으로 이동한다/주소/\*별: 뒤에 어떤 주소가 오든지 모든 주소 포함/products/abc/123/def/456 ⇒ /it
8.[Next.js] url의 query string으로 데이터 넘기기
Next.js의 useRouter 를 활용하면Home 화면에서 각각의 detail 한 상품 (위 움짤에서는 movie) 페이지로 넘어갈 때 ,URL 의 query string으로 데이터를 넘겨주면서 유저가 보는 URL에는 해당 내용들이 보이지 않도록 숨길 수 있다.이렇
9.[Next.js] 페이지 라우팅 3. [id] 와 [...params]
/movies/1, /movies/2... 와 같이 동적 페이지 라우팅을 하고 싶은 경우 /pages 폴더 하위에 /movies 폴더를 만들고 \[ 대괄호 ] 로 감싼 파일명을 생성하면 된다./movies/abc/123/def/456 와 같이 여러 pathname 으로
10.[Next Js] 단계별 페이지 이동 관리하기 (feat. 토스 funnel)
들어가기 토스 front accelerator 1기에 선정 되어서 멘토링 커리큘럼 목차를 보다가 '퍼널간 상태관리'가 뭐지? 해서 유튜브를 찾아봤더니 토스ㅣSLASH 23 - 퍼널: 쏟아지는 페이지 한 방에 관리하기 위 영상이 나왔다. 그런데 영상 속 리팩토링 전 코