클론코딩 강의를 들으면서 나오는 개념에 대해 기록해보려고 한다.
강의에 나오는 개념만 적은 것도 있고 조금 더 공부해서 기록한 내용도 함께 기록 중.
기본 개념
Public 파일: 해당 서버를 사용하는 모든 사람이 접근할 수 있음. 공용으로 사용하는(모두가 접근해도 괜찮은)이미지 파일 등을 저장. 웹에서 접근하면 안되는 이미지 파일은 저장X
@/ : src파일
파일구조 : page -> layout의 children안으로 들어감.
Routing
-
Parallel Routes : '@Modal'과 같은식으로 폴더명 표기. 화면 위에 다른 화면을 띄움
-
Intercepting Routes : ()로 표기, 같은 구조의 폴더의 주소값을 가로챔
- (.) 폴더명 : 동일한 수준의 폴더
- (..) 폴더명: 해당 폴더보다 부모 폴더
- (..)(..) 폴더명 : 두 단계 위의 부모 폴더
- (...) 폴더명 : 루트 폴더ex. 부모폴더와 같은 선상의 폴더를 가로채서 사용하고 싶을 때 (i/flow 안의 폴더 경로를 @Madal(Parallel Routes)안에서 Intercepting Router를 사용함)
*서버에서 리다이렉트할 경우 인터셉터 작동 x -> 클라이언트에서 Link로 사용해야 함.( 인터셉터라우트와 페러렐라우트를 함께 사용하는 부분이 개인적으로 조금 헷갈려서 여러번 해보는 중)
-
Dynamic Routes
File Convention
-
Private folder
- (folder name) : 각 폴더/파일의 그룹을 나누는 역할 (라우팅 영향x)
-_folder name : 폴더의 모든 하위 요소를 라우팅에서 제외시킴 (분리된 컴포넌트 보관등에 사용) -
default.js
: 페러렐라우트가 필요없을때(화면상에 띄워질 필요가 없을 때)나 기본값일때 사용
@/app/(beforeLogin)/@modal/(.)i/flow/default.tsx
export default function Default() {
return null;
}
- not-found.js
: 해당 경로가 없는 경로거나 잘못된 경로일때 띄울 UI를 위해 사용됨. app의 루트에 위치
@/app/not-found.tsx
function NotFound() {
return( <div>
<p>not-found<p/>
<p>존재하지 않는 경로입니다.<p/>
<Link href="/"> 홈으로 </Link>
</div>
);
}
export default NotFound;
useRouter()의 종류
사용코드 예시
: useRouter를 import 후 상수에 할당하여 사용.(app Router에선 next/navigation으로 import해야함)
import { useRouter } from "next/navigation";
import Main from "../_component/Main";
export default function Login() {
const router = useRouter();
router.replace("/i/flow/login");
return <Main />;
}
-
router.push()
: 제공된 경로로 이동함 (브라우저의 히스토리에 해당경로 추가)뒤로가기의 경우
1.localhost:3000 -> 2.localhost:3000/login(3번으로 router.push()을 사용한 곳) -> 3.localhost:3000/i/flow/login
1 -> 2-> 3-> 2-> 3 -> 2 -> 3
히스토리에 모든 경로가 기록되기 때문에 3번에서 뒤로가기를 누를경우 2번으로 이동하고 2번은 리다이렉트 시키는 구간이므로 3번으로 이동함 => 2,3번 무한 반복
-
router.replace()
: 제공된 경로로 이동함 ( 브라우저의 히스토리에 해당 경로를 추가하지 않음)뒤로가기의 경우
1.localhost:3000 -> 2.localhost:3000/login(3번으로 router.replace()을 사용한 곳) -> 3.localhost:3000/i/flow/login
1 -> 2 -> 3 -> 1
히스토리에 경로가 추가되지 않기 때문에 3번에서 뒤로가기를 누를 경우 2번을 건너뛰고 1번으로 복귀 가능
-
router.refresh()
: 현재 경로를 새로고침함 (서버에 요청 새로 함, 데이터 다시 가져옴, 브라우저상태/클라이언트가 가진 값(state)를 유지한 채로 업데이트된 서버의 payload를 병합함) -
router.prefetch(href: string)
: 제공된 경로를 미리 가져옴 -
router.back()
: 브라우저의 히스토리에 있는 경로에서 해당 경로의 이전 경로로 이동함. -
router.forward()
: 브라우저의 히스토리에 있는 경로에서 해당 경로의 다음 경로로 이동함.
이후 계속 업데이트 예정 ++
