블로그도 만들어 봅시다.

노드버드를 만들면서 생각이 나는게 블로그를 만들어 보자 그리고 거기에 포폴을 넣어보자 결론은 포폴사이트라는거지만 이라는 생각이 들었다, 작업을 시작할때 일단 테마를 바꾸는 작업부터 시작했다.

 

01.  테마 바꾸기

 

테마를 바꾸는건 간단하다. css를 어떤것으로 할지는 모르지만 내가 주로 쓰는 css in js는 styled-component이기 때문에 거기에 내장되있는 ThemeProvider를 이용하는 것이였다.

 

export const lightTheme: DefaultTheme = {
  white: "#fff",
  black: "#222",
  yello: "#FFC821",
  gery: "#555",
  ddd: "#ddd",
  F1F1F2: "#F1F1F2",
  green: "#00BA7C",
  blue: "#1D9BF0",
  red: "#FE2C55",
  f7f7f7: "#f7f7f7",
  EFF1F1: "#EFF1F1",
  transparent: "transparent",
};
export const darkTheme: DefaultTheme = {
  white: "#fff",
  black: "#fff",
  yello: "#FFC821",
  gery: "#fff",
  ddd: "#ddd",
  F1F1F2: "#F1F1F2",
  green: "#00BA7C",
  blue: "#1D9BF0",
  red: "#FE2C55",
  f7f7f7: "#f7f7f7",
  EFF1F1: "#EFF1F1",
  transparent: "transparent",
};

 

예시로 작성되는 테마가 이렇다고 하면 이것을 로컬스토리지에 저장하고 버튼을 누를때마다 바뀌게 하면 된다.

여기서 중요한것은 서버 사이드 렌더링은 서버에서 페이지를 렌더링한 후에 클라이언트에 전달하는 방식으로 동작하기 때문에 클라이언트 측에서 로컬 스토리지에 접근할 수가 없다. 그레서 이때는 당황하지 말고 useEffect를 이용하면 된다.

아니면 버튼으로 만들어서 아래같이 접근하거나 말이다.

useEffect(() => {
      const CurrentTheme = localStorage.getItem("theme");
      setTheme(CurrentTheme || "light");
    }, []);

const changeTheme = useCallback(() => {
      const newTheme = theme === "light" ? "dark" : "light";
      setTheme(newTheme);
      localStorage.setItem("theme", newTheme);
    }, [theme]);