자바스크립트로 라우터 구현하기 / navigo

리액트를 들어가기전 자바스크립트로 팀프로젝트를 진행하고 있다.

 

팀프로젝트를 진행하면서 SPA(단일 페이지 애플리케이션)을 개발하기로 했고, 바닐라로 라우터를 구현하려고 했지만..

기간이 있는 팀프로젝트에서 라우터 기능하나를 잡고 구현하기에는 시간이 너무 촉박했다..

그렇게 다른 수강생분의 도움으로 navigo라는 라이브러리를 알게 되었다.

---

그전 카카오엔터 FE 기술블로그에 올라온

라이브러리 없이 라우터(Router) 만들기

라이브러리 없이 라우터 만들기라는 글을 보게 되었고,

바닐라 JS로 라우팅 시스템을 개발하기 위해서는 2가지 방법이 있는걸 알게 되었다.

- 첫 번째, 해시 라우터 : Fragment 해시를 이용하는 방법

- 두 번째, 브라우저 라우터 : history API를 이용하는 방법

* history API인 pushState, popState 메서드가 지원 되면서, Fragement 해시를 사용하지 않아도 라우팅 시스템을 개발할 수 있게 되었다고 한다. 그러나 모든 브라우저에 지원되는게 아니기 때문에 아직은 무리인거 같다.

(IE, 낮은 버전의 브라우저를 제외하고는 가능..)

 

카카오엔터 FE 기술 블로그에 올라와있는 방법은 첫번째 방법인 해시 라우터, Fragment 해시를 사용하는 방법이다.

잠깐 알아보자!

 

Fragment 해시

