윅스 (Wix) 코딩 - 동적 페이지 데이터 후크 만들기 (Wix Code: Creating Data Hooks for Dynamic Pages)

윅스 (Wix) 코딩 - 동적 페이지 데이터 후크 만들기 (Wix Code: Creating Data Hooks for Dynamic Pages)

 

 

 

설명)

 

데이터 바인딩 라우터 후크를 생성하면 동적 페이지의 데이터가 페이지에 바인딩되는 프로세스를 차단할 수 있습니다.

 

이 글에서는 데이터 바인딩 라우터를 작동시키기 위해 작성해야하는 코드를 살펴보겠습니다. 데이터 바인딩 라우터 후크가 무엇인지, 그리고 라우터 바인딩을 만들려는 이유에 대한 자세한 내용은 데이터 바인딩 라우터 후크를 참조합니다.

 

 

데이터 바인딩 라우터 후크 추가 (Add a Data Binding Router Hook)

데이터 바인딩 라우터 후크하기 :

1. 사이트 구조 사이드 바에서 동적 페이지 중 하나 위에 마우스를 올려 놓을 때 표시되는 설정 아이콘을 클릭하고 설정을 클릭하여 페이지의 페이지 정보 설정을 표시합니다.

2. 추가 기능에서 후크 추가를 클릭하여 후크 추가 대화 상자를 표시합니다.

3. 후크 추가 대화 상자에서 추가할 후크를 선택하고 코드 추가 및 편집을 클릭합니다.

 

데이터 바인딩 라우터 후크를 추가하면 선택한 데이터 바인딩 라우터 후크에 대한 함수 스텁(function stubs)이 routers.js 파일에 추가됩니다. routers.js 파일은 사이트 구조 사이드 바의 백엔드 섹션에 있습니다.

 

데이터 바인딩 라우터 후크 함수의 이름은 다음 규칙에 따라 지정됩니다.

 

<dynamic page prefix>_<hook name>(params...)

 

 

따라서 동적 페이지의 접두어가 myPrefix인 경우 beforeRouter 훅의 routers.js 파일에 추가된 코드는 다음과 같아야합니다.

 

myPrefix_beforeRouter(request) {  // routing code ...}

 

 

등록할 수 있는 후크는 실행 순서대로 다음과 같이 나열됩니다.

- beforeRouter

- customizeQuery

- afterRouter

- afterSitemap

 

 

 

후크 기능에 대한 자세한 내용은 라우터 API 참조를 참조합니다.

 

사이트 컬렉션과의 상호 작용 전후에 코드를 실행하는 데이터 후크를 등록할 수도 있습니다. 이렇게하면 데이터 후크가 customizeQuery( )와 afterRouter( ) 사이에서 실행됩니다.

 

 

beforeRouter( )

라우터가 요청된 동적 페이지로 이동하기 전에이 후크가 트리거됩니다. 이 후크를 사용하여 요청을 다른 페이지로 라우트하거나 오류 응답을 리턴 할 수 있습니다. 올바른 응답을 결정하기 위해 페이지에 바인딩되는 데이터가 필요한 경우 대신 afterRouter( ) 후크를 사용합니다.

 

beforeRouter( ) 후크는 들어오는 요청에 대한 정보가 들어있는 WixRouterRequest 객체를 받습니다. 객체에는 라우터에 도달하는 데 사용된 URL, 요청의 출처 및 요청 출처에 대한 정보가 있습니다.

 

후크의 본체 내에서 원하는 코드를 작성할 수 있습니다. 작성한 코드는 요청에 어떻게 응답할지 결정하는 데 도움이됩니다.

 

이 함수는 라우터가 라우팅을 계속하거나 HTTP 응답 코드로 응답하도록하는 WixRouterResponse 객체를 반환해야합니다.

 

라우터가 원래 동일한 데이터를 가지고 있었던 동일한 페이지로 계속하기를 원하면 next( ) 함수를 사용하여 적절한 WixRouterResponse를 리턴합니다.

 

그러나 라우터가 원래 의도했던 것이외의 다른 작업을 수행하기를 원한다면 forbidden( ), notFound( ), redirect( ) 또는 sendStatus( ) 함수를 사용하여 WixRouterResponse를 반환할 수 있습니다.

 

 

 

 

예제 )

