JavaScript로 SPA 구현하기

 

레퍼런스와 함께 vanilla JS로 Single-Page Application을 구현해봅니다!

 

 

React, Vue와 같은 SPA를 위한 라이브러리를 사용하는 것은
간단한 웹사이트를 구현할 때는 어쩌면 과한 방법일 수 있습니다.
전역으로 관리할 데이터가 적을 때 Redux를 사용할 필요성이 없는 것과 같은 맥락입니다.
또한 React, Vue는 결국 라이브러리이기 때문에, JS로 앱이 어떻게 작동하는지
조금이지만😅 알아둘 필요도 있습니다.

 

레퍼런스
a. History API + SPA 튜토리얼 https://www.youtube.com/watch?v=ZleShIpv5zQ
  a-1. pushState docs https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
  a-2. popState docs https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event
b. AI에게 질문 타임 https://chat.openai.com/chat
c. type=”module” / express + SPA 튜토리얼
  https://www.youtube.com/watch?v=6BozpmSjk-Y
  https://www.youtube.com/watch?v=OstALBk-jTc

 

---

JavaScript로 SPA 구현하기 ✨

JavaScript로 SPA 구현하기
  1. 레퍼런스 A : History API
  2. 레퍼런스 B : 개념 정리 (with OpenAi)
  3. 레퍼런스 C : Express, ES6 module, Class 컴포넌트
결론, 추가로 알아볼 내용?

---

레퍼런스 A : History API 📌

기본적인 구현 방법, 설명과 함께 만들기!

하단 링크는 History API와 함께, 새로고침 없이 화면 전환하는 방법이 나오는 튜토리얼입니다.
바닐라 JS로 화면 전환하는 방법에 대해
전혀 모른다면 A부터 공부할 수 있습니다.

History API에 대해 모른다면 영상과 함께
https://developer.mozilla.org/en-US/docs/Web/API/History_API를 읽어봐야 합니다.

 

링크

튜토리얼 (유투브) : https://www.youtube.com/watch?v=ZleShIpv5zQ

 

history API를 사용해, 새로고침 없이 화면 전환하기

 

자세한 개념은 docs 찾아보기🔮

 

a. https://developer.mozilla.org/en-US/docs/Web/API/History_API

a-1. pushState docs https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

a-2. popState docs https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event

 

 

상세 구현 과정 🪓

 

작업 과정을 전부 적는 것이 읽기 불편하다는 생각이 들어 전부 삭제했습니다!

 

진행한 내용을 참고하고 싶으시다면 아래 링크에 있습니다.

 

 

Notion 정리 (과정 삭제 전) https://www.notion.so/dusunax/JavaScript-SPA

깃허브 (직접 실습한 파일) : https://github.com/dusunax/vanillaSPA/tree/main/caseA

 

---

 

레퍼런스 B : 개념 정리 (with OpenAi) 📌

질문으로 좀 더 정리하기

(그런데 이제 AI를 곁들인...)

 

OpenAI

 

이번에 openAi를 구글 검색 대신 사용해 보았습니다.

 

답변 정확도가 굉장히 높다고 생각됩니다.

 

실제로 학습에 많은 도움이 되었습니다.

 

한글로도 질문할 수 있습니다!

 

https://chat.openai.com/chat

ChatGPT

제공하는 서비스, code completion도 재밌습니다.

 

영어와 한글로 같은 질문을 해보았을 때 같은 답이 나옵니다.

 

먼저 소스를 찾고, 한글로 번역이 되어 나오는 것이라고 생각되는데

 

왜냐하면 한글로 번역된 글이 영문 답글에 비해 너무 길면 뒷부분이 잘리는 현상이 있습니다. 

 

영문으로 일정 길이 이하의 답글을 만드는 것이라고 생각됩니다.

 

 

그림을 그리거나, 코드를 작성하는

 

사람을 대체할 수 있는 AI 서비스가 계속 나오고 있습니다.

 

내가 어떤 것을 원하는지 정확히 아는것과

 

물밀듯이 생겨나는 베타 서비스들을 이용할 수 있는 영어 실력이 중요할 것 같습니다!

 

 

JS로 돌아가겠습니다...

 

---

 

질문 1: onhashchange란?