- URL에 포함될 수 잇는 해시(#)로 시작하는 부분으로, 웹페이지의 섹션을 식별한다.

- 예를 들어 Fragment 해시가 "codenote"이면, 해시를 통해 HTML에서 id="codenote" 요소를 식별하고,

해시 변경이 일어 났을 때 브라우저는 서버를 요청하는게 아니기 때문에 새로고침이 이러나지 않는다.

- 그 외에도 새로고침 또는 리다이렉션이 발생하게 되면 해시 이전에 도메인 주소로 요청을 보내게 되고 오류가 발생하지 않는다.

- 언제나 올바른 entry point로 요청이 간다.

---

바닐라 자바스크립트로 라우터를 구현하려는 목적이라면 위에 있는 카카오엔터 FE 기술 블로그 포스팅을 참고하자.

이번 프로젝트가 끝나면 바닐라 자바스크립트로도 라우터를 구현해보도록 해야겠다.

---

그래서 이번에 사용하려는 navigo 라이브러리!

이 라이브러리도 Fragment 해시를 이용하는 방법이다.

코드도 간단했고 중첩으로 라우터를 구현할 수 있기 때문에

큰 어려운없이 라우터를 구현할 수 있었다.

---

GitHub - krasimir/navigo: A simple vanilla JavaScript router.

Navigo 라우터 사용방법

- github 개발 페이지를 확인해보면 알 수 있듯이 사용방법은 어렵지 않았다.

cdn 또는 npm/yarn을 통해서 설치를 진행하면 된다.

<script src="//unpkg.com/navigo"></script>

> npm install navigo --save
> yarn add navigo -S

 

 

import Navigo from 'navigo'; // When using ES modules.

const router = new Navigo('/');

- 설치가 끝나면 변수를 통해서 Navigo 인스턴스를 만들어주자.

안에 들어가는 내용은 라우터가 실행 되었을 때 url에 추가되는 주소를 구분하는 문자열을 넣어준다.

 

 

router
  .on({
    'page1': () => {
      document.querySelector('#content').innerHTML = 'Page 1 content';
    },
    'page2': () => {
      document.querySelector('#content').innerHTML = 'Page 2 content';
    }
  })
  .resolve();

- 변수에 .on 메서드를 만들어주고 변환될 page이름을 넣어주고 화살표 함수를 통해서 들어갈 내용들을 뿌려주면 된다.

- 키값으로 넘겨주는 "page1" 과 같은 값들은 페이지의 주소라고 생각하자. 문자열로 꼭 만들어주지 않아도 되지만 하이픈-과 같은 기호를 사용하게되면 문자열로 감싸주어야한다.

- 주소가 다르게 되면 라우터는 실행되지 않는다. 꼭 주의하자!

 

 

document.getElementById("app").innerHTML = `
  <nav>
	<a href="page1">Page 1</a>
	<a href="page2">Page 2</a>
  </nav>
  <div id="content"></div>
`;

- html에 a태그들을 넣어주어야한다. 라우터가 실행될 a링크에 내가 페이지별로 넣어줄 주소를 작성하자.

---

중첩 라우터는?

- 웹페이지 같은경우 라우터를 중첩으로도 사용하는 경우가 많이 있다.

- 그럼 Navigo 라이브러리를 사용하면서 중첩으로 라우터를 사용하게 된다면 어떻게 해야할까?

 

const mainRouter = new Navigo("/");

mainRouter
  .on({
    'page1': () => {
      document.querySelector("#content").innerHTML = `
        <nav>
          <a href="page1/books" data-navigo>책</a>
          <a href="page1/clothes" data-navigo>의류</a>
        </nav>
        <div id="nested-content"></div>
      `;
      const nestedRouter = new Navigo("/");
      nestedRouter
        .on({
          "/books": () => {
            document.querySelector("#nested-content").innerHTML = "신상품 - 책";
          },
          "/clothes": () => {
            document.querySelector("#nested-content").innerHTML = "신상품 - 의류";
          }
        })
    },
    'page2': () => {
      document.querySelector("#content").innerHTML = "베스트 상품 정보";
    },
  })
  .resolve();

- 중첩 라우터를 하기 전에는 innerHTML에 nav태그와 태그만 넣고 끝이였다면.

- 다른 라우터를 추가할 요소와 새로운 navigo 인스턴스를 생성해주고 .on 메서드를 다시한번 실행시켜주면 된다.

 

* .resolve() 는 현재 페이지에 정의한 코드들을 실행해준다.

---

다른 메서드

router.hooks()    // 페이지로 접근하기 전후, 페이지를 떠날 때 실행할 코드를 정의
router.on()       // 관리할 페이지를 정의
router.notFound() // 존재하지 않는 페이지로 접근했을 때, 실행할 코드를 정의
router.resolve()  // 현재 페이지에 맞는 정의한 코드를 실행
router.navigate() // 페이지를 이동


router
  .hooks()
  .on()
  .notFound()
  .resolve()

- 체이닝으로도 가능하다.

- 가장 중요한 hooks를 꼭 이해하고 사용하자.

* 처음 navigo를 연결하고 구현할때 hooks를 활용하지 못해 페이지 이동을 할때마다 router.navigate("")를 통해 페이지 이동을 연결해서 사용했다.

 

페이지 훅 - 라우터가 실되기 전 후 또는 페이지를 떠날때 코드들을 사용할 수 있다.

router.hooks({
  before: (done, match) => {
    // 페이지로 접근하기 직전, 실행할 코드 작성
    done() // 마지막에 꼭 done 함수를 호출해야 함!
  },
  after: match => {
    // 페이지로 접근한 직후, 실행할 코드 작성
    // done 함수가 필요 없음!
  },
  leave: (done, match) => {
    // 페이지를 떠날 때, 실행할 코드 작성
    done() // 마지막에 꼭 done 함수를 호출해야 함!
  }
})

- match를 통해서 이동하는 url속성을 사용할 수 있다.

- 페이지 이름을 통해서 제어를 하고 로컬스토리지 활용등 여러가지를 활용할 수 있다.

 

 

처음에 몰랐던 부분들을 박영웅강사님께서 따로 정리해주셔서 다시 살펴볼 수 있었다.

라이브러리들을 볼때 꼭 github문서를 확인하는 습관을 들여야겠다..두번읽고 세번읽자..

 

GitHub - ParkYoungWoong/navigo-example

---

바닐라 자바스크립트로 구현하는 방법들을 보게 되면

배열을 만들고 배열에 애플리케이션 경로 목록을 수집하는 레지스트리로 URL을 구성하는 요소에 매핑한 객체들을 넣어주고,

클릭이벤트와 Fragment 해시값을 변경해주는 방식으로 진행해야한다.

그에 반해 navigo 라이브러리는 내장된 메서드로 URL을 설정해주기만하면 라우터를 구현할 수 있기 때문에 좋은 라이브러리인거 같다!