gatsby client routing

갯츠비를 이용하여 SSG 통해서 웹 서비스중

클라이언트에서만 작동하는 페이지를 구현하였다.

 

문제는 여기서 발생

 

웹서버 없이 정적 파일 호스팅으로만 웹을 서비스하므로 정적 파일이 없으면 클라이언트 사이드에서만 작동하는 URL로는 접근할 수 없다.

예를 들어 /app/admin 같은 경우 /app/admin/index.html 파일이 존재한다. 그 안에서 Router를 통해서 하위 패스를 서비스한다면 /app/admin/users 같은 경우는 직접 브라우저를 통해서 바로 접근할 수 없다. /app/admin/users/index.html 파일은 갯츠비가 만들어주지 않기 때문이다.

 

src/pages/app/admin/index.js

<Router>

  <App path="/app" />

    <Users path="/users" /> // pages 폴더 안에 작성되지 않은 오직 클라이언트 사이드 경로

  :

 

브라우저 주소창에 /app/admin/users 입력하고 들어오면 갯츠비 자체 내장 서버는 감지하지만 다른 별도의 서버를 사용한다면 별도의 웹서버 작업을 해줘야 한다. 하지만 웹서버도 없다면? 그저 aws s3로 호스팅만 하는 서비스로 구현되어 있다면 무조건 html 파일을 만들어줘야 한다.

 

방법은 두 가지.

1. pages안에 파일을 작성한다. 그 파일들은 html.index을 생성한 컴포넌트 파일을 바라보게 만들어야 한다.

2. 갯츠비 node api를 통해서 빌드할 때 생성해준다.

 

아래는 두 번째 방법으로 작성된 코드

// page 생성후 콜백 함수
exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions
  if (page.path.match(/^\/my/)) {
    // 클라이언트에서 가능한 라우팅 리스너 설정
    // 모든 my 하위 path는 my component를 바라봄
    page.matchPath = "/my/*"
    createPage(page)

    // 서버에서 라우팅 가능한 정적 파일 생성
    // 모든 my 하위 path는 my component로 생성된 html을 지님
    const myPaths = ['/my/status', '/my/profile', '/my/profile/email', '/my/profile/password', '/my/profile/phone', '/my/profile/address', '/my/banks', '/my/limits', '/my/alerts', '/my/api', '/my/personal-info-usage'];
    myPaths.forEach((path) => {
      page.path = path
      createPage(page)}
    );
  }
}

myPaths 부분을 route가 정의된 파일에서 가져와 여기저기서 라우팅을 관리할 필요없게 만들면 효율적으로 관리할 수 있다.

 

더 좋은 방법이 있는지는 모르겠으나 서비스의 특성에 따른 본인의 실력과 시야로는 일단 여기까지.