[fragment identifier를 이용한 초기 페이지 기능 구현]
-- ajax를 사용했을 때 직면할 수 있는 여러가지 부작용들을 완화해나가는 방법을 살펴보기
1. 링크인데 밑줄이 없고 순수한 상태로 활성화 되게 하고 싶어할듯.
2. 우리가 알고있는 웹페이지는 주소가 페이지 별로 달라져 주소를 공유할 수 있는 측면이 있었으나,
ajax는 그러한 한계점이 있다.
[해시]
-- 페이지 안에서 어떤 특정한 부분으로 접근할 때 '
세번째 문단의 사용자에게 url을 통해서 접근할 수 있도록 하고 싶을때, hash기능을 사용할 수 있다.(bookmark 기능)
이러한 특성을 이용해서 url에 색상을 입힐 수도 있고 hash값이 무엇이냐에 따라서 ajax로 다른 페이지를 로드해서
시작되는 페이지를 셋팅할 수 있다.
<!DOCTYPE html>
<html>
<body>
<a href="#three">three</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="three">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<script>
if(location.hash){
//location.hash는 이것이 URL에 있는 #값 을 알려준다
console.log(location.hash.substr(1));
}else{
}
</script>
</body>
</html>
[적용] : 해시뱅을 통해 어떤 웹사이트에 처음 들어왔을 때 초기페이지 로드하는 방법
<!doctype html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol>
<li><a href="#!html" onclick="fetchPage('html')">HTML</a></li>
<li><a href="#!css" onclick="fetchPage('css')">CSS</a></li>
<li><a href="#!javascript" onclick="fetchPage('javascript')">JavaScript</a></li>
</ol>
<article>
</article>
<script>
function fetchPage(name){
fetch(name).then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
});
}
if(location.hash){
fetchPage(location.hash.substr(2));
}else{
fetchPage('Welcome');
}
</script>
</body>
</html>
[해쉬뱅을 이용했을때 맹점]
ajax를 이용해서 하게 되면 검색엔진 최적화가 잘 안된다.
검색엔진은 웹페이지를 다운받아서 분석해야하는데 웹페이지 자체는 실제 내용이 없다.
내용은 백엔드에서 동적으로 가져오기때문에
네비게인셩르 했을때 내용이 바뀌어야 되는데 안바뀌면 우리가 구현할 수도 있겠지만
현 시점에서는 이런방식 이 해쉬뱅을 이용해서 구현한 방식은 현시점에서 쓰지 않고
현재는 pgx라는 기술을 많이 쓴다.
새로운 기술이 아니라 지금 우리가 배웠던 것을 좀더 여러가지 단점들을 보완한 그런 진화된 방식의 기술이기 때문에
때문에 나중에 필요할 때 공부하면 된다.
[글목록 ajax로 구현하기]
https://opentutorials.org/course/3281/20576
글목록 ajax로 구현하기 - 생활코딩
수업소개 글목록을 ajax로 구현하는 방법을 알아봅니다. 강의1 소스코드 변경사항 index.html WEB1 - Welcome WEB
function fetchPage(name){ fet
opentutorials.org
[fetch API polyfill]
- fetch API는 비교적 최신기능이라서 아직 지원되지 않는 브라우저를 사용자가 사용하는 경우 동작하지 않을 수 있음.
- polyfill을 이용하면 fetch API를 지원하지 않는 웹브라우저에서도 이용할 수 있다.
- 지원되지 않는 브라우저에서 코드가 실행되면 polyfill이 활성화되서 대신 동작하게 된다.
https://github.com/github/fetch/releases/tag/v2.0.4
-- 구글에 cross browser polyfill github쳐도 나옵니당
Release fetch 2.0.4 · github/fetch
Support obs-fold as delimiter when parsing raw headers Ensure cookies aren't sent if credentials: omit Allow status: undefined in Response
github.com
[앞으로 공부할만한 주제 소개]
- xml
- JSON
Single Page Application
Pjax : pushstate + ajax : 웹페이지를 리로드 하지 않고 부분적으로 데이터를 교체하면서도 검색엔진과 같은 로봇들이 저보에 접근하는 것을 방해하지 않는 그러한 기능을 만드는것으 목적으로 한다.
검색엔진에게 발견되는 것이 중요한 서비스를 만들고 있다면 pjax를 적용하는게 좋다.
Progressive Web Apps : pwa락 하는 유행어가 등장
- 싱글 페이지 애플리케이션에 발전된 형태 싱글 페이지 애플리케이션이 에이젝스를 골격으로 만들어진 일련의 웹 애플리케이션 들을 가리키는 유행어라면 프로그래시브 웹 앱은 spa를 기반으로 만들어진 웹의 오프라인에서도 동작하는 특성을 추가했다고 볼 수 있다.
웹의 가장 큰 단점은 웹이 온라인 기반이기 때문에 오프라인에서는 동작하지 않는다는 것
최근 웹 기술들은 웹을 오프라인에서도 동작하게 하는 특성들이 대거 추가되고 있다. 이러한 특성을 이요하면
웹이 갖고있는 언제나 최신상태를 유지한다라는 장점과 앱이 갖고있는 오프라인에서도 동작한다는 장점만을 모은 환상적인 소프트웨어를 만들 수 있다. 이런 기술적인 흐름을 부르는 유행어가 프로그래시브 웹앱이라고 할 수 있다.
'생활코딩 > WEB' 카테고리의 다른 글
| 4) WEB - Ajax(1) (0) | 2020.07.01 |
|---|---|
| 3) WEB - Javascript (0) | 2020.06.22 |
| 2) WEB - CSS (0) | 2020.06.16 |
| 1) WEB - HTML (0) | 2020.06.16 |
