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

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

src/bindings/ComponentBinding.js

@@ -0,0 +1,15 @@
+import NavbarController from "../controllers/NavbarController";
+
+class ComponentBinding {
+  $target;
+
+  constructor($target) {
+    this.$target = $target;
+    this._dependencies();
+  }
+  _dependencies() {
+    new NavbarController(this.$target);
+  }
+}
+
+export default ComponentBinding;

src/bindings/PageBinding.js

@@ -0,0 +1,12 @@
+import LoginController from "../controllers/LoginController";
+import ProfileController from "../controllers/ProfileController";
+import Binding from "../core/Binding";
+
+class PageBinding extends Binding {
+  _dependencies() {
+    new ProfileController(this.$target);
+    new LoginController(this.$target);
+  }
+}
+
+export default PageBinding;

src/bindings/index.js

@@ -0,0 +1,14 @@
+import ComponentBinding from "./ComponentBinding";
+import PageBinding from "./PageBinding";
+
+const createBindings = ($target) => {
+  const componentBinding = new ComponentBinding($target);
+  const pageBinding = new PageBinding($target);
+
+  return {
+    component: componentBinding,
+    page: pageBinding,
+  };
+};
+
+export default createBindings;

src/components/NavBar.js

@@ -0,0 +1,21 @@
+import Component from "../core/Component";
+
+class Navbar extends Component {
+  template() {
+    return `
+      <nav class="navbar bg-white shadow-md p-2 sticky top-14">
+        <ul class="flex justify-around">
+          <li><a href="/" class="nav-link ${this.controller.isMainPage() ? "text-blue-600 font-bold" : "text-gray-600"}">홈</a></li>
+          ${
+            this.controller.auth
+              ? `<li><a href="/profile" class="nav-link ${!this.controller.isMainPage() ? "text-blue-600 font-bold" : "text-gray-600"}">프로필</a></li>
+              <li><a href="/login" id="logout" class="nav-link text-gray-600">로그아웃</a></li>`
+              : `<li><a href="/login" id="login" class="nav-link text-gray-600">로그인</a></li>`
+          }
+        </ul>
+      </nav>
+    `;
+  }
+}
+
+export default Navbar;

src/controllers/LoginController.js

@@ -0,0 +1,30 @@
+import UserService from "../service/UserService.js";
+import Controller from "../core/Controller";
+import ProfilePage from "../pages/Profile";
+import Router from "../router/Router";
+import ProfileController from "./ProfileController";
+
+class LoginController extends Controller {
+  attachListeners() {
+    // 로그인 폼 제출 시 로그인 처리 및 프로필 페이지 초기화
+    this.addListener("submit", "#login-form", (e) => {
+      e.preventDefault();
+      const username = this.$target.querySelector(".username").value.trim();
+
+      if (!username) return;
+
+      UserService.login(username);
+
+      // 새 프로필 컨트롤러 및 페이지 생성, 라우트 등록
+      ProfileController.instance.onRefresh();
+      const profileInstnace = new ProfilePage(
+        this.$target,
+        ProfileController.instance,
+      );
+      Router.instance.addRoute("/profile", () => profileInstnace);
+      Router.instance.navigate("/");
+    });
+  }
+}
+
+export default LoginController;

src/controllers/NavbarController.js

@@ -0,0 +1,42 @@
+import UserService from "../service/UserService";
+import Router from "../router/Router";
+import Controller from "../core/Controller";
+
+class NavbarController extends Controller {
+  attachListeners() {
+    // 네비게이션 링크 클릭 시 라우팅 처리
+    this.addListener("click", ".nav-link", (e) => {
+      const target = e.target.closest("a");
+      if (!(target instanceof HTMLAnchorElement)) return;
+
+      e.preventDefault();
+
+      // 로그아웃 버튼 처리
+      if (target.id === "logout") {
+        this.handleLogout();
+      }
+
+      // 대상 네비게이션 탭 URL로 이동
+      const targetURL = e.target.getAttribute("href");
+      Router.instance.navigate(targetURL);
+    });
+  }
+
+  handleLogout() {
+    UserService.logout();
+  }
+
+  // 인증 정보 반환
+  get auth() {
+    return UserService.getAuth();
+  }
+
+  // 현재 페이지가 메인 페이지인지 판단
+  isMainPage() {
+    const currentPath = window.location.pathname;
+    const currentHash = window.location.hash;
+    return currentPath === "/" || currentHash === "#/";
+  }
+}
+
+export default NavbarController;

