이진욱의코딩

ajax를 이용한 초기페이지 구현 본문

JS

ajax를 이용한 초기페이지 구현

Crucifi 2019. 9. 26. 02:23

저번 시간까지 우리의 ajax를 이용해서 리로드 없이 정보를 부분적으로 변경할 수 있게 되었습니다만, 사용자가 자신이 보고 있는 정보를 다른 사람에게 공유할 수는 없게 되었습니다.

이런 문제를 개선하는 방법을 알아보겠습니다. 

 

우리는 fragment identifier를 이용해서 초기페이지 구현과 적용방법에 대해 알아볼 예정입니다.

사용자가 들어와서 하나하나 내비게이션을 해서 정보를 보는 것뿐만 아니라 주소가 페이지별로 달라지는 것을

통해서 주소를 공유할 수 있는 측면이 있지만 여러 가지 한계가 있습니다.

이 부분에 대해 원시적인 접근방법과 근본적인 해결방법을 살펴보겠습니다.

 

우선 원시적 방법부터 살펴보도록 하죠

만약 3 문단의 장문의 글이 존재할 때 사용자가 마지막 3번째 문단에 접근하고 싶을 때 url을 통해 접근하는

방법이 hash라는 기능을 통해서 접근할 수 있습니다. 말 그대로 북마크를 한다 라고 생각하시면 될 것 같습니다.

 

식별하고 싶은 문단에 id값을 먼저 줍니다.

<p id="three">

 

그러고 나서 

<a href="#three">three</a>

이렇게 a태그를 줍니다.

 

그러면 hash값에 따라 ajax로 페이지를 로드해서 시작되는 페이지를 세팅할 수 있습니다.

"서버 주소/hash. 파일명#원하는 페이지 좌표"

이렇게 하면 사용자가 바로 원하는 페이지의 원하는 부분으로 바로 갈 수 있다는 것이죠.

 

그리고 script문에 조건문을 하나 적어서!(뱅)이라는 부분을 없애야 합니다.

왜냐하면 뱅이라는 부분을 삭제하지 않으면 name에 포함이 됨으로 페이지 로드 시 에러가 발생하기 때문입니다.

그래서

 console.log(location.hash.substr(1));

substr(1)해서 한자리를 날려버리는 것이죠.

 

소스 전체입니다.

<!doctype html>
<html>
  <body>
    <a href="#three">three</a>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam minima voluptatum iure iusto, sequi aperiam, totam reiciendis cum consequatur molestias exercitationem ex nulla? Reiciendis velit odit minus dolore, nihil consequuntur qui pariatur nesciunt cupiditate debitis porro, autem recusandae necessitatibus assumenda aut a molestias in aliquam eligendi, eius totam. Reprehenderit deleniti consequuntur incidunt culpa fuga maxime sed, reiciendis voluptate facere sapiente, pariatur! Suscipit possimus a at corrupti rerum. Pariatur praesentium, veniam vitae voluptates, quidem labore impedit ab quos soluta modi eveniet quia mollitia quod natus iste earum, dolorem minus! Ullam possimus commodi alias, et reiciendis provident quidem nesciunt atque repellendus cum?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sint hic, omnis in at excepturi, ipsum perspiciatis distinctio, optio vitae veniam consectetur praesentium est! Minus repudiandae inventore blanditiis ullam sit culpa dicta soluta modi, totam ab consequatur laudantium temporibus aut perspiciatis aspernatur quos amet autem earum sequi! Voluptatem optio tenetur distinctio enim voluptatum sapiente praesentium, similique iste. Facilis cupiditate, vitae quisquam deleniti porro magnam neque autem perspiciatis itaque tenetur adipisci iste optio! Porro quidem mollitia ea, nemo, ab, quibusdam nihil sint quisquam rerum perspiciatis fugit, et consectetur odio rem eius obcaecati? Numquam vitae molestiae, alias aut, porro ab maxime fugiat.
    </p>
    <p id="three">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum soluta saepe, necessitatibus asperiores incidunt quis quibusdam aspernatur voluptatibus, distinctio nostrum nobis commodi sequi iusto vitae dicta! Magnam maiores deleniti iste sequi eveniet laudantium amet, sed adipisci? Nisi voluptates labore atque nihil quia, at tempora eius iure commodi dolore officia vitae ducimus excepturi. Asperiores maxime, atque cum ad deleniti illo sed ab nostrum dolor culpa mollitia molestiae vitae veritatis aut quibusdam accusamus aperiam, voluptatem nemo, cumque! Porro expedita, harum, nisi rerum nesciunt nobis impedit cumque ut ab quasi cupiditate beatae dolorem enim veniam accusantium autem odit reiciendis! Fugit soluta, vero optio.
    </p>
    <script>
      if(location.hash) {
        console.log(location.hash.substr(1));
      } else {
      // Fragment doesn't exist
      }
    </script>
  </body>
</html>

원시적인 방법으로 해보았으니 이번에는 우리의 방식대로 응용을 해보도록 하겠습니다.

 

앞부분이랑 비슷한 부분이 있으니 스킵하고 설명하겠습니다.

페이지 주소를 긁어서 보낼 때 페이지에 들어오고 싶어 하는 사용자에게 기본 페이지 화면을 보여주고

싶을 때 어떻게 하는지 알려드리겠습니다.

 

마찬가지로 조건문을 적어서 하시면 됩니다.

if(location.hash){
    fetchPage(location.hash.substr(2));
  } else {
    fetchPage('Hi');
  }

서버를 통해 페이지에 사용자가 들어와서 hash가 없다면 'Hi'라는 문구를 보여주는 조건문입니다.

substr(2)를 적어서 앞부분의 #과! 을 없애줍니다. 삭제하지 않으면 name에 포함이 되므로

fetch(name)~~~ 에서 문제가 발생합니다. 

 

최종코드입니다.

<!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="#!Hi">WEB</a></h1>
  <!-- #이라는 것은 북마크를 뜻하기 때문에 관습적으로 #!를 적는다. -->
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">
  <ol id="nav">
    <li><a href="#!html" onclick="fetchPage('html.txt')">html</a></li>
    <li><a href="#!css" onclick="fetchPage('css.txt')">css</a></li>
    <li><a href="#!javascript" onclick="fetchPage('js.txt')">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('Hi');
  }
  </script>
</body>
</html>

페이지 화면입니다.

 

 

여기까지 페이지에 들어와서 해쉬(#), 뱅(!)을통해 어떤 웹사이트에 들어왔을 때 초기페이지를 로딩하는 방법까지

살펴보았습니다.

'JS' 카테고리의 다른 글

(Node.js) 동기와 비동기 그리고 콜백_callback에 대해서 알아봅시다.  (0) 2019.10.30
node.js설치방법과 node.js를 이용해서 웹서버만들기  (1) 2019.09.27
ajax의 적용  (0) 2019.09.26
서버를 이용해서 Ajax하기(기초)  (0) 2019.09.06
jQuery 객체에 대해 알아봅시다.  (0) 2019.08.31
'JS' Related Articles more