ajax를 이용해서 리로드 없이 정보를 부분적으로 변경할 수 있게 되었지만, 사용자가 자신이 보고 있는 정보를 다른 사람에게 공유할 수는 없게 되었다. 이런 문제를 개선하는 방법을 알아보자
( 본문이 커피이든 차이든 url 이 같기 때문에 페이지 링크 공유로 알려줄 수가 없음 )
목표 : 해쉬뱅을 이용해서 어떤 웹사이트에 처음 들어왔을 때 초기 페이지를 로드
ajax 로 생긴 부작용
1. 목록 링크가 순수한 상태로 활성화되었으면 좋겠다.
2. 우리가 알고 있는 웹페이지는 주소가 페이지 별로 달라지는 걸 통해서 url로 공유할 수 있는 특징이 있었다.
해결책
1. 해쉬(hash) 방식을 적용
어떤 페이지는 URL 을 통해서 접근할 수 있다. 이런 경우 페이지 안에서 어떤 특정한 부분으로 접근해보자
( * atom 에디터 기능 : lorem100 - 백 개의 랜덤한 단어가 형성되는 기능 )
<!doctype html>
<html>
<body>
<a href="#three">three</a>
<p>
aaaaaaaaa 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 aaaaaaaaa.
</p>
<p>
bbbbbbbbb 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 bbbbbbbbb.
</p>
<p id="three">
cccccccccc 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 cccccccccc.
</p>
<script>
//현재 이 주소상에서 #에 해당되는 해쉬값이 무엇인지 알아온다.
if(location.hash){
// Fragment exists
console.log(location.hash.substr(1));
}else{
// Fragment doesn't exists
}
</script>
</body>
</html>
hash.html 페이지에서 url 을 통해서 세 번째 문단에 사용자에게 접근할 수 있도록 하고 싶다면,,,?
그때 사용하는 것이 '해쉬(hash)' 이다. "북마크 기능"
식별하고 싶은 부분에 id 값을 주는 것이 약속이다. id="three"
웹페이지 공유 시, url
http://localhost:8000/hash.html#three#three 하면 페이지가 리로드 되지 않고, id값이 three 인 곳으로 스크롤된다.
이 주소를 다른 사람에게 공유하면, url을 통해서는 웹페이지에 접근할 수 있고, 그 후, 페이지 안에서 #을 통해서 id 값이 three 인 부분을 올 수 있다. 이러한 컨텐츠 부분을 '조각'이라는 뜻에서 '프래그먼트'라고 하고, 그 조각을 식별하는 식별자라고 '프래그먼트 아이덴티티 파이어'라고 한다.
헤쉬값이 무엇이냐에 따라서 ajax로 다른 페이지를 로드해서 시작되는 페이지를 셋팅할 수 있다.
현재 이 주소상에서 #에 해당되는 해쉬값이 이 페이지에서 무엇인지 알아온다.
how to get hash from url javascript
해쉬뱅(#!) 적용하기
'#'은 관습적으로 북마크 기능이기 때문에, 구분을 위해서 뒤에 느낌표를 붙여 '#!' 으로 사용한다.
# 는 '해쉬' , ! 는 '뱅' 이라고 부르며 #! 을 '해쉬뱅'이라고도 부른다.
<ol>
<li><a href="#!coffee" onclick="fetchPage('coffee')">커피</a></li>
<li><a href="#!tea" onclick="fetchPage('tea')">차</a></li>
<li><a href="#!bread" onclick="fetchPage('bread')">빵</a></li>
</ol>
a태그에 href로 해쉬뱅을 추가하여 목록이 순수한 링크의 형태를 가지면서, 클릭하는 것에 따라서 본문 내용이 로드되고 URL 주소값도 바뀐다.
사용자가 이 주소를 카피해서 누군가에게 공유하고 싶다....?
그 사람이 전달받은 url을 클릭해서 들어왔을 때 똑같은 화면을 보려면?
웹페이지가 시작될 때, location.hash 값에 따라 해쉬값이 있다면 fetchPage를 통해서 페이지를 스크롤해주고,
해쉬값이 없다면, welcome 페이지를 만들어서 default 로 welcome 페이지가 보여지도록 한다.
<!doctype html>
<html>
<head>
<title>JAVA kong Cafe</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./colors.js"></script>
<script>
var fetchPage = function(filename){
fetch(filename).then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})
}
if(location.hash){
fetchPage(location.hash.substr(2)); //substr 문자열 자르기
}else{
fetchPage('welcome');
}
</script>
</head>
<body>
<h1><a href="#!welcome">Javakong Cafe</a></h1>
<input type="button" value="night" onclick="nightDayHandler(this)">
<div id="grid">
<ol>
<li><a href="#!coffee" onclick="fetchPage('coffee')">커피</a></li>
<li><a href="#!tea" onclick="fetchPage('tea')">차</a></li>
<li><a href="#!bread" onclick="fetchPage('bread')">빵</a></li>
</ol>
<article>
</article>
</div>
</body>
</html>
하지만, 이 방식엔 여러 가지 맹정이 존재한다.
Ajax 를 통해서 페이지를 보여주게 되면, 가장 큰 문제가 검색엔진 최적화가 잘되지 않는다.
검색엔진은 웹페이지를 다운로드 받아서 분석해야되는데, 웹페이지 자체는 실제 내용이 없다. 내용은 백엔드에서 동적으로 가져오기 때문에,
내비게이션을 했을 때 내용이 바뀌어야 하는데 바뀌지 않는다. (구현은 추후에...)
해쉬뱅을 이용해서 구현한 방식은 현시점에서 쓰지 않고 최근에는 pjax 라고 하는 기술을 많이 사용한다.
새로운 기술이 아니라, 여러 가지 단점을 보완한 진화된 방식의 기술이다.
'코딩공부 > WEB3 - Ajax' 카테고리의 다른 글
| [6] fetch API polyfill (0) | 2019.09.13 |
|---|---|
| [5] 글 목록 ajax 로 구현하기 (0) | 2019.09.12 |
| [3] Ajax 의 적용 (0) | 2019.09.10 |
| [2] fetch API (0) | 2019.09.09 |
| [1] Ajax 로 얻을 수 있는 장점 (0) | 2019.09.09 |
