nodejs, reactjs) react to static page - gatsby node api - 개발 기록 4

 

요구 사항

 

1. react state 별 static page 만들기

=> 나 같은 경우 main page의 title, comment, 플레이 할 mp4 파일 name 등 을 객채 별 state로 관리하고 있었다

=> 객체 별 state를 객체 ID 를 주소로 하는 (예: /item/1) 개별 page를 static 하게 만들고 싶다

 

과정

 

1. gatsby cli install

 

2. gatsby boilderplate git clone

 

3. gatsby-node.js 작성

: component 별 주입할 data를 server에서 받아와 어떤 template에 어떤 data를 넣어줄지 정리하는 곳

const { getDataSource } = require('./src/data-loader');

exports.createPages = async ({ actions }) => {
    const { createPage } = actions;

    const dataSource = await getDataSource();

    const { items } = dataSource;

    items.forEach(item => {
        createPage({
            path: `/${item.id}`,
            component: require.resolve(`./src/templates/single-page.js`),
            context: {
                item: item
            },
        });
    });

};

 

4. template 작성

: data를 받아 만들 page의 근본이 되는 틀

 

import React from 'react';
import Layout from '../components/layout';
import MainPage from '../components/MainPage/MainPage';

const SinglePage = ({ pageContext }) => {

    const { item } = pageContext;
 
    return (
        <Layout>
            <MainPage item={item} />
        </Layout>
    );
};

export default SinglePage;

 

5. data-loader.js 작성

: data를 서버에서 받아올 녀석 (gatsby-node.js 내 에서 사용)

 

const API_BASE_URL = 'http://localhost:8080';

async function getDataSource() {

  const fetchAllItems = async () => {
      try {
          const response = await fetch(`${API_BASE_URL}/items`);
          if (!response.ok) {
              throw new Error('Network response was not ok');
          }
          const data = await response.json();

          const items = data.result.map(item => {
            item.resource = JSON.parse(item.resource);
            return item;
          });

          return items;
      } catch (error) {
      console.error('Failed to fetch random item:', error);
      }
  };

  const items = await fetchAllItems();

  return {
    items, 
  };
}

module.exports = {
    getDataSource
};

 

6. gatsby build 실행