Next.js에서 데이터 전처리와 ETL 작업

18 Oct 2023

nextjs

개요

Next.js는 React 기반의 SSR(Server Side Rendering) 프레임워크로써, 웹 애플리케이션 개발을 쉽고 효율적으로 할 수 있도록 도와줍니다. 하지만 때로는 클라이언트 측에서 데이터 전처리와 ETL(Extract, Transform, Load) 작업을 수행해야 하는 경우가 있습니다. 이번 블로그 포스트에서는 Next.js에서 데이터를 전처리하고 ETL 작업을 하는 방법에 대해 알아보겠습니다.

데이터 전처리

getStaticProps

Next.js에서 데이터를 전처리하기 위해서는 getStaticProps 메서드를 사용할 수 있습니다. 이 메서드를 사용하면 페이지가 렌더링되기 전에 데이터를 미리 가져와서 페이지에 전달할 수 있습니다. 아래는 getStaticProps를 사용하는 예시입니다.

export async function getStaticProps() {
  // 데이터 전처리 작업 수행
  const data = await fetch('https://api.example.com/data');
  const processedData = await data.json();

  return {
    props: {
      data: processedData
    }
  }
}

export default function MyPage({ data }) {
  // 데이터를 사용하여 페이지 렌더링
  return (
    <div>
      <h1>My Page</h1>
      {/* 데이터 사용 */}
      <p>{data.title}</p>
    </div>
  )
}

getServerSideProps

만약 데이터를 동적으로 가져와야 한다면, Next.js의 getServerSideProps 메서드를 사용할 수 있습니다. 이 메서드는 페이지가 렌더링될 때마다 서버에서 데이터를 가져오기 때문에, 항상 최신의 데이터를 사용할 수 있습니다. 아래는 getServerSideProps를 사용하는 예시입니다.

export async function getServerSideProps() {
  // 데이터 전처리 작업 수행
  const data = await fetch('https://api.example.com/data');
  const processedData = await data.json();

  return {
    props: {
      data: processedData
    }
  }
}

export default function MyPage({ data }) {
  // 데이터를 사용하여 페이지 렌더링
  return (
    <div>
      <h1>My Page</h1>
      {/* 데이터 사용 */}
      <p>{data.title}</p>
    </div>
  )
}

ETL 작업

API 엔드포인트 생성

Next.js에서 ETL 작업을 수행하기 위해서는 먼저 API 엔드포인트를 생성해야 합니다. 이를 위해 Next.js의 API 라우트 기능을 사용할 수 있습니다. pages/api 디렉토리에 etl.js 파일을 생성하고 아래와 같이 작성합니다.

export default function handler(req, res) {
  // ETL 작업 수행
  const transformedData = transformData();

  // 데이터 저장
  saveData(transformedData);

  res.status(200).json({ success: true });
}

function transformData() {
  // 데이터 변환 작업 수행
  return transformedData;
}

function saveData(data) {
  // 데이터 저장 작업 수행
  // ...
}

데이터 가져오기

이제 ETL 작업을 수행하기 위해 데이터를 가져와야 합니다. getStaticProps 또는 getServerSideProps를 사용하여 데이터를 가져올 수 있습니다. 예를 들어, getStaticProps를 사용하여 데이터를 가져오는 경우 아래와 같이 작성할 수 있습니다.

export async function getStaticProps() {
  // 데이터 가져오기
  const data = await fetch('https://api.example.com/data');
  const jsonData = await data.json();

  return {
    props: {
      data: jsonData
    }
  }
}

ETL 작업 실행

이제 API 엔드포인트에서 ETL 작업을 실행하기 위해 필요한 데이터를 가져올 수 있습니다. fetch를 사용하여 데이터를 가져오고, 이를 이용해 ETL 작업을 수행한 후에 데이터를 저장합니다.

export default function handler(req, res) {
  // 데이터 가져오기
  const data = await fetch('https://api.example.com/data');
  const jsonData = await data.json();

  // ETL 작업 수행
  const transformedData = transformData(jsonData);

  // 데이터 저장
  saveData(transformedData);

  res.status(200).json({ success: true });
}

function transformData(data) {
  // 데이터 변환 작업 수행
  return transformedData;
}

function saveData(data) {
  // 데이터 저장 작업 수행
  // ...
}

마무리

Next.js에서 데이터 전처리와 ETL 작업을 수행하는 방법에 대해 알아보았습니다. getStaticProps 또는 getServerSideProps를 사용하여 데이터를 가져올 수 있으며, API 엔드포인트를 생성하여 ETL 작업을 수행할 수도 있습니다. 이를 통해 Next.js로 웹 애플리케이션을 개발하는 데 있어 보다 다양한 데이터 처리 작업을 수행할 수 있습니다.

참고 자료

Next.js 공식 문서
Next.js API Routes
React 기반의 SSR(Server Side Rendering) 프레임워크 Next.js 소개 #Next.js #데이터전처리 #ETL