이 예제에서는 특정 요청이 의도한 대상으로 라우팅되지 않도록 제한하는 동적 접두어에 후크를 만듭니다.

다음 코드는 웹 사이트의 백엔드 섹션에 있는 routers.js 파일에 있습니다.

 

import {forbidden, next} from 'wix-router';

export function dynamic_beforeRouter(request) {
  if (request.path.length > 1 && request.path[0] === "admin") {
    if (request.user && request.user.role == "siteOwner")
      return next();
    else
      return forbidden();
  }

  return next();
}

 

 

데이터 바인딩 라우터 후크를 만드는 데 사용되는 기능은 라우터 API에 포함되어 있습니다. 이 기능 중 일부를 사용하려면 가져와야합니다.

여기에서는 forbidden( ) 및 next( ) 함수를 가져옵니다.

 

import {forbidden, next} from 'wix-router';

 

 

 

라우터 API의 기능을 더 많이 사용하려면 importstatement에 추가해야합니다.

 

 

 

 

후크 함수에서 우리는 경로가 문자열 "admin"으로 시작하는지 검사함으로써 시작합니다 :

 

if (request.path.length > 1 && request.path[0] === "admin") {
  // ...
}

 

 

경로가 "admin"이 아닌 다른 경로로 시작하면 if는 건너뛰고 라우터가 후크에 의해 차단되기 전에 계속 진행하도록합니다.

 

return next();

 

 

 

그러나 경로가 "admin"으로 시작하면 우리는 어떤 유형의 사용자가 요청을하는지 확인합니다.

 

if (request.user && request.user.role == "siteOwner") {
  // ...
}

 

 

 

사용자가 사이트의 소유자인 경우 라우터가 후크에 가로채기 전에 계속 진행할 것을 다시 한 번 알려줍니다.

 

return next();

 

 

 

그러나 사용자가 사이트 소유자가 아닌 경우 403 응답을 반환합니다.

 

return forbidden();

 

 

 

 

customizeQuery( )

이 후크는 페이지의 데이터 쿼리가 실행되기 전에 트리거됩니다. 이 후크를 사용하여 페이지의 데이터세트에 어떤 데이터가 바인딩되어 있는지를 결정하는 쿼리를 더욱 구체화하거나 변경할 수 있습니다.

customizeQuery( ) 후크는 들어오는 요청, 현재 라우트가 있는 문자열, 라우트될 페이지에 대한 데이터를 얻는 데 사용될 질의를 포함하는 WixDataQuery 객체에 대한 정보를 포함하는 WixRouterRequest 객체를 수신합니다.

후크의 본체 내에서 원하는 코드를 작성할 수 있습니다. 여기서 작성한 코드는 초기 데이터를 계속 사용할지 또는 어떤 방식 으로든 변경하려는 경우 결정하는 데 도움이 됩니다.

이 함수는 라우트될 페이지에 최종 데이터를 전달하는 데 사용할 WixDataQuery 객체를 반환해야합니다.

라우터가 원래 페이지에 바인딩하려는 동일한 데이터를 계속 사용하도록하려면 쿼리 매개 변수에서 함수가 받은 객체를 반환합니다.

그러나 라우터가 다른 데이터를 사용하게하려면 Data API의 기능을 사용하여 현재 쿼리를 수정하거나 새 쿼리를 만들 수 있습니다.

 

 

 

예제 )

이 예제에서는 특정 경로에 대한 쿼리를 필터링하여 활성 사용자만 찾기위한 동적 접두어에 후크를 만듭니다.

다음 코드는 웹 사이트의 백엔드 섹션에 있는 routers.js 파일에 있습니다.

 

