[project]Blog 제작 도중 theme localStorage 오류

사용자가 로그인해서 사용할 수 있는 블로그를 실제 배포해서 운영까지 해보려고 제작 중 일반 텍스트를 입력해서 블로그를 쓰는 대신 개발자에 특화된 블로그이므로 github에 올리는 것처럼 마크다운으로 작성할 수 있게 react-markdown 라이브러리를 적용 중 확인한 오류이다.

오류 코드

아래와 같이 오류 코드가 나왔다. 새로운 페이지에 방문했을 경우, 강제 새로고침을 했을 경우 로컬스토리지에 theme라는 객체의 값이 할당되어 있지 않아서 생긴 오류이다.

해결방안으로는 오류 코드에도 나와있듯이 localStorage에 값이 없을 경우의 예외처리를 추가해주면된다.

코드를 작성할 때 예외처리는 중요한데 이것을 놓친것을 지금에서야 확인했다. 아직 프론트화면 구성 단계에서 맞이했기 때문에 다행이라고 생각한다.

- error src/app/recoil/state/themeState.ts (8:31) @ localStorage
- error ReferenceError: localStorage is not defined
  at getTheme (./src/app/recoil/state/themeState.ts:13:26)
  at eval (./src/app/recoil/state/themeState.ts:22:14)
  at (sc_client)/./src/app/recoil/state/themeState.ts (/Users/homile/Desktop/Projects/NextJS-Blog/nextjs-blog/.next/server/app/write/page.js:1778:1)
  at __webpack_require__ (/Users/homile/Desktop/Projects/NextJS-Blog/nextjs-blog/.next/server/webpack-runtime.js:33:42)
  at eval (./src/app/recoil/utils/Theme.tsx:10:75)
  at (sc_client)/./src/app/recoil/utils/Theme.tsx (/Users/homile/Desktop/Projects/NextJS-Blog/nextjs-blog/.next/server/app/write/page.js:1789:1)
  at __webpack_require__ (/Users/homile/Desktop/Projects/NextJS-Blog/nextjs-blog/.next/server/webpack-runtime.js:33:42)
  6 | export const getTheme = (): ThemeEnums => {
  7 |  // 로컬스토리지 theme의 값을 추출
> 8 |  const theme: string = String(localStorage.getItem("theme"));
   |                ^
  9 | 
 10 |  // theme가 없을 경우 0 === ThemeEnums.DARK
 11 |  if (theme === ThemeEnums.DARK) {

수정 전 코드

import { atom } from "recoil";

// type
import { ThemeEnums } from "@/app/types/enum/themeEnum";

export const getTheme = (): ThemeEnums => {
  // 로컬스토리지 theme의 값을 추출
  const theme: string = String(localStorage.getItem("theme"));

  // theme가 없을 경우 0 === ThemeEnums.DARK
  if (theme === ThemeEnums.DARK) {
    return ThemeEnums.DARK;
  }

  return ThemeEnums.LIGHT;
};

export const themeState = atom<ThemeEnums>({
  key: "themeState",
  default: getTheme(), // 로컬스토리에서 가져온 값을 바로 사용
});

 

수정 후 코드

import { atom } from "recoil";

// type
import { ThemeEnums } from "@/app/types/enum/themeEnum";

export const getTheme = (): ThemeEnums => {
  // 로컬스토리지 theme의 값을 추출
  if (typeof window !== "undefined") {
    const theme: string = String(localStorage.getItem("theme"));

    // theme가 없을 경우 0 === ThemeEnums.DARK
    if (theme === ThemeEnums.DARK) {
      return ThemeEnums.DARK;
    }

    return ThemeEnums.LIGHT;
  }

  return ThemeEnums.LIGHT;
};

export const themeState = atom<ThemeEnums>({
  key: "themeState",
  default: getTheme(), // 로컬스토리에서 가져온 값을 바로 사용
});

 

위와 같이 type of window !== "undefined"를 추가하여 없을 경우의 예외처리를 해주면 해결되는 간단한 문제이다. 사소한 실수하나가 프로젝트를 망칠 수 있기 때문에 조금더 코드를 작성하는 것이 중요하다고 생각했다.

 

앞으로 작성 페이지를 마크다운으로 변경하고, 백엔드 스키마를 작성한 뒤 연동하는 과정만 하면 12월 안에 작게나마 배포할 수 있을 것 같다.
배포는 CloudFlare, DB는 MongoDB를 사용하여 배포할 생각이다.