[2팀 김경민] Chapter 1-1. 프레임워크 없이 SPA 만들기 #59
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,241 +1,74 @@ | ||
| import { ErrorPage } from "./pages/ErrorPage"; | ||
| import { LoginPage } from "./pages/LoginPage"; | ||
| import { MainPage } from "./pages/MainPage"; | ||
| import { ProfilePage } from "./pages/ProfilePage"; | ||
|
|
||
| export const Router = (function () { | ||
| const routes = {}; | ||
|
|
||
| function addRoute(path, component) { | ||
| routes[path] = component; | ||
| } | ||
|
|
||
| function navigate(path) { | ||
| if (!routes[path]) { | ||
| path = "/404"; | ||
| } | ||
|
|
||
| window.history.pushState({}, "", path); // history API: 새로고침 없이 주소만 변경이 가능하다 | ||
| render(path); // 컴포넌트 렌더링 | ||
| } | ||
|
|
||
| function render(path) { | ||
| const appElement = document.getElementById("root"); | ||
| if (!appElement) { | ||
| console.error("app 요소를 찾을 수 없습니다."); | ||
| return; | ||
| } | ||
| const component = routes[path] || routes["/404"]; // 경로를 찾지 못하면 404 | ||
| appElement.innerHTML = component(); | ||
| } | ||
|
|
||
| // popstate: 뒤로가기, 앞으로가기 버튼을 눌렀을 때 발생하는 이벤트 | ||
| function handlePopState() { | ||
| const currentPath = window.location.pathname; | ||
|
|
||
| if (currentPath === "/profile" && !isLoggedIn()) { | ||
| window.history.replaceState({}, "", "/login"); // replaceState: 현재 페이지의 상태를 새로 고쳐서 history entry를 교체합니다 | ||
| render("/login"); | ||
| return; | ||
| } | ||
|
|
||
| render(window.location.pathname); | ||
| } | ||
|
|
||
| function init() { | ||
| window.addEventListener("popstate", handlePopState); // 뒤로가기, 앞으로가기 버튼을 눌렀을 때 발생하는 이벤트 | ||
| document.addEventListener("click", (e) => { | ||
| const target = e.target.closest("a.nav-link"); | ||
| if (target) { | ||
| e.preventDefault(); | ||
| const path = target.getAttribute("href"); | ||
| navigate(path); | ||
| } | ||
| }); | ||
| navigate(window.location.pathname); | ||
|
Comment on lines
+47
to
+54
There was a problem hiding this comment. 이 코드도 router와는 별개로 분리가 되면 router를 더 재사용하기 좋아질 것 같아요 |
||
| } | ||
|
|
||
| return { | ||
| addRoute, | ||
| navigate, | ||
| init, | ||
| }; | ||
| })(); | ||
|
|
||
| function isLoggedIn() { | ||
| return localStorage.getItem("user"); | ||
| } | ||
|
|
||
| Router.addRoute("/", MainPage); | ||
| Router.addRoute("/profile", ProfilePage); | ||
| Router.addRoute("/login", LoginPage); | ||
| Router.addRoute("/404", ErrorPage); | ||
|
|
||
| Router.init(); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| export const ErrorPage = () => ` | ||
| <main class="bg-gray-100 flex items-center justify-center min-h-screen"> | ||
| <div class="bg-white p-8 rounded-lg shadow-md w-full text-center" style="max-width: 480px"> | ||
| <h1 class="text-2xl font-bold text-blue-600 mb-4">항해플러스</h1> | ||
| <p class="text-4xl font-bold text-gray-800 mb-4">404</p> | ||
| <p class="text-xl text-gray-600 mb-8">페이지를 찾을 수 없습니다</p> | ||
| <p class="text-gray-600 mb-8"> | ||
| 요청하신 페이지가 존재하지 않거나 이동되었을 수 있습니다. | ||
| </p> | ||
| <a href="/" class="bg-blue-600 text-white px-4 py-2 rounded font-bold"> | ||
| 홈으로 돌아가기 | ||
| </a> | ||
| </div> | ||
| </main> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { Router } from "../main"; | ||
|
|
||
| const template = ` | ||
| <main class="bg-gray-100 flex items-center justify-center min-h-screen"> | ||
| <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md"> | ||
| <h1 class="text-2xl font-bold text-center text-blue-600 mb-8">항해플러스</h1> | ||
| <form id="login-form"> | ||
| <div class="mb-4"> | ||
| <input type="text" id="username" placeholder="사용자 이름" class="username" class="w-full p-2 border rounded"> | ||
| </div> | ||
| <div class="mb-6"> | ||
| <input type="password" id="password" placeholder="비밀번호" class="w-full p-2 border rounded"> | ||
| </div> | ||
| <button type="submit" class="w-full bg-blue-600 text-white p-2 rounded font-bold">로그인</button> | ||
| </form> | ||
| <div class="mt-4 text-center"> | ||
| <a href="#" class="text-blue-600 text-sm">비밀번호를 잊으셨나요?</a> | ||
| </div> | ||
| <hr class="my-6"> | ||
| <div class="text-center"> | ||
| <button class="bg-green-500 text-white px-4 py-2 rounded font-bold">새 계정 만들기</button> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| `; | ||
| export const LoginPage = () => { | ||
| document.addEventListener("submit", (e) => { | ||
| e.preventDefault(); | ||
|
|
||
| if (e.target instanceof HTMLFormElement && e.target.id === "login-form") { | ||
| const username = e.target.querySelector("#username").value.trim(); | ||
|
|
||
| if (username) { | ||
| localStorage.setItem( | ||
| "user", | ||
| JSON.stringify({ username, email: "", bio: "" }), | ||
| ); | ||
| Router.navigate("/profile"); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| return template; | ||
| }; |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
로그인을 검증하고 redirect 시키는 로직이 router 외부에 있으면 더 좋은 것 같아요
저도 router 내부에 작성을 했다가 외부에서 검증하는 로직을 받아 처리하는것으로 변경하였는데 router이 재사용성이 더 높아지더라구요
다만 외부에서 받아서 처리하는 방법이 좋은지는 더 생각해보고 있는 상태입니다