[13팀 김도은] [Chapter 1-1] 프레임워크 없이 SPA 만들기

package.json

@@ -29,6 +29,7 @@
   "devDependencies": {
     "@eslint/js": "^9.16.0",
     "@playwright/test": "^1.49.1",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.5.2",
     "@vitest/ui": "^2.1.8",

src/app/index.js

@@ -0,0 +1,2 @@
+export { default as router } from "./router";
+export { default as routes } from "./routes";

src/app/router.js

@@ -0,0 +1,53 @@
+import Routes from "./routes";
+import userService from "../features/UserService";
+import { Store } from "../features";
+
+const store = Store.getInstance();
+
+export const historyRouter = (path) => {
+  store.clearListeners();
+
+  const pathToGo = interceptor(path);
+
+  history.pushState({}, "", pathToGo);
+
+  const page = Routes[pathToGo] ?? Routes[404];
+  const { view, init } = page();
+
+  document.querySelector("#root").innerHTML = view;
+  init();
+};
+
+export const hashRouter = (hash) => {
+  store.clearListeners();
+
+  const path = hash.replace("#", "");
+  const pathToGo = interceptor(path);
+
+  window.location.hash = pathToGo;
+
+  const page = Routes[pathToGo] ?? Routes[404];
+  const { view, init } = page();
+
+  document.querySelector("#root").innerHTML = view;
+  init();
+};
+
+const interceptor = (path) => {
+  let redirectedPath;
+
+  if (path === "/profile" && !userService.isLoggedIn()) {
+    redirectedPath = "/login";
+  }
+
+  if (path === "/login" && userService.isLoggedIn()) {
+    redirectedPath = "/";
+  }
+
+  return redirectedPath ?? path;
+};
+
+const router = (path) =>
+  window.location.hash ? hashRouter(path) : historyRouter(path);
+
+export default router;

src/app/routes.js

@@ -0,0 +1,10 @@
+import { ErrorPage, LoginPage, MainPage, ProfilePage } from "../pages";
+
+const Routes = {
+  "/": () => MainPage(),
+  "/profile": () => ProfilePage(),
+  "/login": () => LoginPage(),
+  404: () => ErrorPage(),
+};
+
+export default Routes;

src/features/Store.js

@@ -0,0 +1,39 @@
+const Store = (function () {
+  let instance;
+
+  const createStore = (initState = {}) => {
+    let state = initState;
+    const listeners = new Set();
+
+    return {
+      getState: () => state,
+
+      setState: (updater) => {
+        state = typeof updater === "function" ? updater(state) : updater;
+        listeners.forEach((listener) => {
+          listener(state);
+        });
+      },
+
+      subscribe: (listener) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      },
+
+      clearListeners: () => {
+        listeners.clear();
+      },
+    };
+  };
+
+  return {
+    getInstance: (initState = {}) => {
+      if (!instance) {
+        instance = createStore(initState);
+      }
+      return instance;
+    },
+  };
+})();
+
+export default Store;

src/features/UserService.js

@@ -0,0 +1,27 @@
+import { USER_KEY } from "../shared/const";
+
+class UserService {
+  isLoggedIn = () => !!this.getUser();
+
+  setUser = ({ username, email, bio }) => {
+    if (email && !this.isValidEmail(email)) {
+      alert("이메일 형식을 확인해주세요.");
+    }
+    localStorage.setItem(USER_KEY, JSON.stringify({ username, email, bio }));
+  };
+
+  getUser = () => {
+    return JSON.parse(localStorage.getItem(USER_KEY));
+  };
+
+  clearUser = () => {
+    return localStorage.removeItem(USER_KEY);
+  };
+
+  emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  isValidEmail = (val) => this.emailRegex.test(val);
+}
+
+const userService = new UserService();
+
+export default userService;

src/features/index.js

@@ -0,0 +1,2 @@
+export { default as UserService } from "./UserService";
+export { default as Store } from "./Store";

src/initApp.js

@@ -0,0 +1,33 @@
+import { router } from "./app";
+import { Store } from "./features";
+import { POST_LIST } from "./shared";
+
+const initLoadedListener = () => {
+  document.addEventListener("DOMContentLoaded", () => {
+    const currentPath = window.location.hash || window.location.pathname;
+    router(currentPath);
+  });
+};
+
+const initPopListener = () => {
+  window.addEventListener("popstate", () => {
+    const currentPath = window.location.hash || window.location.pathname;
+    router(currentPath);
+  });
+};
+
+const initHashChangeListener = () => {
+  window.addEventListener("hashchange", () => {
+    const currentPath = window.location.hash || window.location.pathname;
+    router(currentPath);
+  });
+};
+
+export const initApp = () => {
+  initPopListener();
+  initHashChangeListener();
+  initLoadedListener();
+
+  const store = Store.getInstance();
+  store.setState({ postList: POST_LIST });
+};