윅스 (Wix) 코딩 - Fetch API를 사용하여 제 3자 서비스에 액세스하기 (Wix Code: Accessing 3rd-Party Services with the Fetch API)

윅스 (Wix) 코딩 - Fetch API를 사용하여 제 3자 서비스에 액세스하기 (Wix Code: Accessing 3rd-Party Services with the Fetch API)

 

 

 

설명)

 

윅스 코드(Wix Code)를 사용하여 타사 웹 서비스에 액세스하는 코드를 작성할 수 있습니다. 클라이언트측 코드에서 직접 타사 서비스에 호출할 수 있습니다. 그러나 API 키 노출과 같은 보안 문제가 있는 경우 백엔드 웹 모듈에서 서비스를 호출할 수 있습니다.

 

 

노트 :

사이트가 HTTPS 사이트인 경우 서비스에서 HTTP 콘텐츠를 요청할 수 없습니다. 잘못된 요청은 브라우저의 개발자 도구를 사용하여 볼 수 있는 오류를 유발합니다. 요청을 수정하려면 HTTPS 프로토콜을 사용하여 HTTPS 사이트에서 요청한 리소스를 가져오거나 사이트에서 SSL을 해제하여 HTTP 리소스를 가져올 수 있습니다.

 

 

 

고급 : 호출 서비스에 사용할 수 있는 모듈 (Advanced: Modules available for calling services)

다음 예제에서는 wix-fetch 모듈을 사용하여 서비스를 호출하지만 Node.js http, https 및 net 모듈도 사용할 수 있습니다.

 

 

 

 

클라이언트측 서비스 호출 (Client-Side Service Call)

예를 들어 통화 환율 조회를 위해 제 3자 서비스를 호출한다고 가정합니다.

 

이 예제에서는 다음 요소로 간단한 양식을 만들었습니다.

 

 

유형 (Type)	ID	사용 (Usage)
입력(Input)	textInputSymbol	조회할 통화 입력
버튼 (Button)	buttonFetchRate	요청 제출
텍스트 (Text)	textRate	결과를 표시하기 위한 라벨

 

 

양식을 설정하면 버튼의 속성을 설정하여 onClick 핸들러가 다음 함수를 호출할 수 있습니다.

 

export function buttonFetchRate_click(event) {
  let url = "https://api.exchangeratesapi.io/latest?base=USD";
  let symbol = $w("#textInputSymbol").value; 
  let fullUrl = url + "&symbols=" + symbol; 
 
  fetch(fullUrl, {method: 'get'})
    .then(response => response.json())
    .then(json => $w("#textRate").text = json.rates[symbol].toString());
}

 

 

 

이 예제에서는 Fetch 요청에 대한 전체 URL을 구성하여 시작합니다. URL은 서비스의 주소와 일부 쿼리 매개 변수로 구성됩니다. 간단히하기 위해 항상 미국 달러를 변환하므로 기본 매개 변수의 값은 USD로 하드 코드됩니다. symbols 매개 변수의 값은 양식에서 가져옵니다. 그런 다음이 함수는 실제 요청을합니다. 응답을 받으면 전달된 기호의 전환율을 끌어와 라벨의 텍스트로 설정합니다.

 

 

노트 :

특정 CORS (Cross-Origin Resource Sharing) 요청은 브라우저에서 시작될 때 제한됩니다. 일반적으로 GET 요청 및 특정 POST 요청은 사이트의 공개, 페이지 또는 사이트 코드에서 만들 수 있습니다. 다른 모든 요청은 사이트의 백엔드 코드에서 작성해야합니다. 잘못된 요청은 브라우저의 개발자 도구를 사용하여 볼 수 있는 오류를 유발합니다. CORS 제한으로 인해 가져오기 호출에 문제가 발생하는 경우 아래에서 설명한대로 호출을 백엔드로 이동합니다.

 

 

 

 

 

백엔드측 서비스 호출 (Backend Service Call)

백엔드에서 서비스 호출을 하는 것은 두 부분으로 이루어집니다. 먼저 백엔드 웹 모듈에서 서비스 호출을 하는 코드를 작성합니다. 이렇게하면 클라이언트쪽 코드에서 서비스를 호출하려고 할 때 발생하는 API 키 노출과 같은 보안 문제가 방지됩니다. 그런 다음 클라이언트측 코드를 작성하여 백엔드 서비스 호출을 트리거하고 필요한 경우 데이터를 리턴합니다.

 

예를 들어, 사용자가 선택한 도시의 현재 날씨를 찾기 위해 제 3자 기상 서비스를 호출한다고 가정합니다.

 

먼저 백엔드 웹 모듈에 날씨 서비스를 호출하고 데이터를 검색하는 함수를 만듭니다.

 

//serviceModule.jsw

import {fetch} from 'wix-fetch';  

export function getCurrentTemp(city) {
  const url = 'https://api.openweathermap.org/data/2.5/weather?q=';
  const key = '<api key placeholder>';
    
  let fullUrl = url + city + '&appid=' + key + '&units=imperial'; 
  
  return fetch(fullUrl, {method: 'get'})
    .then(response => response.json())
    .then(json => json.main.temp);
}

 

 

 

이 예제에서는 httpsrequests를 만드는 데 사용되는 wix-fetch에서 fetch를 가져 오는 것으로 시작합니다. 그런 다음 날씨를 조회하려는 도시를 취하는 새로운 함수를 만듭니다. 함수는 fetch 요청에 대한 전체 URL을 구성하여 시작합니다. URL은 서비스 주소와 API 키로 구성됩니다. 이 예제가 제대로 작동하려면 <api key placeholder>를 자신의 API 키로 대체해야합니다. 그런 다음이 함수는 실제 요청을 합니다. 응답을 받으면 온도 데이터를 꺼냅니다. 이 온도 데이터는 클라이언트 쪽 호출에 의해 수신됩니다.

클라이언트 측에서는 백엔드 함수를 호출할 위치와 반환하는 데이터를 어떻게 처리해야하는지 결정해야합니다.

 

이 예제에서는 다음 요소가있는 간단한 양식을 만들었습니다.

 

유형 (Type)	ID	사용 (Usage)
텍스트 입력 (Text Input)	textInputCity	도시 이름 입력
버튼 (Button)	buttonFetchTemp	요청 제출
텍스트 (Text)	textTemp	결과를 표시하기위한 라벨

 

 

 

 

양식이 설정되면 버튼의 속성을 설정하여 onClick 핸들러가 백엔드 모듈에 작성한 함수를 호출하도록 할 수 있습니다.

 

//Form's page code

import {getCurrentTemp} from 'backend/serviceModule';

//...

export function buttonFetchTemp_click(event) {
 getCurrentTemp($w("#textInputCity").value)
  .then(temp => $w("#textTemp").text = temp + "°");
}

 

 

여기서 백엔드에서 작성한 함수를 가져와서 시작합니다. 그런 다음 버튼의 이벤트 핸들러에서 getCurrentTemp 함수를 호출합니다. Input 요소의 값이 도시 인수로 전달됩니다. 함수 실행이 끝나면 리턴된 온도를 표시하는 텍스트 라벨을 설정합니다.

 

 

 

 

 

연관된 토픽)

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

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-accessing-3rd-party-services-with-the-fetch-api