[3팀 김진현][Chapter 1-1] 프레임워크 없이 SPA 만들기 #15
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 |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| export class Router { | ||
| constructor() { | ||
| this.routes = {}; | ||
| window.addEventListener("popstate", this.handlePopState.bind(this)); | ||
| } | ||
|
|
||
| addRoute(path, handler) { | ||
| this.routes[path] = handler; | ||
| } | ||
|
|
||
| navigateTo(path, replace = false) { | ||
| if (replace) history.replaceState({}, "", path); | ||
| else history.pushState({}, "", path); | ||
| this.handleRoute(path); | ||
| } | ||
|
|
||
| handlePopState() { | ||
| this.handleRoute(window.location.pathname); | ||
| } | ||
|
|
||
| handleRoute(path) { | ||
| const handler = this.routes[path]; | ||
| if (handler) handler(); | ||
| else this.navigateTo("/404"); | ||
| } | ||
| } |
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,23 @@ | ||
| export class User { | ||
| constructor() { | ||
| this.preferences = JSON.parse(localStorage.getItem("user")) || {}; | ||
| } | ||
|
|
||
| set(key, value) { | ||
| this.preferences[key] = value; | ||
| this.save(); | ||
| } | ||
|
|
||
| get(key) { | ||
| return this.preferences[key]; | ||
| } | ||
|
|
||
| save() { | ||
| localStorage.setItem("user", JSON.stringify(this.preferences)); | ||
| } | ||
|
|
||
| clear() { | ||
| this.preferences = {}; | ||
| localStorage.removeItem("user"); | ||
| } | ||
| } |
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,6 @@ | ||
| export function Footer() { | ||
| return ` | ||
| <footer class="bg-gray-200 p-4 text-center"> | ||
| <p>© 2024 항해플러스. All rights reserved.</p> | ||
| </footer>`; | ||
| } |
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,38 @@ | ||
| import { isLoggedIn } from "../main"; | ||
|
|
||
| export function Header() { | ||
| const currentPath = window.location.pathname; | ||
|
|
||
| const profileLinkClass = | ||
| currentPath === "/profile" ? "text-blue-600" : "text-gray-600"; | ||
|
|
||
| const homeLinkeClass = | ||
| currentPath === "/" ? "text-blue-600 font-bold" : "text-gray-600"; | ||
|
|
||
| return ` | ||
| <header class="bg-blue-600 text-white p-4 sticky top-0"> | ||
| <h1 class="text-2xl font-bold">항해플러스</h1> | ||
| </header> | ||
|
|
||
| <nav class="bg-white shadow-md p-2 sticky top-14"> | ||
| <ul class="flex justify-around"> | ||
| <li> | ||
| <a href="/" class="${homeLinkeClass} cursor-pointer">홈</a> | ||
| </li> | ||
| ${ | ||
| isLoggedIn() | ||
| ? `<li> | ||
| <a href="/profile" class="${profileLinkClass} cursor-pointer">프로필</a> | ||
| </li>` | ||
| : "" | ||
| } | ||
| <li> | ||
| <a href="/login" class="text-gray-600 cursor-pointer" id=${ | ||
| isLoggedIn() ? "logout" : "login" | ||
| } | ||
| >${isLoggedIn() ? "로그아웃" : "로그인"}</a | ||
| > | ||
| </li> | ||
| </ul> | ||
| </nav>`; | ||
| } | ||
|
There was a problem hiding this comment. map으로 반복문 돌리는거 말씀하시는거죠? ㅎㅎ 유지보수 측면에서 좋은 방법인거같습니다 |
||
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,111 +1,53 @@ | ||
| import { Router } from "./classes/Router"; | ||
| import { User } from "./classes/User"; | ||
| import { HomePage } from "./pages/HomePage"; | ||
| import { LoginPage } from "./pages/LoginPage"; | ||
| import { NotFound } from "./pages/NotFound"; | ||
| import { ProfilePage } from "./pages/ProfilePage"; | ||
|
|
||
| export const router = new Router(); | ||
| export const user = new User(); | ||
| export function isLoggedIn() { | ||
| return user?.preferences?.username?.length > 0; | ||
| } | ||
|
|
||
|
There was a problem hiding this comment.
이런식으로 축약해서 사용할 수도 있을 것 같습니다~! There was a problem hiding this comment. 오호 넵 화살표함수로 작성하니 더 깔끔해보여 좋은거같습니다! |
||
| router.addRoute("/", HomePage); | ||
| router.addRoute("/profile", ProfilePage); | ||
| router.addRoute("/login", LoginPage); | ||
| router.addRoute("/404", NotFound); | ||
|
|
||
| export function handleRouting() { | ||
| const links = document.querySelectorAll("a"); | ||
|
|
||
| links.forEach((link) => { | ||
| link.addEventListener("click", (e) => { | ||
| e.preventDefault(); | ||
|
|
||
| if (e.target.getAttribute("href") === "/login") { | ||
| e.stopPropagation(); | ||
| return; | ||
| } | ||
| router.navigateTo(e.target.getAttribute("href")); | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| export function Logout() { | ||
| const logoutEl = document.querySelector("#logout"); | ||
| if (logoutEl) | ||
| logoutEl.addEventListener("click", () => { | ||
| user.clear(); | ||
| router.navigateTo("/"); | ||
| }); | ||
| } | ||
|
|
||
| document.addEventListener("DOMContentLoaded", () => { | ||
| router.handleRoute(window.location.pathname); | ||
| }); | ||
|
|
||
| window.addEventListener("error", (event) => { | ||
| const errorBoundary = document.createElement("div"); | ||
| errorBoundary.id = "error-boundary"; | ||
| errorBoundary.textContent = `오류 발생! ${event.message}`; | ||
| document.body.appendChild(errorBoundary); | ||
| }); | ||
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,132 @@ | ||
| import { Footer } from "../components/Footer"; | ||
| import { Header } from "../components/Header"; | ||
| import { Logout, handleRouting } from "../main"; | ||
|
|
||
| export function HomePage() { | ||
| let html; | ||
| html = ` <div class="bg-gray-100 min-h-screen flex justify-center"> | ||
| <div class="max-w-md w-full"> | ||
|
There was a problem hiding this comment. html을 선언하고 한번만 할당하고 있어 const html = `` 이런식으로 바꿔 보는건 어떨까요~? |
||
| <main class="p-4"> | ||
| <div class="mb-4 bg-white rounded-lg shadow p-4"> | ||
| <textarea | ||
| class="w-full p-2 border rounded" | ||
| placeholder="무슨 생각을 하고 계신가요?ㅋ" | ||
| ></textarea> | ||
| <button class="mt-2 bg-blue-600 text-white px-4 py-2 rounded"> | ||
| 게시 | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="space-y-4"> | ||
| <div class="bg-white rounded-lg shadow p-4"> | ||
| <div class="flex items-center mb-2"> | ||
| <img | ||
| src="https://via.placeholder.com/40" | ||
| alt="프로필" | ||
| class="rounded-full mr-2" | ||
| /> | ||
| <div> | ||
| <p class="font-bold">홍길동</p> | ||
| <p class="text-sm text-gray-500">5분 전</p> | ||
| </div> | ||
| </div> | ||
| <p>오늘 날씨가 정말 좋네요. 다들 좋은 하루 보내세요!</p> | ||
| <div class="mt-2 flex justify-between text-gray-500"> | ||
| <button>좋아요</button> | ||
| <button>댓글</button> | ||
| <button>공유</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="bg-white rounded-lg shadow p-4"> | ||
| <div class="flex items-center mb-2"> | ||
| <img | ||
| src="https://via.placeholder.com/40" | ||
| alt="프로필" | ||
| class="rounded-full mr-2" | ||
| /> | ||
| <div> | ||
| <p class="font-bold">김철수</p> | ||
| <p class="text-sm text-gray-500">15분 전</p> | ||
| </div> | ||
| </div> | ||
| <p>새로운 프로젝트를 시작했어요. 열심히 코딩 중입니다!</p> | ||
| <div class="mt-2 flex justify-between text-gray-500"> | ||
| <button>좋아요</button> | ||
| <button>댓글</button> | ||
| <button>공유</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="bg-white rounded-lg shadow p-4"> | ||
| <div class="flex items-center mb-2"> | ||
| <img | ||
| src="https://via.placeholder.com/40" | ||
| alt="프로필" | ||
| class="rounded-full mr-2" | ||
| /> | ||
| <div> | ||
| <p class="font-bold">이영희</p> | ||
| <p class="text-sm text-gray-500">30분 전</p> | ||
| </div> | ||
| </div> | ||
| <p>오늘 점심 메뉴 추천 받습니다. 뭐가 좋을까요?</p> | ||
| <div class="mt-2 flex justify-between text-gray-500"> | ||
| <button>좋아요</button> | ||
| <button>댓글</button> | ||
| <button>공유</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="bg-white rounded-lg shadow p-4"> | ||
| <div class="flex items-center mb-2"> | ||
| <img | ||
| src="https://via.placeholder.com/40" | ||
| alt="프로필" | ||
| class="rounded-full mr-2" | ||
| /> | ||
| <div> | ||
| <p class="font-bold">박민수</p> | ||
| <p class="text-sm text-gray-500">1시간 전</p> | ||
| </div> | ||
| </div> | ||
| <p>주말에 등산 가실 분 계신가요? 함께 가요!</p> | ||
| <div class="mt-2 flex justify-between text-gray-500"> | ||
| <button>좋아요</button> | ||
| <button>댓글</button> | ||
| <button>공유</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="bg-white rounded-lg shadow p-4"> | ||
| <div class="flex items-center mb-2"> | ||
| <img | ||
| src="https://via.placeholder.com/40" | ||
| alt="프로필" | ||
| class="rounded-full mr-2" | ||
| /> | ||
| <div> | ||
| <p class="font-bold">정수연</p> | ||
| <p class="text-sm text-gray-500">2시간 전</p> | ||
| </div> | ||
| </div> | ||
| <p>새로 나온 영화 재미있대요. 같이 보러 갈 사람?</p> | ||
| <div class="mt-2 flex justify-between text-gray-500"> | ||
| <button>좋아요</button> | ||
| <button>댓글</button> | ||
| <button>공유</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| </div>`; | ||
| document.querySelector( | ||
| "#root" | ||
| ).innerHTML = `<div class="bg-gray-100 min-h-screen flex justify-center"> | ||
| <div class="max-w-md w-full">${Header()}${html}${Footer()}</div> | ||
| </div>`; | ||
|
|
||
| handleRouting(); | ||
| Logout(); | ||
| } | ||
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.
경로부분이 하드코딩 되어있는데 상수로 뺀다면 더 편하게 관리할 수 있을거같아요!
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.
넵!ㅎㅎ 리뷰감사합니다 ㅎㅎ