•
브라우저 주소 app 폴더에 반영하기
◦
페이지의 공통 요소 Next.js의 layout 사용
◦
예외 페이지의 경우 별도 처리
◦
라우트
▪
다이나믹라우트
•
라우트 경로에 유저명처럼 동적인 값이 와야하는 경우
◦
[원하는이름] 형태로 폴더나 파일명 작성
◦
만약 같은 레벨에 a 경로가 있고 []의 이름이 a가 된다면
▪
명시적으로 a로 작성한 경로가 우선함
▪
따라서 라우터명은 유저네임이 될 수 없게 해야함
▪
not-found
•
app폴더에 not-found 이름으로 파일 → default export
▪
라우트별 레이아웃
•
각 라우트별 layout.tsx 파일 만듬
•
위 내용은 rootlayout에 있는 children에 들어감
•
라우트 그룹
◦
라우트 경로에 ()를 사용하면 주소창에 관여를 안하는 경로가 됨
▪
app/(afterLogin)/home → 실제 경로는 /home
▪
전역 단위에서 레이아웃이 달라져야 할 때 사용
•
라우트 그룹만의 layout 파일 추가
•
template.tsx, Link, Image, redirect
◦
탬플릿과 레이아웃의 차이
▪
템플릿 - 페이지를 넘나들 때 새롭게 마운트 됨
▪
레이아웃 - 페이지를 넘나들 때 새롭게 마운트 되지 않음
◦
둘 중 하나를 선택해서 사용하여야 함
◦
보통 템플릿은 구글 애널릭틱스 등의 용도로 사용
•
css module을 선택한 이유
◦
dvh, dvw
▪
모바일에서 페이지의 주소창 여부와 무관하게 레이아웃을 채움
•
패러랠 라우트 / 인터셉트 라우트
◦
두 개의 페이지를 동시에 화면에 띄울 때 (모달 등)
•
클라이언트 컴포넌트로 전환하기
•
default.tsx (복습 및 이해 필요)
•
인터셉팅 라우트
•
private folder(_폴더)
◦
app 경로에 있어도 라우팅에 포함되지 않음
◦
_시작하여 경로에서 무시하도록 하고 필요한 컴포넌트 등을 넣어줌
◦
라우팅에 포함 되지 않는 디렉토리 3개
▪
라우트 그룹 → ‘()’로 감싸줌
▪
패러랠라우트 → ‘@’로 시작
▪
프라이빗폴더 → ‘_’로 시작
•
로그인 모달에서 발생하는 문제 해결하기 (router.replace)
◦
push와 replace의 차이
▪
push - 다음 페이지 이동 후 뒤로가 기하면 전 페이지로 이동
•
A → B → C (C에서 뒤로가기하면 B로 이동)
▪
replace - 다음 페이지 이동 후 뒤로가기하면 전전 페이지로 이동
•
A → B → C (C에서 뒤로가기하면 A로 이동)
◦
B 페이지에 리다이렉팅이 있는 경우 B → C → B → C 순환
◦
이런 경우를 대비 B가 뒤로가기 스택에서 빠지도록 처리
•
Main, SignupModal css 설명
위 화면에서는 전체 레이아웃에 아래 코드가 적용 됨
.container {
display: flex; // 플렉스 적용
flex-direction: row; // 기본값, 아이템을 가로로 정렬
background-color: #fff;
width: 100dvw;
height: 100dvh;
}
CSS
복사
.left {
flex: 1; // 각각의 비율만큼 적용
display: flex; // 왼쪽 아이템 안에서 추가로 flex 적용 (축: row)
justify-content: center; // 메인 축(세로)에 대한 정렬 - 가운데
align-items: center; // 교차 축(가로)에 대한 정렬 - 가운데
}
.right {
flex: 1; // 각각의 비율만큼 적용
display: flex; (축: column)
flex-direction: column; // 글자이기 때문에 세로(column) 정렬
justify-content: center; // 메인 축(세로)에 대한 정렬
}
CSS
복사
