Next.js 배우기 - 마지막
데이터패칭, 인증, Next.js 고급, 이코시스템 등
Next.js의 마지막 포스팅입니다. 사실 기본적인 개념을 쌓는 것도 매우 중요하지만 실제 프로젝트로 구현하는 과정, 다른 개발자들이 써놓은 코드를 보고 하나하나 해독해 나가는 과정이 더욱 중요한 것 같습니다.
서버사이드 렌더링 데이터 패칭
서버 사이드 렌더링(Server-side rendering, SSR)은 웹 앱의 성능과 사용자 경험을 개선하기 위한 기술입니다. SSR을 사용하면 서버에서 HTML을 생성하여 클라이언트에게 보내므로, 초기 로딩 속도를 개선할 수 있습니다.
SSR에는 데이터 가져오기(Data Fetching)라는 중요한 개념이 있습니다. 데이터 가져오기는 서버에서 데이터를 가져와서 HTML에 포함시키는 작업입니다. 데이터 가져오기를 통해 동적인 콘텐츠를 렌더링할 수 있습니다.
Next.js에서는 getServerSideProps와 getStaticProps 두 가지 함수를 사용하여 데이터 가져오기를 구현할 수 있습니다. 이 두 함수는 서버에서 실행되며, 서버에서 데이터를 가져와서 HTML에 포함시킵니다.
getServerSideProps 함수는 매 요청마다 실행됩니다. 이 함수를 사용하면 매번 서버에서 데이터를 가져와서 렌더링할 수 있습니다. 이 함수를 사용하면 항상 최신 데이터를 사용할 수 있지만, 매 요청마다 실행되므로 서버 부하가 커질 수 있습니다.
getStaticProps 함수는 빌드 시에 실행됩니다. 이 함수를 사용하면 빌드 시에 서버에서 데이터를 가져와서 HTML에 포함시킵니다. 이 함수를 사용하면 초기 로딩 속도를 빠르게 할 수 있지만, 빌드 시점의 데이터를 사용하므로 항상 최신 데이터를 사용할 수는 없습니다.
SSR을 사용하여 데이터 가져오기를 구현할 때는, 데이터를 가져오는 시간이 길어지면 서버의 응답 시간이 늘어나므로 주의해야 합니다. 또한, 서버에서 데이터를 가져오는 것이기 때문에, 데이터 소스에 접근하기 위한 인증 정보를 안전하게 보호해야 합니다.
이렇게 SSR과 데이터 가져오기를 사용하면, 초기 로딩 속도를 개선하고 동적인 콘텐츠를 렌더링할 수 있습니다. 이러한 기술은 웹 앱의 성능과 사용자 경험을 개선하는 데 큰 역할을 합니다
Next.js, 인증 & 권한 부여 구현
공식 도큐먼트 : https://nextjs.org/docs/authentication
(참고 : 백엔드 지식 필요)
인증(Authentication)과 권한 부여(Authorization)는 웹 앱에서 중요한 보안 기능입니다. 인증은 사용자가 자신이 주장하는 신원을 증명하는 것이며, 권한 부여는 인증된 사용자가 허용된 작업을 수행할 수 있는 권한을 부여하는 것입니다.
Next.js에서 인증과 권한 부여를 구현하는 방법은 다양합니다. 예를 들어, 이메일과 비밀번호를 사용한 로그인, 소셜 미디어 계정을 사용한 로그인, 이메일 인증을 통한 회원 가입 등이 있습니다. 이러한 인증 방식을 구현하기 위해서는, 사용자 데이터베이스와 같은 백엔드 서비스와 통신해야 할 필요가 있습니다.
권한 부여는 일반적으로 로그인된 사용자에게만 적용됩니다. 예를 들어, 로그인된 사용자만 글을 작성하거나 삭제할 수 있도록 권한을 부여할 수 있습니다. 권한 부여를 구현하기 위해서는, 사용자의 권한 정보를 저장하고 이를 검증하는 로직이 필요합니다.
Next.js에서는 인증과 권한 부여를 구현하기 위해, 다양한 패키지와 라이브러리를 사용할 수 있습니다. 예를 들어,
next-auth 패키지를 사용하면 손쉽게 다양한 인증 방식을 구현할 수 있습니다. 또한,
nextjs-auth0 패키지를 사용하면 Auth0 서비스와 연동하여 보안 기능을 구현할 수 있습니다.
인증과 권한 부여는 웹 앱의 보안을 강화하는 데 중요한 역할을 합니다. 이를 구현하기 위해서는 사용자 데이터베이스와 같은 백엔드 서비스와의 통신, 사용자 권한 정보의 저장 및 검증 등 다양한 로직이 필요합니다. Next.js에서는 다양한 패키지와 라이브러리를 사용하여 쉽게 보안 기능을 구현할 수 있습니다.
다음은 next-auth 패키지를 사용하여 이메일과 비밀번호를 사용한 로그인 기능을 구현하는 코드 예시입니다. 이 코드는 Next.js의 API 라우트에서 사용됩니다.
import { NextApiRequest, NextApiResponse } from "next";
import NextAuth from "next-auth";
import Providers from "next-auth/providers";
const options = {
providers: [
Providers.Email({
server: process.env.EMAIL_SERVER,
from: process.env.EMAIL_FROM,
}),
],
database: process.env.DATABASE_URL,
};
export default (req: NextApiRequest, res: NextApiResponse) =>
NextAuth(req, res, options);
위 코드에서 Providers.Email은 이메일 인증 방식을 사용하도록 설정한 것이며, process.env.EMAIL_SERVER와 process.env.EMAIL_FROM은 각각 이메일 서버와 이메일 발신자 정보를 저장한 환경 변수입니다. process.env.DATABASE_URL은 사용자 정보를 저장할 데이터베이스 URL을 저장한 환경 변수입니다.
이 코드를 사용하면 /api/auth/signin 엔드포인트에서 이메일과 비밀번호를 사용한 로그인을 구현할 수 있습니다. 예를 들어, 클라이언트에서 다음과 같은 코드를 사용하여 로그인할 수 있습니다.
import { signIn } from "next-auth/client";
const handleLogin = async () => {
const result = await signIn("email", {
email: "user@example.com",
password: "password",
callbackUrl: "/",
});
console.log(result);
};
위 코드에서 signIn 함수는 next-auth/client 패키지에서 제공하는 함수로, 이메일과 비밀번호를 사용하여 로그인을 시도합니다. callbackUrl은 로그인 후 리디렉션될 URL을 지정합니다. 로그인 결과는 콘솔에 출력됩니다.
Next.js에서 외부 라이브러리 및 패키지를 사용하는 방법
우선, 사용하고자 하는 라이브러리 또는 패키지를 npm 또는 yarn과 같은 패키지 매니저를 통해 설치해야 합니다. 예를 들어, axios 라이브러리를 설치하려면 다음 명령어를 실행합니다.
이제 설치된 라이브러리를 Next.js 프로젝트에서 사용할 수 있습니다. 예를 들어, axios를 사용하여 서버로부터 데이터를 가져오는 코드를 작성해 보겠습니다!
import axios from "axios";
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
async function fetchData() {
const result = await axios.get("/api/data");
setData(result.data);
}
fetchData();
}, []);
return (
<div>
{data ? (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
) : (
<p>Loading...</p>
)}
</div>
);
}
위 코드에서 axios 라이브러리를 가져와 /api/data
엔드포인트에서 데이터를 가져옵니다. 가져온 데이터는 state에 저장되어 화면에 표시됩니다.
이와 같이 Next.js에서 외부 라이브러리 및 패키지를 사용하는 것은 매우 간단합니다.
그냥 npm 또는 yarn을 통해 설치하고, import하여 사용하면 됩니다.
인기 Next.js 라이브러리, 패키지
Next.js는 많은 패키지와 라이브러리가 있어서 개발자들이 빠르게 웹 애플리케이션을 구축할 수 있습니다. 이 중에서도 특히 인기 있는 패키지와 라이브러리는 다음과 같습니다.
styled-components : CSS-in-JS 라이브러리로, 컴포넌트에 스타일을 적용할 때 사용합니다.
axios : HTTP 클라이언트 라이브러리로, 서버와 데이터를 주고받을 때 사용합니다.
react-icons : 다양한 아이콘을 제공하는 라이브러리입니다.
next-seo : 검색 엔진 최적화를 위한 메타 태그와 관련된 기능을 제공하는 라이브러리입니다.
next-images : 이미지 파일을 쉽게 로드하고 처리할 수 있는 기능을 제공하는 라이브러리입니다.
next-auth : 인증과 권한 부여를 다루는 라이브러리로, 다양한 인증 방식을 지원합니다.
formik : 폼을 다루는 라이브러리로, 입력 값의 유효성 검사와 오류 메시지 표시 등을 지원합니다.
yup : 스키마 기반의 객체 검증 라이브러리로, formik과 함께 사용하면 폼 유효성 검사를 쉽게 구현할 수 있습니다.
이 외에도 Next.js를 더욱 편리하게 사용할 수 있는 많은 패키지와 라이브러리가 있습니다. 필요에 따라 다양한 라이브러리와 패키지를 사용하여 개발을 진행할 수 있습니다.