onhashchange는 자바스크립트의 이벤트 중 하나로, 브라우저의 URL의 해시(#)가 변경될 때 발생하는 이벤트입니다.

 

이를 이용하면 사용자가 브라우저의 주소창을 직접 입력하거나, 새로고침 버튼을 눌러도 해시가 변경되었을 때만

 

이벤트가 발생하게 됩니다. 이를 이용하면 브라우저의 주소창을 이용한 웹페이지의 이동을 처리할 수 있습니다.

 

 

hashchange가 발생했을 때, 콜백이 실행되는 예시입니다.

window.addEventListener('hashchange', function() { 

// URL 해시가 변하는 이벤트가 발생했을 때 콜백이 실행됩니다. 
// url#해시내용 
// 이 곳에서 페이지를 이동할 수 있습니다. 

});

 

공식문서에 다른 예시가 더 있습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event

 

 

질문 2: how to handle dynamic elements in a vanilla JavaScript, SPA?

동적 요소를 사용하기 위해서, 다음과 같은 방법을 사용할 수 있습니다.

 

 

1. DocumentFragement

• DocumentFragment는 자바스크립트의 DOM API 중 하나로, 문서의 일부를 위한 가벼운, 인-메모리 DOM 트리를 제공합니다. DocumentFragment는 브라우저의 메모리에 존재하기 때문에 문서의 일부를 추가, 삭제, 수정할 때 문서에 직접 영향을 미치지 않습니다. 이를 이용하면 웹페이지의 동적 요소를 추가, 삭제, 수정할 때 더 효율적이고 성능이 좋은 방법을 제공합니다.

// DocumentFragment 생성
const fragment = document.createDocumentFragment();

// DocumentFragment에 요소 추가
const div1 = document.createElement('div');
div1.innerHTML = '<p>Hello</p>';
fragment.appendChild(div1);

const div2 = document.createElement('div');
div2.innerHTML = '<p>World</p>';
fragment.appendChild(div2);

// DocumentFragment를 문서에 추가
document.body.appendChild(fragment);

 

2. Templating 라이브러리

• Templating은 웹 개발에서 사용되는 기술로, 데이터를 이용해 HTML 템플릿을 생성하고, 이를 렌더링 하는 과정을 말합니다. Templating을 사용하면 서버 사이드와 클라이언트 사이드에서 코드를 분리하여 개발할 수 있습니다. 이를 통해 코드의 유지보수가 용이해지고, 성능이 향상됩니다. 대표적인 Templating 라이브러리로는 Handlebars, Mustache, Jade 등이 있습니다.

 

3. Virtual Dom 라이브러리

• 버츄얼 DOM(Virtual DOM)은 웹 브라우저에서 실제로 나타나는 DOM의 가벼운 모델로서, 컴퓨터 메모리에 저장되는 객체이다. 버츄얼 DOM은 실제 DOM에 변경을 가하기 전에 변경이 이루어지는 것을 의미하며, 이를 이용하면 웹 페이지의 성능을 향상할 수 있다. 예를 들어, 실제 DOM을 직접 수정하는 것보다는 버츄얼 DOM을 수정해 갱신하는 것이 더 효율적이고 성능이 좋다. 대표적인 버츄얼 DOM을 사용하는 라이브러리로는 React, Vue.js 등이 있다.

 

DocumentFragment 공식문서입니다.

• https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

 

베이스가 되는 타겟 element를 만들어 놓고,

fragment를 생성 후, 들어갈 element들을 fragment에 먼저 넣은 후, 타겟에 append 합니다.

하위 element들을 추가할 때, 실제 dom트리에 접근하지 않기 때문에 효율적인 방법입니다.

 

 

그 외에도 이게 맞나? 싶은 개념들을
쉽게 검색할 수 있는 https://chat.openai.com/chat 추천

답변 예시😭

 

---

 

레퍼런스 C : Express, module, Class 컴포넌트 📌

레퍼런스 A보다 뭐가 조금 더 있는 예제

여기부터는 node로 서버를 켜야 합니다.

 

미리 말씀드리자면 2년 전 영상이며

 

사용하는 컴포넌트는 클래스 컴포넌트입니다.

 

(가장 개념 정리가 잘 되어있는 영상이었어요..)

 

링크

튜토리얼 (유튜브) : https://www.youtube.com/watch?v=6BozpmSjk-Y

 

 

레퍼런스 c를 정리하자면...

1. express로 서버를 켭니다.

 

localhost의 해당 port로 접속하면 메인 페이지를 보여줍니다.

 

미들웨어를 사용해, static/의 정적 파일 사용합니다.

 

 

2. 클라이언트 SPA를 만듭니다.

 

History API를 사용합니다. => pushState()

 

새로고침 + 페이지 이동에도 state를 유지합니다. => popstate

 

동적 게시글을 확인합니다. /:paramsId => (정규식으로 자름)

 

 

상세 구현 과정 🪓

진행 과정은 삭제했습니다.

 

 

Notion 정리 (과정 삭제 전) https://www.notion.so/dusunax/JavaScript-SPA

깃허브 (직접 실습한 파일) : https://github.com/dusunax/vanillaSPA/tree/main/caseB

 

 

---

결론 📌

 

세 가지 레퍼런스를 통해서

 

SPA를 구현하는 기본 방법에 대해 알아보았습니다.

 

 

레퍼런스 c의 튜토리얼이 만들어진 날짜가 2년 전어서 class 컴포넌트이기 때문에

 

함수 컴포넌트를 사용하는 내용을 추가 정리할 필요가 있습니다.

 

 

그리고 아무래도 튜토리얼이기 때문에 실제 구현과는 차이가 있습니다.

 

state를 통해 상태 관리를 어떻게 하는지(+전역)

 

컴포넌트의 생애주기를 어떻게 확인하는지

 

fetch 한 데이터를 어디에 저장하고 어떻게 사용하는지 등등

 

 

풀지 못한 과제가 많이 남아있지만

 

이번 게시물은 "그냥 JS로 SPA를 도대체 어떻게 만들 수 있냐"라는 물음에 대답하는

 

첫걸음이라고 볼 수 있겠습니다.