윅스(Wix)에서 Velo's APIs 활용하여 다양한 기능 구현하기

안녕하세요:) 개발자 우디입니다! 아래 내용 관련하여 작업 중이신 분들께 도움이되길 바라며 글을 공유하니 참고 부탁드립니다😊
(이번에 벨로그로 이사오면서 예전 글을 옮겨적었습니다. 이 점 양해 부탁드립니다!)

작업 시점: 2023년 3~5월

배경

• 신규 사업 검증 프로젝트에서 윅스를 활용함.
• 윅스에서 제공하는 기본적인 기능들로는 원하는 기능을 구현할 수 없었고, 그래서 Velo's APIs를 활용하여 직접 코드 입력하여 구현하기로 함.
• 윅스를 통해 이런 것도 가능하다는 점을 기록 및 공유하고자 함

Velo's APIs 기본 개념들(추가 정보(클릭))

• $w
  • ID 또는 유형을 기준으로 단일 또는 다중 요소를 선택함
  • ID로 선택하려면 해시 기호(#) 뒤에 선택하려는 항목의 ID(예 "#myElement")가 포함된 선택기 문자열을 전달함 -> 이 함수는 선택한 요소 개체를 반환함.
• $w.onReady
  • 모든 페이지 요소의 로드가 완료되면 실행되는 함수를 설정.
  • 사용자가 페이지와 상호 작용을 시작하기 전에 실행되는 코드를 작성할 때 이 함수를 사용.
• 폴더 구조
  
  
  • 최상위 masterPage 코드 파일
  • 각 페이지의 코드 파일
  • 백엔드 코드 파일
• 대부분의 JS 구문 사용 가능
  • 윅스에서는 대부분의 Javascript 기능 및 모듈을 사용 가능함

모달(Modal) 구현

• 사용자에게 특정 시점에 혹은 로딩 시 특정 미디어를 보여줘야 하는 경우 모달이 필요함
• 윅스에서 기본적으로 제공하는 모달이 없는 것 같아서 직접 코드 입력하여 구현함
• 구현 과정
  • hide()
    • 요소를 숨기는 함수
    • 요소의 hidden 속성이 true 로 설정되면 해결되는 Promise를 반환함
  • show()
    • 요소를 보여주는 함수
    • 요소의 hidden 속성이 false 로 설정되면 해결되는 Promise를 반환함
  • 윅스에서 엘리먼트 배치 및 디자인을 완료한 후, hide() 및 show()를 활용하여 원하는 시점에 보여주거나 숨기면 됨.

    $w('#...').hide()
    ...
    $w('#...').show()

동적 페이지(Dynamic page) 구현

• 동적페이지?

  • 동적페이지란 요청에 대해서 각각 다른 내용을 보여주는 웹페이지임
  • 반대로 정적 페이지란, 항상 똑같은 내용을 보여주는 웹페이지.

• 질문-답이 DB에 저장되어 있고, 사용자가 페이지 내에서 특정 질문을 클릭하면, 질문에 맞는 내용의 페이지가 보여야 했음.

• 구현 과정

  • 해당 페이지를 동적 페이지로 지정
    

  • 페이지에 보여줄 내용이 담긴 DB 구성

    • DB에 내용 추가

      import wixData from 'wix-data';
      ...
      export async function insertData(myCollectionId, answerObj) {
          let options = {
              "suppressAuth": true,
          };
      
          let toInsert = {
              "question": answerObj.question,
              ...
          };
      
          try {
              const item = await wixData.insert(myCollectionId, toInsert, options)
              return item.id
          } catch (error) {
              console.log('error', error);
          }
      }

      • 백엔드에서 실행되는 코드이므로 suppressAuth 옵션 true 처리

  • 페이지와 DB 연결

    • 특정 엘리먼트를 클릭 후 아래와 같은 표시를 클릭하면 데이터셋과 연결할 수 있음
      
      • 원하는 요소와 데이터를 연결해주면 됨
    • 원하는 데이터 세트와 연결 대상을 설정해주면 됨
      

  • 사용자가 클릭 시 DB 내용을 불러와서 적절하게 보여주도록 처리

    import wixLocation from 'wix-location';
    ...
    wixLocation.to(`${wixLocation.baseUrl}/answer/${itemData._id}`)

써드파티(Third-party) API 호출

• 써드파티(Third-party) API?
  • 각 브라우저에서 built-in 되어 있는 Web Browser APIs가 있는데, 이와 반대로 built-in되어 있지 않아서 특정 서버에 자바스크립트를 통해서 요청해야만 이용이 가능한 외부 API가 바로 써드파티 API임.
• 윅스에서는 getJSON, fetch 를 활용할 수 있음
  • 물론 패키지 설치를 통해 axios 등도 활용 가능
    
• 구현 과정

  import { getJSON } from 'wix-fetch';
  ...
  const response = await getJSON({link});

GA(Google Analytics) 코드 삽입

• 먼저 GA 측 페이지에서 윅스와의 연동 설정을 완료해줘야 함.
• 그 다음 윅스에서는 wixWindow 를 활용하여 이벤트 추적 코드 추가함.

  wixWindow.trackEvent("CustomEvent", {
    eventCategory: "...", // 이벤트 묶음 카테고리 - main 페이지에 있는 button
    eventAction: "...", // 이벤트 고유 이름
    eventLabel: ..., // 이벤트의 디테일한 값.
  });

  • trackEvent()는 외부 분석 툴로 이벤트 추적 코드를 전송하는 함수임.

기타 고려사항들

• Docs에 따르면 API 통신하는 함수들은 프론트가 아니라 백엔드에서 작성되어야 한다고 함. 그래서 프론트에 작성된 코드들을 전부 백엔드로 옮겨 줌.
• 자꾸만 timeout 에러가 발생하였고, 이와 관련하여 찾아봄.
  • Docs를 보니, 백엔드에서 API 통신할 때 요청을 보낸 후 14초가 넘어가면 에러가 발생함
    
  • 그런데 본 서비스에서는 서버에서 이루어지는 작업이 보통 몇 십초를 넘는 경우가 많아서 대부분의 경우 에러가 발생했음
  • 그래서 정해진 횟수만큼 retry 하는 방식으로 해결함
• 동적 페이지를 구현하는 과정에서 내용에 알맞게 디자인도 동적으로 적용되어야 하는데, 제대로 적용되지 않았음
  • 텍스트가 레이아웃을 벗어나는 등의 문제 발생.
  • 조사 및 테스트 결과, 해당 엘리먼트를 아래와 같이 컨테이너로 지정하면 내부 콘텐츠에 맞게 레이아웃이 잘 변경됨.
    

윅스 장/단점

• 장점
  • 거의 PPT 처럼 쉽게 디자인 및 레이아웃 작업이 가능함
  • 버튼, SNS 추가 등 쉽게 추가 가능한 기능들 있음.
  • 비교적 단순한 페이지(랜딩 페이지, 서비스 홍보, 블로그 같은 커뮤니티 등) 제작에 유용할 듯
• 단점
  • API 요청이나, 동적 페이지 등 조금이라도 복잡한 기능들을 넣으려면, 추가 코드 작성이 필요함
  • 디자인 요소에 대해서 100% 제어할 수는 없기 때문에 생기는 불편함 있음

배우고 느낀 점

• 윅스의 Velo API 처음 활용해봤는데 생각보다 Docs도 잘 되어 있고 편리한 기능도 많아서 인상적이었음.
• 노/로우 코드 툴로 전부 개발을 진행하면서 새로운 경험을 해볼 수 있었음.