export function myRouter_customizeQuery(request, route, query) {
  if (route === "/users/{name}")
    return query.eq("status", "active");
  else
    return query;
}

 

 

 

쿼리를 만드는 데 사용되는 기능은 데이터 API에 포함되어 있습니다. 이 기능 중 일부를 사용하려면 가져와야합니다.

 

후크 기능에서 우리는 경로가 사용자를 표시할 동적 페이지로 이동하는지 확인하여 시작합니다.

 

if (route === "/users/{name}")
  // ...

 

 

그곳으로 가면 "활성"사용자 만 쿼리를 수정합니다.

 

return query.eq("status", "active");

 

 

그렇지 않으면 수신 한 동일한 쿼리를 반환합니다.

 

return query;

 

 

 

 

 

afterRouter( )

이 후크는 라우터가 데이터를 바인딩한 후, 그러나 페이지가 표시되기 전에 트리거됩니다. 이 훅을 사용하여 검색된 데이터를 기반으로 라우터의 응답을 변경할 수 있습니다.

afterRouter( ) 후크는 들어오는 요청에 대한 정보를 포함하는 WixRouterRequest 객체와 라우터의 응답에 대한 정보가 포함된 WixRouterResponse 객체를받습니다.

후크의 본체 내에서 원하는 코드를 작성할 수 있습니다. 작성한 코드는 초기 응답을 계속할지 또는 다른 응답으로 변경할지 결정하는 데 도움이 됩니다.

이 함수는 라우터가 라우팅을 계속하거나 HTTP 응답 코드로 응답하도록하는 WixRouterResponse 객체를 반환해야합니다.

라우터가 원래 같은 데이터를 가지고 있었던 동일한 페이지로 계속하기를 원한다면 함수가 응답 매개 변수에서받은 객체를 반환합니다.

그러나 라우터가 원래 의도했던 것 이외의 다른 작업을 수행하기를 원한다면

WixRouterResponse를 반환하기 위해 ok( ), forbidden( ), notFound( ), redirect( ) 또는 sendStatus( ) 함수를 호출합니다. 라우터가 원래 라우팅하던 페이지와 다른 페이지에서 라우터의 데이터를 사용하려면 [ok( )] 기능을 사용하여 페이지를 선택하고 원래 응답에서 response.data 및 response.header를 전달합니다. 이 예제로는 아래를 참조합니다.

 

 

예제 )

이 예제에서는 사용자를 두 페이지 중 하나로 라우팅하는 동적 접두어에 후크를 만듭니다. 우리는 페이지의 두 가지 버전을 가지고 있습니다. 하나는 가로 방향 이미지용이고 다른 하나는 세로 방향 이미지용입니다. 이미지를 데이터베이스에서 가져온 후 표시할 사진의 유형을 확인하고 해당 이미지의 방향에 해당하는 페이지로 연결합니다.

 

다음 코드는 웹사이트의 백엔드 섹션에 있는 routers.js 파일에 있습니다.

 

import {ok} from 'wix-router';

export function myRouter_afterRouter(request, response) {
  if(response.status === 200 && response.page === "horizontal-pic") {
    if(response.data.picture.orientation === "vertical")
      return ok("vertical-pic", response.data, response.head);
    else
      return response;
  }

  return response;
}

 

 

 

데이터 바인딩 라우터 후크를 만드는 데 사용되는 기능은 라우터 API에 포함되어 있습니다. 이 기능 중 일부를 사용하려면 가져와야합니다.

여기에서는 ok( ) 함수를 가져옵니다.

 

import {ok} from 'wix-router';

 

 

 

라우터 API의 기능을 더 많이 사용하려면 importstatement에 추가해야합니다.

 

후크 기능에서 우리는 응답 상태가 정상 상태인지 확인하고 응답이 라우팅되는 페이지가 가로 방향으로 그림을 표시하는 페이지인지 확인합니다.

 

if(response.status === 200 && response.page === "horizontal-pic") {
  // ...
}

 

 

