3주차 갑자기 라이브러리 이슈로 안되어가지고
이게뭐지 하면서 2시간 냅다 시간 소비했더니..
너덜너덜해진 림졍.
오늘도 강의정리 빠르게 가보겠습니다.
가시죠 ㅇㅅㅇ)/
Next.js 강의 정리 - Next.js 소개 및 활용 가이드
이젠, Next.js의 시대야.
Next.js
React의 기능을 확장한 웹을 위한 React 프레임워크
SSR, 라우팅, 최적화 등 많은 개발자 친화적인 기능을 제공→ 고품질, 고성능 웹 애플리케이션 개발에 용이
Next.js = 고품질?
1. 성능(Performance)
- SSR(Server-Side Rendering) 및 SSG(Static Site Generation) 지원 → 초기 로드 시간 감소
- 코드 스플리팅, 이미지 최적화 등 런타임 성능 향상
2. SEO(Search Engine Optimization)
- SSR → 완전히 렌더링된 페이지를 제공, 검색 엔진 최적화 용이
- SSG, 미리 생성된 HTML 파일 제공
3. 개발자 경험(Developer Experience)
- 자동 코드 분할, 핫 리로딩, TypeScript 지원으로 개발자 생산성 향상
- 백엔드 연동이 쉬운 API 라우트 기능 제공
4. 확장성(Scalability)
- 서버리스 함수와 데이터 페칭 기능 → 유연한 확장 가능
5. 유연성(Flexibility)
- 다양한 툴 및 라이브러리와 호환 가능
Next.js 사용 이유
- 개발에만 집중할 수 있는 환경
- 기본적으로 웹 개발에 필요한 기능을 제공 → 별도의 환경 설정 필요 X
- 유용한 기능들
1. 렌더링 기법
- CSR, SSR, SSG, ISR 등 다양한 방식 지원
2. 코드 스플리팅(Code Splitting)
- 뷰포트에 나타나는 컴포넌트만 로드 → 초기 로드 시간 단축
라이브러리와 프레임워크의 차이
라이브러리
- 개발자가 호출해서 사용하는 코드 집합 (예: React.js).
- React.js = UI를 만들기 위한 라이브러리 → 상태 관리, 라우팅 등 추가 설정 필요
프레임워크
- 개발의 흐름을 제어하며 필요한 기능을 제공 (예: Next.js).
- Next.js = React의 기능 확장 라우팅, 렌더링 방식, 서버 로직 등을 포함한 프레임워크
Next.js 설치 및 초기 설정
최신ver. 15.0.4 대신 14.2.20 ver. 사용
npx create-next-app@14
- 주의사항
- npx create-next-app 실행 시, 15ver 실행되므로 X!
- 기존 작업물 to 14ver? 그냥 새 프로젝트 생성해서 복붙... 합시다..
- 낮추는 이유? (15ver의 안정성 부족)
- 현재 15 버전은 lts (Long-Term Stable) 버전이 아니며, 실험적인 단계 (15.0.4-canary.49)로 분류됩니다.
- 대부분의 기업에서는 안정성이 검증된 LTS 버전을 프로덕션에서 선호합니다.
- 주요 설정:
- TypeScript: Y
- ESLint: N (회사의 컨벤션을 지키는 경우가 많으므로, 대체적으로는 No로 사용한다고 함)
- Tailwind CSS: Y
- App Router: Y
- import alias : Y (상대경로 대신 @를 쓰면 편하긴 해서.. 이건 개인차 조금 있을듯?)
- 파일구조
src/
app/
layout.tsx
page.tsx
라우팅 (Routing)
- 파일 기반 라우팅
- 디렉토리 구조로 라우트 정의
- 각 폴더의 page.tsx 파일 = 해당 경로의 페이지
// src/app/test/page.tsx
// '/test' 경로 추가 [ 접근 URL: http://localhost:3000/test ]
const TestPage = () => <div>Hello, Test Page!</div>;
export default TestPage;
- 동적 라우팅
- 폴더 이름에 대괄호 사용
// src/app/posts/[id]/page.tsx
// [ 접근 URL: http://localhost:3000/posts/1 ]
const PostDetail = ({ params }: { params: { id: string } }) => (
<div>Post ID: {params.id}</div>
);
export default PostDetail;
- 페이지 이동
<Link> 컴포넌트
- 프리페칭: 뷰포트에 보이는 순간 해당 페이지의 자원을 미리 로드
- 클라이언트 사이드 네비게이션: 빠른 페이지 전환
import Link from "next/link";
const Navbar = () => (
<nav>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
</nav>
);
+) useRouter로 이동 제어
"use client";
import { useRouter } from "next/navigation";
const NavigateButton = () => {
const router = useRouter();
const goToPage = () => {
router.push("/new-page");
};
return <button onClick={goToPage}>Go to New Page</button>;
};
export default NavigateButton;
특별한 예약 파일들
- layout.tsx
- 공통 UI 정의 (헤더, 사이드바 등)
- 동일 경로에 재렌더링 방지
// src/app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<header>Header</header>
{children}
</body>
</html>
);
}
- not-found.tsx
- 커스텀 404 페이지
// src/app/not-found.tsx
const NotFound = () => <div>Page Not Found</div>;
export default NotFound;
마무리 - 내일부터는 개인과제 꼭 한다.
오늘 3주차 과제이슈로 인해
4주차 절반정도 듣고 하루의 마무리를 지었다...
4주차 과제 많이 어렵다는데...
챌린지 방탈출도 해야하는데...
내일의 나, 해낼 수 있겠지?
오늘은 이쯤에서 자보도록 하겠숩니당
잘자용 ^-^)b
오늘의 KPT 회고
Keep: 와! 그래도 4주차 듣는중!
Problem: Next.js가 저에게 오류폭탄을 던져줘요 어헝헝
Try: 내일도 차근차근히 해내보자고.
'React TIL' 카테고리의 다른 글
| [React] Day_60 데일리 정리 (1) | 2024.12.12 |
|---|---|
| [React] Day_59 데일리 정리 (1) | 2024.12.11 |
| [React] Day_57 데일리 정리 (1) | 2024.12.09 |
| [React] Day_56 데일리 정리 (0) | 2024.12.06 |
| [React] Day_55 팀 프로젝트 후기 (4) | 2024.12.05 |
