spa 웹 개발글 보고 느낀 점(허접 관점)

• 참고 글 : https://okky.kr/articles/831473

1. 왜 Js 프레임 워크를 사용하는가?

• 프론트엔드 개발이 복잡해 지면서 등장하였다
  ex) jQuery : DOM을 쉽게 조작하기 위한 라이브러리

=> DOM 이란 뭘 까?

• 참고, 출처 : https://nonipc.com/entry/DOM%EC%9D%B4%EB%9E%80
  DOM(Document Object Model):
  웹페이지가 로드될 때 브라우저가 생성하는 문서 객체모델
  

  

  
  쉽게 말해 html 안의 구성들이라 생각하면 될 거 같다.
  예를 들어 <div id ='things'/>를 쉽게 조작하고 싶을 때
  document.getElementdById('things')를 써도 됐지만
  jQuery를 했을 때 $('#things')만 쓰면 쉽게 things의 값을 가져올 수 있었다. 간결하다.

2. 기존의 MPA 방식 개발에서 SPA 개발 방식으로

MPA(Multiple-page application) 웹 서비스에선 클라이언트(유저)가 요청(request)를 할 때마다 서버에서 데이터를 받아와 화면에 보여주는(렌더링) 방식이였다. 이렇게 한다면 극단적 예를 들어 클라이언트가 사이트 메뉴를 왔다갔다만 심심해서 한다하더라도 서버에서 계속 요청을 주고 받고 해야한다. 왜냐하면 페이지를 이동 할 때마다 필요한 데이터를 줘야하니까
이러함을 SPA(Single-page application)은 보완해준다. 최초로 접속(로드) 시 전체 페이지를 한번에 로드 한 후 바뀌는 부분만 json형태로 데이터를 가져온다.
바뀌는 부분만 한다하면 ajax(비동기 동작)로 필요한 부분 갱신하도록 js를 작성하면 된다.

3. SPA 라우팅

라우팅 : 데이터를 주고 받을 경로를 선택하는 과정

1)기존 방식(링크 방식)은 예를 들어 현재 사이트1이라는 페이지에서
<a href="사이트2"/>를 클릭 하면 사이트2를 서버에서 사이트2 리소스를 렌더링(전송) 하여 클라이언트(유저)에게 보여준다. 새로고침도 가능하고 히스토리가 남아 이전 페이지로 왔다갔다가 가능하다. 하지만 왔다갔다 할 때마다 서버에서 사이트1의 리소스, 사이트2의 리소스를
매번 서버에서 받아와야한다.

2) AJAX
이를 보완 하고자 AJAX를 하면 필요한 부분만 주고 받으면 되니 자원적으로 절약적이다.
허나, ajax는 URL을 변경하지 않으므로 히스토리가 남지 않는다(뒤로가기 불가)

3) HASH 방식
AJAX를 보완하고자 HASH 라우팅 방식이 나왔다.