오늘의 실시간 강의는 SPA(singel page application)을 들었다.
개발공부는 하면 할 수록 줄어들지 않고 많아지는 거 같다ㅋㅋ 행복해...!
그럼 이제 TIL작성을 시작하자
1.SPA
: 새로운 페이지를 요청 할때 마다 전체 페이지를 렌더링하지 않고 필요한 데이터만 JSON으로 받아서 갱신한다.
이러한 SPA는 전체적인 트래픽을 감소 시키고, 네이티브 앱과 유사한 사용자 경험을 제공한다.
그렇지만 어디에나 장점이 있으면 단점이있듯,
①초기 구동 속도 ↓ : 최초 접근 시 단 한번 다운로드 하기 때문에 속도가 상대적으로 느리다.
②SEO(검색엔진 최적화) : SPA는 SSR방식이 아니라 CSR방식이라 웹 크롤링 시 데이터가 모두 담겨지지 않은 채로 오기 떄문에 SEO가 불리하다.
▷SSR(server side rendering)
: 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링한다.
MPA방식에서 사용된다.
장점 - SEO에 유리하다.
빠른 초기 로딩을 지닌다.
단점 - TTV(time to view) 와 TTL(time to interact)간에 시간 간격이 존재한다.
( 사용자가 페이지를 요청할때마다 새로고침된다=> 사용자 경험이 다소 떨어진다)
- 서버측 부하가 증가한다
▷CSR(client side rendering)
: 사용자의 요청에 따라 필요한 부분만 응답을 받아 렌더링 하는 방식
장점 - 서버부하감소
- 네이티브 앱과 유사하다( 다음단계 전화 시 깜빡이는 것 없이 부드러운 경험 제공)
단점 - SEO불리
- 초기로딩 속도 느리다.
2.HASH
:브라우저는 서버에 #이전까지의 URL을 호스팅 해달라고 요청을 한다.
즉 https://example.com.abc/ #abcd =>이 부분은 요청X
새로고침을 하게되면 페이지를 못찾는 에러를 없애기 위해서 사용한다.
<주신 자료들을 정리하기>
<!DOCTYPE html>
<html>
<head>
<title>Vanilla SPA Router</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css" rel="stylesheet" />
</head>
<body>
<div id="root">
<nav id="main-nav" class="sidebar">
<a href="/" onclick="route(event)">Home</a>
<a href="#about" onclick="route(event)">About</a>
<a href="#lorem" onclick="route(event)">Lorem</a>
</nav>
<div id="main-page"></div>
</div>
<script src="js/router.js"></script>
</body>
</html>index.html파일이다. 맨 처음 브라우저가 랜더하면 이 페이지가 로딩되고 html > css > js 순으로 진행된다.
👇👇그리고 js파일
const route = (event) => { 1-1.
event.preventDefault();
window.location.hash = event.target.hash;
}; //event target (a태그) 의 해쉬값을 window.location.hash에 넣어라
// about으로 확인해보니까 window.location에 #about 해쉬가 들어가있는 것을 확인 할 수 있다.
//hash changer가 되면서 함수 실행
const routes = { 3-2.
404: "/pages/404.html",
"/": "/pages/index.html",
about: "/pages/about.html",
lorem: "/pages/lorem.html",
};
const handleLocation = async () => { 3
let path = window.location.hash.replace("#", ""); //#about -> about (해쉬값을 빈 문자열로)
// "http://example.com/"가 아니라 도메인 뒤에 / 없이 "http://example.com" 으로 나오는 경우
if (path.length == 0) {
path = "/";
}
const route = routes[path] || routes[404]; 4.
const html = await fetch(route).then((data) => data.text());
//fetch API로 html주소를 불러 올 수 있다. => 불러온 것을 response값으로 바꾸고 그것을 또 문자열로 바꿨다.
//즉 html은 가져온 html의 문자열을 담고 있는 파일이다.
document.getElementById("main-page").innerHTML = html;
}; //`temp_html`같은방식
const GoToLorem = () => {
window.location.hash = "#lorem";
};
// hash url 변경 시 처리 2
window.addEventListener("hashchange", handleLocation);
// 첫 랜딩 또는 새로고침 시 처리 1
document.addEventListener("DOMContentLoaded", handleLocation);
ⓐ로딩이 처음 시작하거나, 새로고침을 하면 1번이 실행되고 handelLocation이 실행되면서 3번과정이 일어난다.
그러면 path.length=0이므로 '/'가 될것이고 3-2에서 '/'은 index.html이므로 index가 나오게 된다.
ⓑ만약 nav바에서 about을 누르게 되면 click 이벤트가 발생하면서 1-1과정이 실행된다.
그래서 window.location 해쉬값을 #about가 되게 한다.
(그래도 없는 페이지로 뜨지 않는다 #이하는 인식하지 않으므로!)
hash가 바뀌면서 2번 과정이 실행되고
handleLocation함수가 실행된다.
a과정과 같이 시작하지만 path.length이 about으로 5이므로 0이아니니까 if문은 그냥 건너뛴다.
3-2번과정의 객체에서 about의 값인 url을 가져오고
fetch API로 그 html을 url를 불러오고 불러온 date들을 text형식으로 바꿨다.
그리고 나서 html변수는 내가 배운 temp_html처럼 #main-page 태그 안에 넣어준다.😎
그러면 새로고침 없이 미리 가져온 파일들을 원할때마다 주머니에서 꺼내서 보듯이 만들 수 있다.
오늘 이 강의 듣고 나서 저녁부터 혼자 구글링도 해보면서 여러가지 글도 읽어보고,
튜터님이 주신 자료들에 하나씩 코드들을 이해하려하다보니 시간이 오래걸렸다 ㅜ
(무슨 자신감인지 모르겠는데 왠지 녹화본 없이 혼자 이해해보고 싶었다...ㅎ괜한 짓)
그러다가 내가 이해한게 맞는지 찜찜해서 확인할겸 녹화본을 보는데 진작에 볼껄ㅠㅠ 궁금한거 속시원이 해결;;;
물어볼까말까 고민했는데 역시 물어보기 전에 이리저리 해본거 칭찬해...💪💪
암튼 오늘 공부는 찾아보다가 이리저리 많은 것을 알았고 시작한지 얼마 안됬지만 벌써 이런것도 공부하는구나에 대한
뿌듯함...화이팅하자...!
'TIL✨' 카테고리의 다른 글
| 프로젝트 계획TIL(15) (0) | 2022.11.18 |
|---|---|
| 기초 프로젝트 전날_TIL(14) (0) | 2022.11.17 |
| git 써보자 TIL(12) (0) | 2022.11.15 |
| TIL(11) (0) | 2022.11.14 |
| CS 기초 TIL(10) (0) | 2022.11.11 |
