1. 라우팅 ( Client-side routing )
사용자의 요청(URL 경로)에 따라 어떤 화면 또는 기능을 보여줄지 결정하는 기술
- 사용자가 페이지를 이동해도 전체 페이지를 새로고침하지 않고, 일부만 바꿔주는 방식
- 대표적으로 React, Vue, Angular
2. path='*'
그 외는 모두 처리하는 기법특정 URL 경로에 해당하는 컴포넌트를 매칭하는 라우팅 주소
<Route path="/home" element={<Home />} />- 사용자가 /home 주소로 접속하면 <Home /> 컴포넌트를 렌더링함
- path="/": 루트 경로 (홈페이지)
- path="/about": About 페이지
- path="/user/:id": 동적 경로
3. 동적 파라미터
<Route path="/user/:id" element={<User />} />- /user/123 요청이 들어오면 <User /> 컴포넌트가 뜨고, id=123으로 받을 수 있음
- React Router v6 기준으로 useParams()로 받아옴
const { id } = useParams();
4. 중첩 라우팅
하나의 페이지 내에 또 다른 라우트가 중첩되어 렌더링되는 구조
- 부모 컴포넌트 안에 자식 컴포넌트를 라우팅
< SSR vs CSR >
1. CSR (Client-Side Rendering)
초기 HTML 파일이 로드될 때 내용이 거의 비어 있고,
이후 JavaScript가 실행되면서 React가 컴포넌트를 렌더링하여 화면에 표시하는 방식
2. CSR의 장점
1. 브라우저에서 View 렌더링하기 때문에 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터렉션을 제공
2. 새로고침이 발생하지 않아 사용자에게 네이티브 앱과 비슷한 경험을 제공
3. CSR의 문제점
1. 첫 페이지 로딩 속도가 SSR보다 느리다 첫 요청 시 전체 페이지에 대한 모든 파일을 다운 받은 후에 렌더링하기 때문.
2. JS를 무시하면 화면이 안보인다.
3. SEO(Search Engine Optimization)가 웹 사이트에 대한 데이터를 수집하지 못하기 때문에 CSR로 작성된 페이지는 검색결과에서 제외될 수 있으므로 별도의 보완 작 업이 필요하다.(ex sitemap 문서)
단, 구글은 검색엔진에 자바스크립트 엔진이 내장되어 있다.
4. public에서 동적인 것
5. next는 mapping 필요없이 단순하게 경로만 주면 해당 경로 path가 됨
6. App에 들어가는 경로 파일 이름은 다 소문자~!
7. path variable
8. [isbn]
- 동적 경로
isbn props를 직접 받고 싶어서 바로 type 지정
import React from "react";
const BookDetail = ({ params: { isbn } }: { params: { isbn: string } }) => {
console.log("isbn:", isbn);
return (
<div>
<h1>Book Detail: {isbn}</h1>
</div>
);
};
export default BookDetail;-> next/link
link로 바로 전달됨
9. csr
JS를 꺼놨기때문에 렌더링이 안 됨
use로 시작하는 건 다 import 위에 "use client" 붙이기
5. 모던 산세리프(Sans-serif) 폰트
디지털 화면에서의 가독성을 고려해서 설계된 폰트로,
구글, 애플, 마이크로소프트 디자인 가이드라인에 모두 잘 어울려서 디자이너와 개발자 모두가 애용
✨ Code 1. inter 단일 폰트만 적용
<html lang="en"> <body className={inter.className}> {children} </body> </html>
특징
- inter 폰트 하나만 적용됨
- 별도 레이아웃 구성 없음
- 공통 UI(헤더, 네비게이션 등) 없음 → 정적이고 단순
사용 예시
- 빠르게 MVP 만들 때
- 정적 페이지 기반의 단순 프로젝트
✨ Code 2. 공통 레이아웃 + 다중 폰트 + CSS 모듈
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}>
<div className={Styles.main}> <Navigation /> {children} </div>
</body>
</html>
특징
- geistSans, geistMono 두 가지 폰트 모두 body에 적용
- Navigation 컴포넌트 항상 보여짐 → 페이지 공통 요소
- Styles.main으로 전체 레이아웃 스타일링 적용
사용 예시
- 블로그, 대시보드, 다중 페이지 앱
- 모든 페이지에서 Navigation이 고정되어야 하는 경우
📌 결론
| 폰트 하나, 간단한 구성 | 코드 1 (inter) |
| 다중 폰트 + 공통 네비 + CSS 모듈 사용 | 코드 2 (geistSans + Navigation) |
6. 경로
1. 상대경로 방식
- 복잡하고 지저분
import Navigation from '../../../components/common/Navigation';2. 절대경로 방식
- 깔끔한 스타일
@는 보통 src 폴더를 가리키도록 설정해놓음 → @ = src
import Navigation from '@/components/common/Navigation';'FrontEnd > Next.js' 카테고리의 다른 글
| [ Next.js ] Book 기능사항 구현하기 (4) | 2025.04.22 |
|---|---|
| [ Next.js ] Axios (1) | 2025.04.17 |