윅스 (Wix) 코딩 - 웹 모듈을 사용하여 프론트엔드에서 서버 측 코드 호출하기 (Wix Code: Calling Server-Side Code from the Front-End with Web Modules)

윅스 (Wix) 코딩 - 웹 모듈을 사용하여 프론트엔드에서 서버 측 코드 호출하기 (Wix Code: Calling Server-Side Code from the Front-End with Web Modules)

 

 

 

설명)

 

웹 모듈 소개 (Introduction to Web Modules)

웹 모듈은 윅스 코드(Wix Code) 전용이며 백엔드에서 서버 측에서 실행되는 함수를 작성하고 클라이언트측 코드에서 쉽게 호출할 수 있습니다. 웹 모듈을 사용하면 백엔드에서 파일이나 스크립트로 함수를 가져올 수 있으며 서버측에서 실행됩니다. 윅스 코드(Wix Code)는 이 액세스를 가능하게하는 데 필요한 모든 클라이언트-서버 통신을 처리합니다. 이 통신이 어떻게 처리되는지 알고싶다면 아래의 고급 팁을 봅니다.

 

 

고급 : 웹 모듈 작동 방식 (Advanced: How Web Modules Work - Behind the Scenes)

클라이언트측에서 웹 모듈을 가져오면 웹 모듈 기능에 대한 프록시 기능을 갖게 됩니다. 이 프록시 함수는 XMLHttpRequest를 사용하여 백엔드에서 함수를 호출합니다. 런타임은 해당 호출을 수신하고 적절한 함수를 호출합니다. 인수와 반환 값은 JSON을 사용하여 직렬화됩니다.

 

 

 

웹 모듈 사용시기 (When to Use Web Modules)

웹 모듈 함수에는 일반적으로 서버측을 실행하거나 필요로하는 코드가 포함됩니다. 클라이언트측에서 실행되는 경우 코드에 보안 위험이 있거나 다른 웹 서비스에 액세스하려고 할 수 있습니다. 예를 들어 사이트 방문자가 제 3자 제공 업체를 통해 이메일을 보낼 수 있도록하고 싶다고 가정해 봅니다. 다음과 같이 전자 메일 서버 쪽을 보내는 함수를 작성합니다.

 

// Filename: backend/sendEmail.jsw  (web modules need to have a *.jsw* extension)

import {fetch} from 'wix-fetch';  
// wix-fetch is the API we provide to make https calls in the backend

const API_KEY = "the api key for the backend service that sends email";

export function sendEmail (address, subject, body) {
 return fetch("https://a-backend-service-that-sends-email.com/send?APIKey=" + API_KEY, {
             method: 'post',
             body: JSON.stringify({address, subject, body})
 }).then(function(response) {
  if (response.status >= 200 && response.status < 300)
   return response.text();
  else
   throw new Error(response.statusText);
 });
};

 

 

 

다음 두 가지 이유로 서버측을 실행하려면 이 코드가 필요합니다.

1. 클라이언트에 공개하지 않으려는 타사 서비스에 대한 API 키가 포함됩니다.

2. CORS (Cross-Origin Resource Sharing) 때문에 서버측에서만 수행할 수 있는 타사 웹 서비스를 호출하고 있습니다.

 

그런 다음 웹 모듈의 기능을 프론트엔드 파일로 가져와서 사용합니다.

 

import {sendEmail} from 'backend/sendEmail.jsw';

export function sendButton_onClick(event) {
 sendEmail(
         $w("#addressInput").value,
         $w("#subjectInput").value,
         $w("#bodyInput").value)
         .then(function() {
            console.log("email was sent");
        }
     );
}

 

 

 

 

백엔드에서 웹 모듈 함수 사용 (Using Web Module Functions in Backend)

웹 모듈 기능을 백엔드의 다른 모듈로 가져올 수 있습니다.

 

 

 

 

 

웹 모듈에서 함수 호출 (Calling a Function in a Web Module)

함수, 객체 및 기타 항목을 내보낼 수 있는 일반 모듈과 달리 웹 모듈에서만 함수를 내보낼 수 있습니다. 웹 모듈은 항상 프로미스(Promise)를 반환합니다. 함수의 구현에서 값을 반환하는 경우에도 마찬가지입니다. 예를 들어, 웹 모듈 함수가 다음과 같이 값을 반환하면 :

 

// Filename: aModule.jsw (web modules need to have a *.jsw* extension)
export function multiply(factor1, factor2) {
    return factor1 * factor2;
}

 

 

함수를 호출하면 여전히 값으로 확인되는 프로미스(Promise)가 반환됩니다. 따라서 다음과 같이 사용해야합니다.

 

import {multiply} from 'backend/aModule';
multiply(4,5).then(function(product) {
    console.log(product);
      // Logs: 20
});

 

 

 

웹 모듈 디버깅 (Debugging Web Modules)

웹 모듈에서 콘솔에 메시지를 기록할 수 있으며 코드가 서버 측에서 실행 중이더라도 메시지는 클라이언트의 콘솔 로그에 표시됩니다.

 

 

 

 

웹 모듈 권한 (Web Module Permissions)

웹 모듈을 사용하면 프론트엔드에서 백엔드 코드를 호출할 수 있으므로 권한을 설정하여 방문자가 기능에 액세스할 수 있는 범위를 제한하는 것이 중요합니다. 자세한 내용은 웹 모듈 사용 권한 정보를 참조합니다.

 

 

 

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-calling-server-side-code-from-the-front-end-with-web-modules