다른 상태를 찾거나 응답하는 페이지가 두 버전이 아닌 경우 원래 응답을 반환합니다.

 

return response;

 

 

그러나 라우터가 가로 이미지를 표시하는 페이지로 라우팅하려고하면 페이지에 표시될 이미지의 방향을 확인합니다. 라우터의 현재 응답에서 방향 정보를 가져 와서 이렇게합니다.

 

if(response.data.picture.orientation === "vertical")
  // ...

 

 

사진의 방향이 전송된 페이지와 일치하지 않으면 방향과 일치하는 다른 페이지로 연결하고 원래 응답에서 데이터와 헤드 정보를 가져와서 새 페이지로 전송합니다.

 

return ok("vertical-pic", response.data, response.head);

 

 

그러나 사진의 방향이 이미 전송 된 페이지와 일치하면 이미 전송 한 페이지로 전송합니다.

 

return response;

 

 

 

 

afterSitemap( )

이 후크는 사이트 맵이 생성된 후에 트리거됩니다. 이 후크를 사용하여 사이트 맵의 페이지 목록을 수정할 수 있습니다.

afterSitemap( ) 후크는 들어오는 요청에 대한 정보와 사이트 맵의 항목을 포함하는 WixRouterSitemapEntry 배열을 포함하는 WixRouterSitemapRequest 객체를 받습니다.

후크의 본체 내에서 원하는 코드를 작성할 수 있습니다. 여기서 작성한 코드는 초기 사이트 맵 항목을 계속 사용할지 또는 어떤 방식으로든 변경하려는 경우 결정하는 데 도움이됩니다.

이 함수는 모든 sitemap의 항목이 있는 WixRouterSitemapEntry 배열을 반환해야합니다.

후크가 수신한 것과 동일한 사이트 맵 항목을 라우터가 계속 사용하게하려면 함수가 sitemapEntries 매개 변수에서 받은 객체를 반환합니다.

그러나 라우터가 사이트 맵 항목을 수정하도록하려면 표준 자바스크립트(JavaScript) 배열 처리 방법을 사용하여 수신된 배열의 항목을 추가, 제거 또는 수정할 수 있습니다.

 

 

예제 )

이 예제에서는 검색 페이지를 사이트 맵에 추가하는 동적 접두어에 후크를 만듭니다. 사이트 맵 기능은 검색 페이지에 대한 URL 만 게시한다는 점에 유의합니다. 이 URL에 실제로 페이지를 구현하려면 beforeRouter( ) 후크를 사용하여 검색 페이지 URL에 대한 요청을 확인하고 사용자를 검색 페이지로 라우팅할 수 있습니다.

 

다음 코드는 웹 사이트의 백엔드 섹션에 있는 routers.js 파일에 있습니다.

 

import {WixRouterSitemapEntry} from 'wix-router';

export function myRouter_afterSitemap(sitemapRequest, sitemapEntries) {
  let prefix = sitemapRequest.prefix;
  let entry = new WixRouterSitemapEntry(`${prefix}/search`);
  sitemapEntries.push(entry);
  return sitemapEntries;
}

 

 

사이트 맵 항목을 만드는 데 사용되는 기능은 라우터 API에 포함되어 있습니다. 이 기능 중 일부를 사용하려면 가져와야합니다.

여기서 WixRouterSitemapEntry를 가져옵니다.

 

import {WixRouterSitemapEntry} from 'wix-router';

 

후크 함수에서 우리는 요청의 접두사를 얻는 것으로 시작합니다 :

 

let prefix = sitemapRequest.prefix;

 

 

그런 다음 검색 페이지에 대한 새 항목을 만듭니다.

 

let entry = new WixRouterSitemapEntry(`${prefix}/search`);

 

 

그리고 새 항목을 사이트 맵 항목 배열에 추가하십시오.

 

sitemapEntries.push(entry);

 

 

마지막으로 약속의 배열을 래핑하여 반환합니다.

 

return Promise.resolve(sitemapEntries);

 

 

 

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-creating-data-hooks-for-dynamic-pages