From ffb550a6c94d67b541cc47110f655ccd2928f041 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=86=B7=E1=84=8C=E1=85=A2=E1=84=8B?= =?UTF-8?q?=E1=85=AF=E1=86=AB?= Date: Mon, 30 Dec 2024 02:22:29 +0900 Subject: [PATCH 1/8] refactoring --- app.js | 76 ++++++++------------------------------------------ dataservice.js | 14 ++++++++++ index.html | 21 ++++++-------- navbar.js | 17 +++++++++++ router.js | 44 +++++++++++++++++++++++++++++ settings.json | 11 ++++++++ 6 files changed, 106 insertions(+), 77 deletions(-) create mode 100644 dataservice.js create mode 100644 navbar.js create mode 100644 router.js create mode 100644 settings.json diff --git a/app.js b/app.js index dd678cb..a8f4a0d 100644 --- a/app.js +++ b/app.js @@ -1,68 +1,14 @@ -// 데이터 가져오기 -let data = []; - -async function fetchData() { - const response = await fetch('/posts.json'); - data = await response.json(); - renderPage('/'); -} - -function renderPage(route) { - const app = document.getElementById('app'); - let filteredData; - // 라우트가 메인페이지일떄 - if (route === '/') { - filteredData = data; - app.innerHTML = ` - - `; - // 라우트가 detail일떄 - } else if (route.startsWith('/detail')) { - const id = route.split('/')[2]; - const item = data.find((item) => item.id == id); - // 라우트가 detail 일치하는 id 가있을떄 - if (item) { - app.innerHTML = ` -

${item.title}

-

${item.content}

- `; - } - // 라우트가 develop, design일때 - } else { - filteredData = data.filter( - (item) => item.category === route.replace('/', '') - ); - app.innerHTML = ` - - `; +import { setupRouter } from './router.js'; +import { setNavEvent } from './navbar.js'; + +// 초기화함수 +async function initApp() { + try { + setNavEvent(); + setupRouter(); + } catch (error) { + console.error('초기화 에러', error); } } -function navigate(url, state = {}) { - history.pushState(state, null, url); - renderPage(url); -} - -document.addEventListener('click', (e) => { - if (e.target.matches('[data-link]')) { - e.preventDefault(); - const url = e.target.getAttribute('href'); - console.log('url', url); - const state = { id: url.split('/')[2] }; - navigate(url, state); - } -}); - -window.addEventListener('popstate', (e) => { - console.log('e', e); - if (e.state) { - console.log('e.state', e.state); - renderPage(location.pathname); - } -}); - -fetchData(); +initApp(); diff --git a/dataservice.js b/dataservice.js new file mode 100644 index 0000000..8da206d --- /dev/null +++ b/dataservice.js @@ -0,0 +1,14 @@ +export async function fetchAllData() { + const response = await fetch('/posts.json'); + return await response.json(); +} + +export async function fetchCategoryData(category) { + const response = await fetchAllData(); + return response.filter((item) => item.category === category); +} + +export async function fetchDetailData(id) { + const response = await fetchAllData(); + return response.find((item) => item.id == id); +} diff --git a/index.html b/index.html index c31d5e4..4602508 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -7,19 +7,16 @@ - - - - - - +
+ +
- + \ No newline at end of file diff --git a/navbar.js b/navbar.js new file mode 100644 index 0000000..cae0e7a --- /dev/null +++ b/navbar.js @@ -0,0 +1,17 @@ +export function setNavEvent() { + const navbar = document.getElementById('navbar'); + + navbar.addEventListener('click', (e) => { + if (e.target.tagName === 'A' && e.target.hasAttribute('data-link')) { + console.log('이벤ㄴ트되네?'); + e.preventDefault(); + const url = e.target.getAttribute('href'); + navigate(url); + } + }); + + function navigate(url) { + history.pushState(null, null, url); + window.dispatchEvent(new PopStateEvent('popstate')); + } +} diff --git a/router.js b/router.js new file mode 100644 index 0000000..9ed3bac --- /dev/null +++ b/router.js @@ -0,0 +1,44 @@ +import { + fetchCategoryData, + fetchDetailData, + fetchAllData, +} from './dataservice.js'; + +async function renderPage(route) { + const app = document.getElementById('app'); + let content = ''; + + if (route === '/') { + // 전체 페이지 + const data = await fetchAllData(); // 전체 데이터 요청 + content = ` + + `; + } else if (route.startsWith('/develop') || route.startsWith('/design')) { + // 카테고리 페이지 + const category = route.replace('/', ''); + const data = await fetchCategoryData(category); + content = ` + + `; + } else if (route.startsWith('/detail/')) { + // 상세 페이지 + const id = route.split('/')[2]; + const item = await fetchDetailData(id); + content = `

