* 그날그날 pjax를 공부한 과정을 일기 쓰듯 정리하는 공간입니다.
* 깃허브 TLI에 쓰려다가 마크다운 문법을 공부하는게 의미가 있나 싶어 블로그로 돌아옵니다..
(근데 생각해보니까 굳이 마크다운으로 할 필요 없이 txt파일을 커밋하면 됐었네요 ㅋㅋㅋ)
오라클 클라우드로 가상 머신에 리눅스를 올리고 nginx를 이용해 웹서버를 만들었다.
서버 사이드 언어로는 php를 사용하여 웹페이지에 회원가입과 로그인기능을 만들고자 한다.
DB는 마리아DB를 설치하였다.
디자인은 엉성하지만, 대충 이런 레이아웃을 만들었다.
악보검색, 그룹, 마이페이지, 회원가입 각각의 버튼을 클릭할 때마다,
오른쪽 공간에 내용물을 다르게 띄우는 것이 목표이다.
이때 내용물을 띄울 때 PJAX 기법을 사용하는 것이 목표이다.
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');
이 코드를 실행해도 당연히 아직 register 클래스가 없으니 이 변수에는 null이 들어갈 수 밖에 없는 것이다.
그래서 DOMContentLoaded 이벤트에 변수 선언 코드와 이벤트 리스너를 달아주는 코드를 넣어보았다.
메인 화면에 보여주고 싶었던 내용들이 정상적으로 보여진다.
이 내용들은 index 페이지에 하드코딩 된 것들이 아니라, 다른 외부 html 파일로 존재하는 내용을
fetch를 사용해 가져온 것이다.
하지만 이 상태에서 회원가입을 클릭하면 다음과 같이 화면이 나왔다.
내가 설정한 404 에러 페이지 화면이다.
링크를 타고 이동하지 않게 막아놨는데, 링크를 타고 이동한다....
분명 이렇게 리스너를 설정했는데, 왜인지 콜백함수가 실행이 안된다.
기존 코드를 주석처리하고, 이렇게 코딩해보았다.
그러자 회원가입 버튼 클릭을 해도 아무 일도 일어나지 않게 되었다.
그래서 다음과 같이 코딩해보았다.
그러자 이번에도 아까와 똑같은 현상이 발생했다.
그렇다면 아래에 작성한 코드 구조 자체에는 문제가 없다.
event.preventDefault(); 메소드가 실행되지 않는 것도 아니다.
그래서 코드를 한 줄씩 실행해보기로 했다.
그리고 이렇게 했을 때, 같은 문제가 발생하는 것을 알았다.
왜인지 event.preventDefault() 메소드가 실행되지 않고 href 속성값의 링크로 이동한다.
그러다 내가 작성 메소드가 getAttribute() 가 아니라 gettAttribute() 였음을 발견했다..
get 다음에 t를 하나 더 쓴게 문제였다.
도대체 왜 이걸 에러를 안띄워줬던 걸까..
런타임 에러조차 못보았다.
물론 그 전에 꼼꼼하게 코딩을 못한 내 잘못도 있지만
마지막 코드가 실행이 안된 이유가 존재하지 않는 메소드를 실행해 오류가 난 것이라면
적어도 오류 메세지는 내줘야 할 것 아닌가....
(이래서 커리어스킬 저자가 JS를 싫어했던 건가)
다음과 같이 기존 코드를 수정했다.
내가 원하던 대로 결과도 나왔다!
다음에는 pjax와 ajax를 구분짓게 해주는,
페이지 뒤로가기 기능을 popState를 이용해 구현해보고자 한다.
