타이틀 링크를 클릭하면 해당 주차 강의 코드가 정리된 깃허브로 연결됩니다.
1강 소개, 페이지 레이아웃
npx create-next-app으로 설치- 설치 시 앱 이름을 디폴트인 my-app으로 해줬다면
cd my-app→yarn dev혹은npm run dev로 실행 - create-next-app 으로 설치하면
- 컴파일과 번들링이 자동으로 됨 (webpack 과 babel)
- 자동 리프레쉬 기능으로 수정하면 화면에 바로 반영
- 서버사이드 렌더링 지원
- 스태틱(정적) 파일 지원
- 자동 라우팅 지원: pages 폴더에 js 파일 만들면 자동으로 라우팅 적용됨.
- 다이나믹 라우팅 가능: pages/view/[id].js 생성 시 /view/[id] 라우팅. [id]에 아무거나 쳐도 인식됨.
- css 프레임워크
- Semantic UI React 이용
- npm install semantic-ui-react semantic-ui-css
- _app.js 이용 시:
- 페이지 전환시 레이아웃 유지 가능.
- 페이지 전환시 상태값 유지 가능.
- componentDidCatch를 이용해 커스텀 에러 핸들링 가능.
- 추가적인 데이터를 페이지로 주입 가능.
- 글로벌 CSS 를 이곳에 선언.
- 모든 페이지에 적용돼야 하는 내용 있으면 여기에.
- _MyApp
- MyApp의 props로 넘어온 Component: 현재 페이지. 페이지 전환 시 component props가 변경.
- pageProps는 데이터 patching 메서드를 통해 미리 가져온 초기 객체. 이 메서드 사용 안 하면 빈 객체 전달.
- _document.js
- Html, head, body 등을 이용해야 할 때 이 파일 필수적으로 사용해야.
- 서버에서만 렌더링됨. 이벤트 작동 안 됨. css 사용 안 함.
2강 Dynamic Routes, next/link
동적 라우팅
// pages/view/[id].js
import { useRouter } from "next/router";
const Post = () => {
const router = useRouter();
// [id].js로 파일 만들어줬을 때 라우터에 {id}값 아무거나 들어오면 여기로 라우팅됨.
const { id } = router.query;
return <p>Post: {id}</p>
}
export default Post; // src/component/ItemList.js
{/* next/link로 import해온 link: 이거 클릭하면 href 애로 연결해줌. */}
{/* href는 next가 알고 있어야 하는 주소. as는 사용자가 보는 주소. */}
<Link href="/view/[id]" as={`/view/${item.id}`}>
</Link>axios
// pages/view/[id].js
const API_URL = `http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;
function getData() {
Axios.get(API_URL).then((res) => {
setItem(res.data);
});
}
useEffect(() => {
// id가 있고 0보다 클 경우
if (id && id > 0) {
getData();
}
}, [id]);slice
// index.js
return (
<div>
<Head>
<title>HOME</title>
</Head>
<Header as="h3" style={{ paddingTop: 40 }}>
베스트 상품
</Header>
<Divider />
{/* slice로 0부터 9까지 */}
<ItemList list={list.slice(0, 9)} />
<Header as="h3" style={{ paddingTop: 40 }}>
신상품
</Header>
<Divider />
{/* 9부터 나머지 */}
<ItemList list={list.slice(9)} />
</div>
);
더보기
코딩앙마의 NEXT 강의를 정리한 내용입니다
'WEB > NEXT' 카테고리의 다른 글
| [NEXT] 4강 에러 페이지, 환경 변수 + 6강 isFallback, getStaticPaths (0) | 2022.05.10 |
|---|---|
| [NEXT] 3강 서버사이드 렌더링, 5강 정적 생성(Static Generation) (0) | 2022.05.10 |
댓글