${item.title}

${item.content}

`; + } + + app.innerHTML = content; +} + +export function setupRouter() { + renderPage(location.pathname); + + window.addEventListener('popstate', () => { + renderPage(location.pathname); + }); +} diff --git a/settings.json b/settings.json new file mode 100644 index 0000000..1ba92bd --- /dev/null +++ b/settings.json @@ -0,0 +1,11 @@ +{ + "liveServer.settings.root": "/", + "liveServer.settings.port": 8080, + "liveServer.settings.rewriteRules": [ + { + "source": ".*", // 모든 경로에 적용 + "destination": "/index.html" // 항상 index.html로 리디렉션 + } + ] + } + \ No newline at end of file From 16f1893927c0896f1b07e437ec731e2578d9599b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=86=B7=E1=84=8C=E1=85=A2=E1=84=8B?= =?UTF-8?q?=E1=85=AF=E1=86=AB?= Date: Mon, 30 Dec 2024 21:36:08 +0900 Subject: [PATCH 2/8] =?UTF-8?q?refactor/separation=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=97=AD=ED=95=A0=20=EB=B6=84=EB=A6=AC=20=EC=B6=94=EC=83=81?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- navbar.js | 5 +---- router.js | 1 + settings.json | 4 ++-- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/navbar.js b/navbar.js index cae0e7a..0ff77a4 100644 --- a/navbar.js +++ b/navbar.js @@ -1,9 +1,6 @@ export function setNavEvent() { - const navbar = document.getElementById('navbar'); - - navbar.addEventListener('click', (e) => { + document.addEventListener('click', (e) => { if (e.target.tagName === 'A' && e.target.hasAttribute('data-link')) { - console.log('이벤ㄴ트되네?'); e.preventDefault(); const url = e.target.getAttribute('href'); navigate(url); diff --git a/router.js b/router.js index 9ed3bac..605640e 100644 --- a/router.js +++ b/router.js @@ -28,6 +28,7 @@ async function renderPage(route) { } else if (route.startsWith('/detail/')) { // 상세 페이지 const id = route.split('/')[2]; + console.log('id', id); const item = await fetchDetailData(id); content = `

${item.title}

${item.content}

`; } diff --git a/settings.json b/settings.json index 1ba92bd..0d1939a 100644 --- a/settings.json +++ b/settings.json @@ -3,8 +3,8 @@ "liveServer.settings.port": 8080, "liveServer.settings.rewriteRules": [ { - "source": ".*", // 모든 경로에 적용 - "destination": "/index.html" // 항상 index.html로 리디렉션 + "source": ".*", + "destination": "/index.html" } ] } From a4cc5932cdd49e5691505ba8c5bafe433718cb49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=86=B7=E1=84=8C=E1=85=A2=E1=84=8B?= =?UTF-8?q?=E1=85=AF=E1=86=AB?= Date: Mon, 30 Dec 2024 21:36:08 +0900 Subject: [PATCH 3/8] =?UTF-8?q?cherry=20pick=EC=9D=84=20=EC=9C=84=ED=95=9C?= =?UTF-8?q?=20=EC=BB=A4=EB=B0=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 4602508..fc4328f 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,10 @@ SPA-Project main + +