Single-page Application, SPA란?

기존 웹 방식과는 다르게, 페이지 요청 시 완전히 새로운 페이지를 불러오는 것이 아닌, 동적으로 페이지를 다시 작성해 '사용자와 소통' 하는 웹 애플리케이션 or 웹 사이트를 뜻함.

→ 처음 로드 하고 난 뒤, 새로고침이 없는 것이 특징이다.

장점이 뭐야?

연속적인 페이지 간의 사용자 경험의 간섭을 막아준다.

→ 기존 형태의 웹이 주던 딱딱하고 끊기는 느낌을 사용자에게 주는 것이 아니라. 애플리케이션처럼 부드럽고 자연스러운 사용자 경험 (UX)을 느끼게 해 준다.

→ SPA의 최대의 목적은 뛰어난 사용자 경험을 준다는 것이다.

 

필요한 리소스만 부분적으로 로딩

→ 페이지의 모든 정보를 가져오는 것이 아닌, 화면 구성에 필요한 정보만 동적으로 요청을 해서 화면을 변경하는 방식으로 사용한다.

→ 필요한 부분만 요청하는, 데이터를 적게 사용하는 방식이기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능하다.

 

서버의 연산 부담을 클라이언트로 분산

→ 최초의 http 요청을 통해 딱 한 번만 http, Css, javascript를 로딩. 이후 데이터를 받아 올 때만 서버와 통신.

→ 통신된 데이터를 통해 기존 페이지의 내부를 수정해서 보여주는 방식.

 

컴포넌트로 나누어서 개발함으로 관리적 용이성

→ 모던 웹 들은 계속 다채로워지고 화려해지고 있다. ( 점점 복잡해진다!)

→ 많은 컴포넌트 ( 홈페이지에서 각각의 아이템들이라고 생각하면 편하다. 메뉴창, 내비게이션 바 등..)를 분리해서 관리를 함.

→ 데이터 변경이 있어 화면을 재 구성해야 하는 경우 전체를 바꾸는 것이 아닌, 컴포넌트 단위로 화면을 갱신.

단점이 뭐야?

초기 구동 속도가 느리다.

→ SPA의 단점 이라기보다 SPA구조 상 어쩔 수 없는 상황이다. SPA는 초기에 웹에 필요한 대부분의 리소스를 다운로드한다.

→ 이러한 손해를 감수하고도 얻고자 하는 것은 전체적인 속도 , 반응성, 사용성을 추구하기 위함이다. 하지만 우리는 어찌 되었든 메인 페이지는 빠르게 뜨길 원한다면?

  1. Lazyload
    • 많은 양의 코드 (초기 다운로드)를 작은 양의 개별 작업으로 분할시켜 제공하는 방법.
    • Code splitting.
    • Route-based code splittig

 

검색엔진 최적화(SEO)가 어렵다.

→ 이 문제는 js기반 비동기 연동 모델로 작동되는 모든 웹 환경에서 문제가 생긴다.

→ SPA가 극단적으로 js를 사용하다 보니 더욱 부각되는 것뿐이다.

→ 대부분의 서치 봇 들이 html을 파싱 해서 정보를 만든다. 그렇기 때문에 SPA와 같이 html의 뼈대 위에 js 비동기 통신 모듈을 통해 내용을 채우는 방식을 사용하면, 서치 봇이 제대로 감지를 못하는 상황까지 이른다.

—> 이를 해결하기 위해서 SSR (Server SIde Rendering)이라는 방식으로 사용되고 있다.

그래서 SPA는 좋은 거야?

이에 대한 정답은 없다고 생각한다. 어떠한 기술을 바라볼 때, 항상 좋은 점만 있는 것은 아니다.

SPA와 기존 고전 웹의 특징을 잘 비교 한 뒤 본인이 만들 웹 페이지에 기획과 콘셉트에 맞게 스스로 고민하고 선택하는 것이 중요하다고 생각한다.

저작자표시

'html > js' 카테고리의 다른 글

[EJS] Embedded JavaScript Template : HTML에서 JS사용하기.  (0) 2019.11.01
[Javascript] html 안에 html 추가하기  (0) 2019.10.24

템플릿 엔진?

 

템플릿을 읽어 엔진의 문법과 설정에 따라서 파일을 HTML 형식으로 변환시키는 모듈.

 

 

EJS

 

1. 설치

 

npm install ejs

 

2. 사용

 

var express = require('express');
var app = express();

app.set('view engine', 'ejs');

 

Model -> View 로 데이터 전달.

 

Model에서 사용한 변수명 그대로 사용하면 된다.

..
<body>
	<h1> <%=title %> </h1>
    <ul>
    	<% for(var temp in data){ %>
        <li>
        	<%= data[temp].title %>
        </li>
        <% } %>
    </ul>
</body>
...

 

 

참고

https://ejs.co/#docs

 

EJS -- Embedded JavaScript templates

Simple syntax JavaScript code in simple, straightforward scriptlet tags. Just write JavaScript that emits the HTML you want, and get the job done!

ejs.co

 

'html > js' 카테고리의 다른 글

[SPA] Single-page Application, SPA 장단점  (0) 2019.12.30
[Javascript] html 안에 html 추가하기  (0) 2019.10.24

사전 준비

1. Jquery

 

예시 코드

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script>
	$(document).ready(function(){
    	$("document id or className").load("your html dir");
	});
</script>
<head>
...
	<script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script>
    	$(document).ready(function(){
    		$(".header").load("header.html");
		});
    </script>
...
</head>
<body>
...
	<div class="header">
    </div>
...
</body>

'html > js' 카테고리의 다른 글

[SPA] Single-page Application, SPA 장단점  (0) 2019.12.30
[EJS] Embedded JavaScript Template : HTML에서 JS사용하기.  (0) 2019.11.01

+ Recent posts

티스토리툴바