src/controllers/ProfileController.js

@@ -0,0 +1,38 @@
+import UserService from "../service/UserService";
+import Controller from "../core/Controller";
+
+class ProfileController extends Controller {
+  _onInit() {
+    // 사용자 정보 로드 및 상태 초기화
+    const user = UserService.getUser();
+    this.state = {
+      username: user?.username || "",
+      email: user?.email || "",
+      bio: user?.bio || "",
+    };
+    super._onInit();
+  }
+
+  onRefresh() {
+    this._onInit();
+  }
+
+  attachListeners() {
+    // 프로필 폼 제출 시 사용자 정보 업데이트
+    this.addListener("submit", "#profile-form", (e) => {
+      e.preventDefault();
+
+      const form = e.target.closest("form");
+      const username = form.querySelector("#username").value;
+      const email = form.querySelector("#email").value;
+      const bio = form.querySelector("#bio").value;
+
+      UserService.saveUser(username, email, bio);
+
+      this.setState({ username, email, bio });
+      alert("프로필이 업데이트 되었습니다");
+    });
+  }
+}
+
+export default ProfileController;

src/core/Binding.js

@@ -0,0 +1,13 @@
+class Binding {
+  $target;
+
+  constructor($target) {
+    this.$target = $target;
+    this._dependencies();
+  }
+
+  // 의존성 주입
+  _dependencies() {}
+}
+
+export default Binding;

src/core/Component.js

@@ -0,0 +1,35 @@
+class Component {
+  $target;
+  controller;
+
+  constructor($target, controller) {
+    this.$target = $target;
+    this.controller = controller;
+
+    // 컨트롤러가 있으면 상태 변경 시 자동 리렌더링
+    if (this.controller) {
+      this.controller.setOnStateChange(() => this.render());
+    }
+
+    this.init();
+  }
+
+  // 초기화 로직용 훅
+  init() {}
+
+  // 렌더링할 템플릿 반환
+  template() {
+    return ``;
+  }
+
+  // DOM 업데이트
+  render() {
+    this.$target.innerHTML = this.template();
+    this.mount();
+  }
+
+  // 마운트 훅
+  mount() {}
+}
+
+export default Component;

src/core/Controller.js

@@ -0,0 +1,61 @@
+class Controller {
+  state;
+  static _instance = null;
+
+  static get instance() {
+    if (!this._instance) {
+      throw new Error(`Instance of ${this.name} has not been created yet.`);
+    }
+    return this._instance;
+  }
+
+  constructor($target) {
+    // 싱글톤 패턴
+    if (this.constructor._instance) {
+      return this.constructor._instance;
+    }
+    this.constructor._instance = this;
+
+    this.$target = $target;
+    this.onStateChange = null;
+    this.state = {};
+    this._onInit();
+  }
+
+  // 초기화 시 attachListeners 호출
+  _onInit() {
+    this.attachListeners();
+  }
+
+  // 이벤트 리스너 등록 헬퍼 메서드
+  addListener(eventType, selector, callback) {
+    const boundCallback = (event) => {
+      if (!event.target.closest(selector)) return false;
+      callback(event);
+    };
+    // 기존 리스너 제거 후 새 리스너 추가
+    this.$target.removeEventListener(eventType, boundCallback);
+    this.$target.addEventListener(eventType, boundCallback);
+  }
+
+  // 리스너를 등록하는 훅, 하위 클래스에서 구현
+  attachListeners() {}
+
+  // 상태 변경 시 onStateChange 콜백 실행
+  setState(newState) {
+    this.state = { ...this.state, ...newState };
+    this.onStateChange();
+  }
+
+  // 상태 변경 시 호출할 콜백 설정
+  setOnStateChange(callback) {
+    this.onStateChange = callback;
+  }
+
+  // 컨트롤러 해제 시 인스턴스 제거
+  dispose() {
+    this.constructor.instance = null;
+  }
+}
+
+export default Controller;