[책책책, 책을 읽읍시다] 2. 프로젝트 세팅

한음·2023년 2월 18일
0
post-thumbnail

프로젝트 기본 설정을 진행했다.

퇴근 후에 하려니 머리가 잘 안돌아가서 안돌아가는대로 할 수 있는 부분부터 진행했다.

컴포넌트 나누기

aside, nav 용으로 Sidebar.tsx, Header.tsx로 컴포넌트를 나누고

레이아웃 컴포넌트를 만들었다.

개츠비에서 react-helmet 비슷한 걸 제공해줘서 헬멧 컴포넌트로 관리한다.

[ Helmet.tsx ]

import { graphql, useStaticQuery } from "gatsby";
import React from "react";

interface IHelmet {
  title?: string;
}
export default function Helmet({ title }: IHelmet) {
  const titleQueryResponse = useStaticQuery<Queries.getTitleQuery>(graphql`
    query getTitle {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);
  return (
    <title>
      {title ? `${title} | ` : ""}
      {titleQueryResponse?.site?.siteMetadata?.title}
    </title>
  );
}

내장 GQL을 이용해 프로젝트 메타데이터를 가져오는 쿼리를 날릴 수 있다. 재밌다.

Recoil

전역 상태관리를 위해 Recoil을 도입했다.
테마 정도만 처리할텐데 context API를 사용하는게 나았나 싶기도 하다.

루트경로에 gatsby-browser.tsx 를 만들면 생성되는 모든 페이지에 대한 래퍼를 작성할 수 있다.

[ gatsby-browser.tsx ]

import React from "react";
import { RecoilRoot } from "recoil";

export const wrapPageElement = ({ element }) => {
  return <RecoilRoot>{element}</RecoilRoot>;
};

SSG에서 동적 요소를 어떻게 처리하는지 궁금했다.

어라

테스트를 진행해보니

gatsby development 환경에서는 정적파일로 제공되는게 아니었다.
(아마 개발환경에서는 일반적인 React 환경과 동일하게 제공되는듯 하다)

사실 변경사항이 있을때마다 빌드를 하고있지 않으니 당연한 건데,
ㅋㅋ;

빌드하고 테스트하려니 빌드가 되지 않았다.

RecoilRoot 내에서 recoil 관련 메서드를 사용하라는 오류였다.

gatsby-browser 에서 처리하면 모든 페이지에 적용된다며? 그렇게 하고 있는데?

구글링을 통해 해결하기는 했는데 정확한 원인은 찾지 못했다.

gatsby-ssr.tsx 에도 동일한 내용을 작성해줘야 한다.

[ gatsby-ssr.tsx ]

import React from "react";
import { RecoilRoot } from "recoil";

export const wrapPageElement = ({ element }) => {
  return <RecoilRoot>{element}</RecoilRoot>;
};

내 추측인데,

gatsby-browser.tsx 에서 동적인 요소를 처리하려 하면 안되는건가 싶다.

결론적으로 빌드 후 테스트를 진행하니, 빌드되는 시점에서의 전역 상태값들로 정적 페이지를 생성하고

이후 상태의 변경은 정적 js파일을 통해 처리되었다.

똘똘하다

Global Style

테일윈드와 styled-component 중 고민하다 스타일 컴포넌트를 택했다.

Layout.tsx 로 감싸고 해당 파일에서 글로벌 스타일을 처리했다.

사용은 리액트에서의 그것과 다르지 않다.

[ Layout.tsx ]

...
const Layout = ({ children }: ILayout) => {
  const isDefaultTheme = useRecoilValue(isDefaultThemeAtom);
  return (
    <>
      <ThemeProvider theme={isDefaultTheme ? defaultTheme : lighterTheme}>
        <GlobalStyle />
        {children}
      </ThemeProvider>
    </>
  );
};

테마는 간단하게 구성했다. defaultlighter 두 벌을 사용한다.

import "styled-components";

declare module "styled-components" {
  export interface Theme {
    backgroundColor: string;
    fontColor: string;
    accentColor: string;
    normalColor: string;
    warningColor: string;
  }
}

Test

작은 서버를 만들어 빌드된 파일로 굴려봤다.

동적 소스는 어떻게 처리하는지 궁금해

5초 후 테마를 변경하도록 했다.

...

const Layout = ({ children }: ILayout) => {
  // const isDefaultTheme = useRecoilValue(isDefaultThemeAtom);
  const [isDefaultTheme, setTheme] = useRecoilState(isDefaultThemeAtom);
  setTimeout(() => {
    setTheme(false);
    console.log("exec");
  }, 5000);
...

우측 탭의 js를 비활성화 시킨 후 5초 후 모습.

js 없이도 빌드 과정에서 색상을 뽑아와 정적 페이지를 만들었고(새로고침해도 색상은 그대로)

5초 후엔 setTimeout 이 실행되어 테마가 변경되었다.

참 신기하다

정리

  1. gatsby development 환경은 정적으로 제공되는게 아니다.
  2. 동적 요소에 대해 개츠비는 빌드 시점의 값을 사용해 정적 페이지를 생성하고, 이후 처리는 정적 js 파일로 처리한다.
  3. 동적 요소를 전체 page wrapper 에 사용하고 싶을 경우 gatsby-ssr 파일을 이용
profile
https://github.com/0hhanum

0개의 댓글