생활코딩

Coding Everybody

코스 전체목록

닫기

초기 페이지 구현

수업소개

우리의 ajax를 이용해서 리로드 없이 정보를 부분적으로 변경할 수 있게 되었습니다만, 사용자가 자신이 보고 있는 정보를 다른 사람에게 공유할 수는 없게 되었습니다. 이런 문제를 개선하는 방법을 알아보겠습니다. 

 

 

 

fragment identifier를 이용한 초기 페이지 기능 구현

소스코드

<!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>

 

 

적용

소스코드

변경사항

index.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="#!welcome">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">
  <ol id="nav">
    <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>

 

댓글

댓글 본문
  1. 2022.03.08
  2. 2022.02.02
  3. 20220201
  4. 아까그애
    2022-01-21 완료
  5. settings에서 lorem Packages를 따로 설치해서 쓰니 되네요~ㅎㅅㅎ
    대화보기
    • 소설가
      2021-12-29 완료
      고맙습니다.
    • LiveFreeOrDie
      질문있습니다! 현재 시간 기준으로 요즘도 pjax를 사용하나요?
    • 넘무
      잘봤습니다
    • Koma Doodugi
      2021.10.27 완료
    • 행달
      21.10.21 감사!
    • inventorh
      2021.09.29
    • shg7271
      210805
    • labis98
      20210719 completed!
    • 신희준
      초기페이지(2/2) 0:43초 부분에
      <a href="#!html"....> 이라고 #!를 바로 쓰는데

      초기페이지(1/2) 2:39초에 식별하고 싶은 것에 id 값을 먼저 주라고 되어있습니다.
      <id="three"> 라고 영상에선 id 값을 먼저 주고 <a href="three">라고 해서 url에 표시가 되었는데

      <a href="#!html"....>같은 경우는 html 파일 안에 제목태그인 h2 밖에 없습니다.
      이러한 경우는 html 파일 자체가 식별자 필요없이 그냥 인식되는건가요?
    • Yohanesty
      완료
    • 별거
      2021.04.30 완료했습니다.
      hashbang 사이트 들어갈때마다 헤시태그 붙으면서 이동되는게 굉장히 궁금했는데 이렇게 사용하는 거였군요!!
    • EJArtsociety
      봤긴 봤는데... 이해가 되지 않아요 ㅠㅠ
    • 김우중
      감사합니다
    • mymie
      완료
    • chimhyangmoo
      2021.02.07
    • jeisyoon
      2021.01.29 수강
    • hanel_
      21.01.29 잘보고 갑니다. 감사합니다 ^^
    • 고니스타크
      2021 2일차
      hjax로가요
    • 주니어개발자
      Ajax와 HashBang(!#)
      (해시뱅, 셔뱅, 샤-뱅, 파운드-뱅, 해시-플링, 크런치뱅)

      pjax
    • 김용욱
      1228
    • 생활둘기
      2020 12 22
    • kkn1125
      20.12.20 완료~!
    • Yeonny
      2020.11.12 done
    • 둘리
      이 영상을 빨리 봤다면 좋았을텐데..^-^ 결국 비효율적인 방법으로 해결을 봤지만.. 이렇게 간단한 방법이 있었다니!
    • Sunny
      2020.11.02.MON.
    • 웹짱
      2020.10.26 Ajax초기패이지 로드방법
    • HyeonHui Jeong
      9/10
    • Jooni
      10번째줄에 이걸로 바꾸시면 됩니다
      <h1><a href="#!welcome" onclick="fetchPage('welcome')">WEB</a></h1>
      대화보기
      • 김광래
        2020.09.07. 20:35 완료
      • 허우룩
        2020.09.06
      • momo
        20.08.30 감사합니다
      • 이현규
        이미 해결하셨을 것 같지만 이고잉님께서 fetchPage를 사용을 안하셨는데 똑같이 onclick fetchPage 를 넣어주시면 됩니다.
        대화보기
        • 신원석
          html , css , javascript 같은 다른 해쉬로 이동했다가 다시 상단의 web 을 클릭해서
          welcome 해쉬로 이동하면 메인화면이 나오질 않습니다...
          제가 실습하면서 코드를 잘못 입력했나 싶어서 소스코드 그대로 가져와서
          복사 붙여넣기 했음에도 불구하고 같은 현상이 나타납니다.
          강의에서도 초기페이지 (2/2) 뒷부분쪽 보시면 이고잉님이 web 클릭했는데도
          메인화면으로 넘어가지않고 가만히 있는 장면이 나옵니다.
          어떻게하면 해결할 수 있을까요?
        • pupu
          2020/07/17 완료
        • 뽀짝이
          완료
        • 김혜린
          6월 25일 완료!
        • Jakyung Kwon
          감사합니다!!
          대화보기
          • psyless
            20200620
          • Amousk
            좋은 영상 감사합니다.
          • 개발신
            2020.06.15
          • hpyseun
            05/22/2020 완료 감사합니다
          • 야루
            완료
          • OneJae EE
            20.04.15 수 / 37세 비전공자 / 완료
          • 제피
            lorem 100이 안먹히네요..
          • Always
            이번건 좀 어렵네요 ㅜㅜ ㅎㅎ
            항상 유익한 강의 감사합니당~
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기