프로젝트 기본 설정을 진행했다.
퇴근 후에 하려니 머리가 잘 안돌아가서 안돌아가는대로 할 수 있는 부분부터 진행했다.
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을 도입했다.
테마 정도만 처리할텐데 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파일을 통해 처리되었다.
똘똘하다
테일윈드와 styled-component 중 고민하다 스타일 컴포넌트를 택했다.
Layout.tsx
로 감싸고 해당 파일에서 글로벌 스타일을 처리했다.
사용은 리액트에서의 그것과 다르지 않다.
[ Layout.tsx ]
...
const Layout = ({ children }: ILayout) => {
const isDefaultTheme = useRecoilValue(isDefaultThemeAtom);
return (
<>
<ThemeProvider theme={isDefaultTheme ? defaultTheme : lighterTheme}>
<GlobalStyle />
{children}
</ThemeProvider>
</>
);
};
테마는 간단하게 구성했다. default
와 lighter
두 벌을 사용한다.
import "styled-components";
declare module "styled-components" {
export interface Theme {
backgroundColor: string;
fontColor: string;
accentColor: string;
normalColor: string;
warningColor: string;
}
}
작은 서버를 만들어 빌드된 파일로 굴려봤다.
동적 소스는 어떻게 처리하는지 궁금해
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
이 실행되어 테마가 변경되었다.
참 신기하다
gatsby development
환경은 정적으로 제공되는게 아니다.gatsby-ssr
파일을 이용