[WEB] PJAX 독학 (1) - 동적으로 페이지 내용 부분 로드 하기

* 그날그날 pjax를 공부한 과정을 일기 쓰듯 정리하는 공간입니다.

* 깃허브 TLI에 쓰려다가 마크다운 문법을 공부하는게 의미가 있나 싶어 블로그로 돌아옵니다..

(근데 생각해보니까 굳이 마크다운으로 할 필요 없이 txt파일을 커밋하면 됐었네요 ㅋㅋㅋ)

오라클 클라우드로 가상 머신에 리눅스를 올리고 nginx를 이용해 웹서버를 만들었다.

서버 사이드 언어로는 php를 사용하여 웹페이지에 회원가입과 로그인기능을 만들고자 한다.

DB는 마리아DB를 설치하였다.

디자인은 엉성하지만, 대충 이런 레이아웃을 만들었다.

악보검색, 그룹, 마이페이지, 회원가입 각각의 버튼을 클릭할 때마다,

오른쪽 공간에 내용물을 다르게 띄우는 것이 목표이다.

이때 내용물을 띄울 때 PJAX 기법을 사용하는 것이 목표이다.

html5.gingerhost.com/seattle

Seattle - Part of a demo for #ProSEO

Seattle is the northernmost major city in the contiguous United States, and the largest city in the Pacific Northwest and the state of Washington. It is a major seaport situated on a narrow isthmus between Puget Sound (an arm of the Pacific Ocean) and Lake

html5.gingerhost.com

위 사이트는 pjax를 사용해 만든 예제 사이트이다.

인터넷 검색을 하다보니 요즘은 JQuery 사용을 지양하는 추세라고 한다.

그래서 fetch를 사용하기로 했다.

우선 회원가입 버튼을 눌렀을 때, 회원가입 페이지 내용물을 띄우기 위해

회원가입에 링크를 걸고, onclick 이벤트를 처리하는 코드를 작성해야한다고 생각했다.

onclick 이벤트를 처리하는 코드를 작성하는 방법은 여러가지가 있었다.

1. html 상에서 onclick 속성을 직접 설정

2. javascript 상에서 요소를 가져와 해당 요소에 동적으로 리스너를 달아주는 방법

크게 이렇게 두가지 방법을 알게 되었고, 2번째 방법을 사용해보기로 했다.

function setContent(url) {
  history.pushState('', '',url);
  if (url == '/') {
    url = 'main.html';
  }

  alert('url : ' + url);

  fetch('content/'+url).then(function(response) {
    response.text().then(function(text){
      document.querySelector('.main_content').innerHTML = text;
    })
  });
}

var mainContent = document.querySelector('.main_content');
var registerAccount = document.querySelector('.register');

registerAccount.addEventListener('click', function(event) {
  url = registerAccount.gettAttribute('href');
  alert(url);
  setContent(url);
  event.preventDefault();
});

window.addEventListener('DOMContentLoaded', function() {
  alert('onload : ' + location.href);
  setContent('/');
});

처음에는 이렇게 코드를 작성해보았다.

코드가 실행되지 않았다.

브라우저를 켜서 오류 메세지는 다음과 같았다.

"cannot read property 'addEventListener' of null"

밑줄은 registerAccount.addEventListener() 쪽에 쳐져있었다.

이 부분에서 막혀 며칠을 고민하다 그냥 pjax 공부를 방치하고 있었다.

생각해보니 DOM과 JS에 대한 이해가 아직 부족했었던 것 같다.

자바스크립트를 html안에 인라인으로 쓸 때는 전혀 몰랐는데,

이렇게 외부로 빼고보니 html이 로드 되기 전에 코드가 실행되고 있었음이 확실히 보였다.

html의 body 태그 내부 요소들이 생성되기도 전에 저 코드들이 head 태그에서 실행되고 있었으니

당연한 결과였다.

registerAccount = document.querySelector('.register');