지난 시간에 redux-saga를 어떻게 code splitting 을 적절하게 적용해서 함께 사용할 수 있는지 알아보았다.
(궁금하면 여기 클릭!)
이번 시간에는 Next.js란 무엇인지 알아보고,
처음 프로젝트틀 한번 세팅해볼 것이다.
참고한 사이트는 다음과 같다.
출처:
https://nextjs.org/learn/foundations/about-nextjs
https://nextjs.org/learn/basics/create-nextjs-app
https://nextjs.org/learn/basics/assets-metadata-css/assets
1. Next.js란?
CSR sv SSR 에 대해 알아본 적이 있는데(궁금하면 여기 클릭), 그때는 간단하게 Next.js에 대해 소개했었다.
Next.js 는 공식 사이트에서 다음과 같이 소개하고 있다.
Next.js는 빠른 웹 애플리케이션을 만드는 블록들을 제공하는 유연한 React 프레임워크다.
하지만 이게 정확히 무엇을 의미할까요?
웹 애플리케이션의 block들을 만드는 것
모던 애플리케이션을 만들 때 고려해야할 것이 몇가지 있다.
User interface - 어떻게 사용자가 애플리케이션을 소비하고 상호작용할지.
Routing - 어떻게 애플리케이션 사이에 다른 부분들을 사용자들이 다룰 수있는지.
Data Fetching - 어디서 당신의 데이터가 존재하고 어떻게 얻을지
Rendering - 언제 그리고 어디서 당신이 정적 혹은 동적 콘텐츠를 redering할 것인지.
Integrations - 세번째 서비스가 무엇인지(CMS, auth, payments 등등) 그리고 그들을 어떻게 연결할지.
Infrastructure - 어디서 deploy하고, 저장하고, 애플리케이션 코드를 작동할지.
Performance - 어떻게 애플리케이션을 최적화할지.
Scalability - 어떻게 당신의 애플리케이션을 팀, 데이터, 트래픽 상승에서 받아들일 수 있는지.
Developer Experience - 팀의 경험을 구축하고 애플리케이션을 유지하는지.
각각의 부분들은 스스로 해결책을 만들지 혹은 라이브러리나 프레임워크 같은 다른 툴을 사용하던지 결정을 해야 한다.
=> 이러한 고민들 해결해 주는 것이 Next.js이다!
Next.js는 빠른 웹 애플리케이션을 만드는 블록들을 제공하는 유연한 React 프레임워크다.
프레임워크로써, 우리는 Next.js가 React에 필요한 도구들과 설정을 다루는것을 의미한다. 그리고 추가적인 구조, 특징, 최적화를 우리 애플리케이션에 제공한다.
혹은 'Create a Next.js App' 섹션에서 다음과 같이 설명하고 있다.
처음부터 React로 웹 애플리케이션을 생성하려면, 고려할 중요한 게 많다.
- 코드는 웹팩같은 번들러를 사용해서 번들되야하고 바벨같은 compiler를 사용해서 변환되어야 한다.
- 코드 스플리팅 같은 생산 최적화를 하길 필요로한다.
- Search Engine Optimization을 위해 미리 화면을 렌더링하해야 할 수도 있다.
- SSR이나 CSR를 사용해야 할 수도 있다.
- React app에서 data저장소와 연결하기 위해 server side 코드를 써야만 할 수도 있다.
Next.js는 이러한 문제를 해결한다!
생략...
React를 그냥 물론 사용할 수도 있지만, Next.js를 사용하는것이 개발을 좀 더 편리할 수 있다.
공식 사이트에서는 이 Next.js에 대해 개발자들이 좀 더 이해하기 위해 선행적으로
기본적인 javascript에서 React.js로의 전환, React.js의 원리 등에 대해 설명하고 있다.
필자는 어떻게 Next.js를 사용할 수 있는지로 바로 넘어가겠다.
2. Next.js를 사용해 프로젝트 생성하기
Next.js app을 생성하려면 우선 프로젝트를 생성한다.
npx create-next-app nextjs-practice --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
공식 사이트에서 이미 예시를 제공하고 있다.
키메라는 사이트에서 하라는 데로 한 번 해볼 예정이다.
적당한 곳에 다운로드를 받고 npm run dev를 하면 다음과 같은 화면이 나온다.
프로젝트 구조는 다음과 같다.
그리고 index.js 파일이 보이는데 이곳에 우리의 default page이다.
3. Next.js기능 - Navigation 기능
단순히 React만 사용하게 되면, url에 따른 기능을 나누고 할 경우에 router, router-dom같은 library를 우리가 직접 다운받아서 사용해야 했었다. (궁금하면 여기 클릭)
Next.js에서는 이 기능이 이미 내장되어 있으며,
pages폴더 내에 원하는 파일을 생성하면, 그 이름대로 url에 접근할 수 있다.
pages/index.js
import Head from "next/head";
import Link from "next/link";
export default function Home() {
return (
<div className="container">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div>main page</div>
<div>
<Link href="/post">
<a>this page!</a>
</Link>
</div>
</div>
);
}pages/post.js
export default function FirstPost() {
return <h1>First Post</h1>;
}
그래서 다음을 클릭하면 바로 넘어가게 된다.
무조건 쓸 기능은 framework에서 이미 지원해주니 우리는 사용하는 방법에 맞추어서 잘 사용하면 된다.
이 'Link' component는 CSN(Client Side Navigation)기능을 지원한다.
Client Side Navigation이란 페이지 변환이 javascript를 이용해서 일어나는것을 의미하는데, browser에서 되는 기본 navigation 보다 더 빠르다.
pages/index.js 수정 - default navigation vs client side navigation
import Head from "next/head";
import Link from "next/link";
export default function Home() {
return (
<div className="container">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div>main page</div>
<div>
<a href="/post">this page!</a>
<br />
<Link href="/post">
<a>this page 222!!</a>
</Link>
</div>
</div>
);
}
실행 화면은 물론 두개 다 클릭하면 결과는 동일하다.
하지만 직접 클릭을 둘 다 해보면 차이점을 알아차릴 수 있다.
4. Next.js기능 - 자원 접근
next.js는 top-level의 'public' 디렉토리에 이미지 같은 static assets를 지원해준다.
public 디렉토리 안에 파일들은 'pages'와 비슷하게 애플리케이션 루트에서 참고될 수 있다.
import Head from "next/head";
import Link from "next/link";
import Image from "next/image";
export default function Home() {
return (
<div className="container">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div>main page</div>
<div>
<a href="/post">this page!</a>
<br />
<Link href="/post">
<a>this page 222!!</a>
</Link>
</div>
<div>
<Image src="/image.png" width="500" height="500" />
</div>
</div>
);
}
아무 사진이나 넣고 보여주면 다음과 같다.
5. Next.js 기능 - Head 수정
pages/post.js
import Head from "next/head";
export default function FirstPost() {
return (
<>
<Head>
<title>first post test</title>
</Head>
<h1 style={{ backgroundColor: "yellow" }}>First Post</h1>
</>
);
}
Head를 next/head에서 import해서 위처럼 사용을 하면 사이트의 이름이 페이지 이동시 변경된다.
또한, 원하는 script파일도 페이지 접속 시 가져오도록 설정도 가능하다.
pages/post.js 수정 - next/script 추가
import Head from "next/head";
import Script from "next/script";
export default function FirstPost() {
return (
<>
<Head>
<title>first post test</title>
</Head>
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() =>
console.log(`script loaded correctly, window.FB has been populated`)
}
/>
<h1 style={{ backgroundColor: "yellow" }}>First Post</h1>
</>
);
}이번 시간에 next.js란 무엇인지, 어떤 장점이 있는지, 그리고 어떤 기능이 있는지 알아보고 있었다.
글이 너무 긴 관계로 다음 글에서 이어서 next.js의 기능을 다시 공부하려고 한다.
'programming language > react' 카테고리의 다른 글
| [React] ReactDOM.createRoot VS ReactDOM.render (0) | 2022.07.09 |
|---|---|
| [React] redux말고 Redux-toolkit 사용하기 + redux-saga 병합 (0) | 2022.07.09 |
| [React] redux-saga 연습하기 (reducer + redux-saga 조합) + immer 적용하기 (0) | 2022.07.02 |
| [React] Redux-saga 알아보기 (0) | 2022.06.27 |
| [React] Redux-thunk 알아보기 (2) | 2022.06.26 |