겁나 빠른 웹 레시피

리로딩 없이 URL 바꾸기 (음악앱)

수업소개

링크를 누르면 페이지 리로딩이 일어납니다. 이런 문제를 완화하기 위해서 나온 방법이 ajax입니다. 하지만 ajax로 변경된 정보에는 url로 접근하는 것이 어려웠습니다. html5에서는 이런 문제를 해결하기 위해서 history.pushState, history.replaceState라는 기능이 추가 되었습니다. 본 수업에서는 페이지를 부분적으로 변경하면서 URL을 변경할 수 있는 방법에 대해서 알아봅니다. 

사용기술

주요개념

미리보기

수업

예제

page1.html

<!doctype html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="fontello/css/fontello.css">
</head>

<body>
  <article>
    <div class="content">
      consectetur adipisicing elit. Eum sequi consequuntur totam placeat tenetur similique, magni ratione vel delectus consequatur consectetur fugiat eius ipsam fuga ullam quas, voluptates ad nemo.
    </div>

  </article>
  <div class="control">
    <nav>
      <ul>
        <li><a href="page1.html">page1</a></li>
        <li><a href="page2.html">page2</a></li>
      </ul>
    </nav>
    <ul class="player">
      <li><a href="#play" class="play icon-play-circled"><span>play</span></a></li>
      <li><a href="#stop" class="pause icon-pause-circled"><span>pause</span></a></li>
    </ul>
  </div>
  <script src="page.js"></script>
</body>

</html>

page.js

$(document).ready(function () {
  $(document).on('click', '.control nav a', function (event) {
    history.pushState(null, null, event.target.href);
    $('article').load(event.target.href+' article>.content');
    event.preventDefault();
  })
  $(window).on('popstate', function(event){
    $('article').load(location.href+' article>.content');
  })
  var audio = new Audio('Tyburn - Eden.mp3');
  $(document).on('click', '.control .player .play', function(event){
    audio.play();
  });
  $(document).on('click', '.control .player .pause', function(event){
    audio.pause();
  });
});

page.css

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400');
*{
  box-sizing: border-box;
}
body{
  background-image:url(https://source.unsplash.com/category/nature/1600x900);
  background-size:cover;
  min-height:100vh;
  margin:0;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 200;
}
article{
  background-color: rgba(255, 255, 255, 0.59);
  color:black;
  max-width:20rem;
  position: fixed;
  top:50%;
  transform: translateY(-50%);
  font-size:1rem;
  padding:0.5rem;
  font-weight: 200;
}
.control{
  background-color: rgba(0, 0, 0, 0.5);
  color:white;
  position: fixed;
  bottom:0;
  width:100%;
  padding:0 1rem;
}
.control ul{
  list-style: none;
  padding-left:0;
}
.control li{
  display:inline-block;
  padding:0 0.5rem;
}
.control a{
  color:white;
  text-decoration: none;
}
.control>*{
  display: inline-block;
}
.control .player{
  position: absolute;
  right:1rem;
}
.control .player a{
  font-size:1.2rem;
}
.control .player a:hover{
  color:black;
}
.control .player a>span{
  display: none;  
}

 

댓글

댓글 본문
  1. 윤인식
    링크해갑니다~
  2. 한승욱
    현역 작곡가입니다. 아주 탐나는 기술들이네요. 잘 배워서 써먹겠습니다! 고맙습니다.
  3. jeisyoon
    2021.07.10 Change URL without Reload(Music Web) - OK
  4. 산노을
    고맙습니다.
    구경중인데 굉장합니다............!
  5. 김명현
    브라켓에서 미리보기 실행할때 브라우져 주소줄에 c://file 로 나올며 history.pushState 적용 안되면
    브라켓 관리자 권한으로 재실행후
    팝업창 뜨는데 node.js 네트워크 허용 해주시면
    'http://127.0.0.1:5126/reloadless/123123' 와 같이 잘 작동합니다
  6. htmlhm
    아마 CSS 도 같이 로드해야 되지 않을까요... 저도 잘 모르겠네요.
    대화보기
    • htmlhm
      네 3.x 버전들은 IE에서 잘 작동하지 않기 때문입니다.
      3.x 보다는 2.2.4 버전을 추천합니다
      대화보기
      • kanghyeok93@naver.com
        진짜 궁금해서 질문드립니다... 히스토리를 이용해서 화면에 리로드없이 텍스트를 바꾸는것을 보았는데
        텍스트말고 CSS도 적용시켜서 같이 하는방법은 없는건가요 ㅠㅠ?
      • nikji
        이고잉님 너무 재밌어요~ 좋은 강의 감사합니다!!!
      • 폭스킴
        이 강좌에서 jQuery 2.x 버전을 사용하셨는데 특별한 이유가 있으신 건가요? 3.x 버전을 사용하면 호환성이라던지
        문제가 생길까요?
      • whale0516@gmail.com
        이거 하다가 jquery 가 작동하지 않아서 고생했는데 $ 대신에 jQuery 넣어주시면 됩니다
      • whale0516@gmail.com
        bracket 같네요
        대화보기
        • 라이
          첫번째 영상에서 실시간으로 코딩반영되는건
          어떤 툴 사용하신건가요??
        • 호동
          윈도우 사용자인데요. brackets에서 실시간 미리보기를 하면 강의내용과 같이 127.0.0.1로 안 나오고 file://로 나오는데 어떻게 해야 강의내용과 같이 나오는 건가요?
        • 마엘
          굉장히 흥미롭게 잘 따라해봤습니다! 요즘 가장 재미있게 배우고 있는거 같아요 ㅎㅎ 감사합니다
        버전 관리
        egoing@gmail.com
        현재 버전
        선택 버전
        graphittie 자세히 보기