윅스 (Wix) 코딩 - 코드 패널 (Wix Code: Working in the Code Panel)

윅스 (Wix) 코딩 - 코드 패널 (Wix Code: Working in the Code Panel)

 

 

 

설명)

에디터의 맨 아래에 표시되는 코드 패널에서 사이트의 코드를 편집합니다. 코드 패널에는 사이트의 다른 요소에 대한 코드를 포함하는 특수 도구 막대와 두 개의 탭이 있으며, 코드가 사용되는 방법 및 위치에 따라 탭 중 하나에 원하는 코드를 추가할 수 있습니다.

 

팁 :

코드 패널을 페이지의 아래쪽에서 드래그해서 열 수 있습니다.

 

 

페이지 및 사이트 탭(Page and Site Tabs)

에디터의 요소들은 특정 페이지 또는 모든 사이트 페이지에 나타날 수 있으며, 특정 페이지 또는 모든 사이트 페이지에 관련된 코드를 추가하고 싶을 수 있습니다. 코드 패널에는 페이지(Page)와 사이트(Site)라는 두 개의 탭이 있습니다.

 

- 페이지 (Page) : 페이지 탭에는 특정 페이지에 나타나는 요소의 코드가 들어 있습니다. 속성 패널을 사용하며 요소에 이벤트를 추가하면 해당 이벤트의 코드가 자동으로 페이지 탭에 배치됩니다. 특정 페이지에만 관련된 코드를 추가할 경우 여기에 추가합니다.

- 사이트 (Site) : 요소가 모든 사이트 페이지에 나타나고 사이트 전체에 일관성을 유지하는 기능을 추가하려는 경우 해당 코드를 사이트 탭에 추가합니다. 속성 패널을 사용하여 모든 페이지에 나타나는 요소에 이벤트를 추가하면 해당 이벤트의 코드가 자동으로 사이트 탭에 배치됩니다. 사이트의 모든 페이지와 관련된 코드를 추가할 경우 여기에 추가합니다.

 

모든 페이지에 나타나는 요소이지만, 한 페이지에만 해당되는 코드를 추가하려는 경우 해당 페이지의 페이지 탭에 코드를 추가합니다.

 

팁 :

사이트 탭에 추가되는 코드는 사이트의 모든 페이지에서 실행됩니다. 이는 사이트 성능에 영향을 줄 수 있으므로 모든 페이지에서 코드를 실행할지 말지에 대해 고려하는 것이 중요합니다. 모든 페이지가 아닌 일부 페이지에서 실행해야하는 코드가 있는 경우에는 퍼블릭 파일에 넣고 필요할 때 가져올 수 있습니다.

 

윅스 코드 구문 및 자동 완성 (Wix Code Syntax and Autocomplete)

특정 요소 선택 (Selecting a specific element)

윅스 코드(Wix Code)를 사용하면 표준 자바스크립트(JavaScript)를 사용하여 코드를 작성할 수 있습니다. 또한 페이지의 요소를 선택하기 위한 특정 구문 또는 규칙 집합이 있습니다.

 

$w('#elementName')

 

제이쿼리(jQuery)를 알고 있다면 쉽게 이해되는 개념이며, 제이쿼리를 알고 있지 않다면 다음 순서를 반드시 숙지해야 합니다.

 

요소를 선택하는 방법 :

1. $w를 입력합니다.

2. 요소 이름을 괄호와 따옴표로 묶습니다.

3. 요소 이름 앞에 해시 태그를 추가합니다.

 

 

노트 :

작은 따옴표와 큰 따옴표 둘 다 사용 가능하지만, 두 개를 동시에 사용하면 안됩니다.

 

 

윅스 코드(Wix Code)에는 코드 자동 완성 기능을 포함하고 있습니다. $를 입력하면 페이지 요소들 리스트와 관련된 Wix API 리스트가 팝업 창으로 표시됩니다.

 

 

위 아래 화살표 키를 사용하여 원하는 요소를 선택한 다음 엔터(Enter) 키를 누릅니다. 또는 리스트에서 요소를 클릭할 수도 있습니다. 요소에 필요한 모든 구문들의 참조가 코드에 추가됩니다.

 

팁 :

- 언제든지 Ctrl + 스페이스(Space) 바를 눌러 코드 완성 팝업을 볼 수 있습니다.

- 요소 이름은 대/소문자를 구분합니다. '#Button1'은 '#button1'과는 다른 이름입니다.

- 퍼블릭(Public)에 새로운 자바스크립트(.js)파일을 추가하면 코드 완성을 마지막 페이지에 요소들로 나열합니다.

 

특정 요소의 이름을 마우스를 올리거나 선택하여 찾을 수도 있으며, 속성 패널에서 요소의 이름을 바꿀 수 있습니다.

 

 

여러 요소 선택하기 (Selecting multiple elements)

여러 요소를 이름으로 선택하려면 위와 같은 구문을 사용하여 요소를 참조하고 각 요소를 쉼표로 구분합니다.

 

$w('#elementName1, #elementName2, #elementName3')

 

특정 유형의 모든 요소 선택 (Selecting All elements of a specific type)

특정 유형의 모든 요소를 선택하려면 다음과 같이 해시 태그 없이 요소 유형의 이름을 사용합니다.

 

$w('Button')

 

요소 타입의 이름은 윅스 코드 API (Wix Code API)에 나타나는 요소의 이름입니다.

 

 

자바스크립트 템플릿(JavaScript Templates)

코드 패널에는 윅스 코드(Wix Code)와 직접 관련된 자동 완성 외에도 표준 자바스크립트(JavaScript) 템플릿 및 키워드에 대한 자동 완성 기능이 포함되어 있습니다. 예를 들어, "for"라는 단어를 입력하면 자동 완료 목록에 "for 구문" 및 "for"에 관련된 키워드에 대한 템플릿이 나타납니다. 각 템플릿에는 표준 자바스크립트(JavaScript) API에 대한 링크가 포함되어 있어 더 많은 정보를 확인할 수 있습니다.

 

자바스크립트(JavaScript) 템플릿을 선택하면, 템플릿의 전체 구문이 코드 패널에 추가됩니다. 예를 들어, "for 문"을 선택하면 다음과 같은 템플릿이 코드에 추가되며,

 

for (var i = 0; i < array.length; i++) {

}

 

 

루프(Loop)에 실행하고자 하는 코드를 추가하기만 하면 됩니다.

 

 

참조하기 전에 요소가 로드되었는지 확인하기 (Making Sure the Element has Loaded before You Reference it)

 

onReady에 대한 고급 정보

브라우저에 페이지가 로딩이 될 때, 페이지 로딩이 완료되기 전에 페이지의 코드가 실행될 수 있습니다. 코드가 로딩되기 전에 페이지의 요소를 참조하려고하면 오류가 발생할 수 있습니다. 이 때문에 코드를 사용하여 페이지에 액세스하기 전에 페이지의 모든 요소가 로드되었는지 확인해야합니다. 확인하기 위해서는 다음 함수에서 $w 선택자를 사용하는 모든 코드를 포함시켜야 합니다.

 

$w.onReady(function() {
    //TODO: write your page related code here...
});

 

이는 $w 선택자를 사용하여 직접 코드를 추가하는 경우에만 요구되는 과정이며, 속성 패널을 사용하여 함수에 추가하는 코드는 페이지가 로딩이 된 후에만 실행됩니다.

 

 

요소들로 작업하기 (Working with Your Elements)

에디터의 모든 요소에는 사이트에 기능 추가 및 요소들을 작업할 수 있는 속성, 메소드, 이벤트 핸들러등이 있습니다. 요소를 선택한 후, 마침표(.)를 입력하면 다음과 같은 전체 목록을 볼 수 있습니다.

 

위 아래 화살표 키를 사용하여 원하는 항목을 선택한 다음 엔터(Enter)키를 누릅니다. 필요한 구문이 요소 선택기의 끝에 추가되며, 옵션들을 탐색하면 기능에 대한 간략한 설명이 표시됩니다. 자세한 내용은 '자세히보기(Read more…)'링크를 클릭합니다. 자동 완성 팝업에는 요소에서 호출 할 수 있는 표준 자바스크립트(Javascript) 메소드가 포함되어 있습니다.

 

 

 

속성 (Properties)

속성에는 요소들에 대한 정보가 들어 있습니다. 이 중 일부는 읽기 전용이며 다른 일부는 값을 설정할 수도 있습니다. 예를 들어, text 요소에는 요소가 화면에 실제로 표시되는지 여부를 반환하는 isVisible 속성이 있습니다. 이 속성은 읽기 전용입니다. 텍스트 요소에는 텍스트 요소의 현재 텍스트를 포함하는 text 속성도 있습니다. 이것은 읽을 수도 있고 설정할 수도 있는 속성입니다.

 

메소드 (Methods)

메소드는 요소에 대한 작업을 수행합니다. 예를 들어 버튼 요소에는 버튼이 사이트에 표시되지 않도록 하는 hide 메소드가 있습니다. 일부 메소드에는 작업을 어떻게 수행할지에 영향을 줄수 있는 추가 옵션이 있습니다. 예를 들어, 다음과 같이 괄호 안에 hide 메소드를 지정하여 애니메이션을 hide 메소드에 추가할 수 있습니다.

 

$w("#button1").hide("FlyOut");

 

모든 옵션을 배우기 위해서는 Wix Code API를 살펴볼 필요가 있습니다.

 

 

이벤트 핸들러 (Event Handlers)

이벤트 핸들러는 요소들이 사이트 방문자의 동작(이벤트)에 응답하도록 합니다. 요소에 이벤트 핸들러를 추가할 때 이벤트가 발생했을 경우에 발생할 일을 지정해야합니다. 이벤트 콜백 함수에서 이 작업을 수행합니다.

 

예를 들어 '둘러보기' 버튼이 있다고 하고, 방문자가 버튼을 가리키면 텍스트가 "Let 's Go!"로 변경되도록 기능을 추가하려고 합니다. 다음과 같은 코드를 사이트에 추가합니다. (코드의 각 부분에 대한 설명을 추가했습니다).

 

$w("#button1").onMouseIn(()=> //onMouseIn is the event handler.
   // The callback function starts here.
    {                         
        $w("#button1").label = "Let's Go!";
        //This is the code that runs when the event occurs.
    }
  // The callback function ends here.
);

 

속성 패널을 사용하여 요소에 이벤트 핸들러를 추가할 수도 있다는 것을 잊지 마십시오. 이벤트 핸들러를 수동으로 추가하려는 특별한 이유가 있는 경우가 아니면 속성 패널을 사용하는 것이 좋습니다.

 

 

경고 및 오류 (Warnings and Errors)

코드 패널에 코드를 작성할 때 경고 및 오류 표시가 나타날 수 있습니다. 경고는 노란색으로 표시되고 오류는 빨간색으로 표시됩니다. 표시는 해당 코드 밑의 컬러 물결 모양 줄과 줄 번호 왼쪽의 아이콘으로 표시됩니다. 경고 또는 오류 메시지를 확인하려면 아이콘 위로 마우스를 이동하여 확인합니다.

 

 

경고 (Warnings)

코드의 경고는 변경하려는 코드에 주의를 기울이는 정보 메시지입니다. 경고는 코드가 실행되는 것을 멈추지 않으며 종종 무시할 수 있습니다. 경고는 노란색 삼각형과 노란색 물결 모양 밑줄로 표시됩니다.

 

'return'뒤에 불필요한 'else'가 있을 때 일반적인 경고 메시지가 나타납니다. 이 오류는 다음 코딩 패턴을 사용할 때 가장 자주 발생합니다.

 

function myFunction() {
  if(someCondition) {
    //do some stuff
    return 0;
  }
  else {
    //do other stuff
    return 1;
  }   
}

 

 

someCondition이 true이면 함수가 반환됩니다. 이는 someCondition이 true 일 때 코드가 실행되지 않도록 하기 위해 else를 필요로 하지 않는다는 것을 의미합니다. 이 경고를 무시하거나 코드를 다음 패턴으로 안전하게 변경할 수 있습니다.

 

function myFunction() {
  if(someCondition) {
    //do some stuff
    return 0;
  }

  //do other stuff
  return 1;   
}

 

오류 (Errors)

코드에 오류가 있으면 코드가 제대로 작동하지 않습니다. 오류 유형에 따라 코드가 예상대로 작동하지 않거나 전혀 실행되지 않을 수도 있습니다. 사이트 방문자가 사용할 수 있도록 사이트를 게시하기 전에 코드의 모든 오류를 수정해야 합니다.

 

다음은 코드에서 오류가 발생할 수 있는 몇 가지 일반적인 상황입니다.

 

- 오류 메시지 : "# text1"은 (는) 올바른 선택자가 아닙니다 (위 그림 참조). 일부 페이지 코드에서 사용중인 요소의 ID를 변경하면 코드의 $w() 선택시 오류가 발생합니다. 예를 들어 ID text1 인 텍스트 요소가 있고 statusMessage로 ID를 변경하면 $w ( '# text1')을 사용하여 요소를 선택한 모든 인스턴스가 이제 오류가 됩니다. 참고 : 검색 및 바꾸기 기능을 사용하여 코드 전체에서 이 오류를 수정할 수 있습니다.

- 오류 메시지 : '가져오기'및 '내보내기'는 최상위 수준에서만 나타날 수 있습니다. API 모듈을 가져올 때 import 문은 모듈을 사용하기 전에 코드의 최상위 레벨에 나타나야 합니다. 즉, 함수 내의 모듈을 가져올 수 없으며 아래의 예를 참고합니다. 일반적으로 변수 선언과 함수 정의 전에 모든 import 문을 코드의 첫 번째 줄에 배치하는 것이 좋습니다.

- 어떤 경우에는 실수 표시에서 오류 표시가 나타나지 않지만 실수로 오류가 발생하는 첫 번째 줄에서 오류 표시가 나타납니다. 예를 들어, 페이지 코드의 함수 중 하나에서 중괄호 (})를 생략하면 다음 줄의 코드가 무엇이든 간에 오류가 발생합니다. 아래 표시된 코드에서 6번 줄에는 중괄호가 없지만 8번 줄까지는 오류가 발생하지 않습니다.

 

미디어 통합 관리자 (Media Manager Integration)

윅스 코드(Wix Code)를 사용하면 코드에서 윅스 미디어 관리자(Wix Media Manager)에 저장한 이미지를 사용할 수 있습니다. src와 같은 이미지 속성을 포함하는 요소로 작업하면 팝업 창이 열리고 미디어 관리자(Media Manager)에서 이미지를 사용할 수 있는 옵션이 제공됩니다. 이 창은 "src"를 입력 할 때 자동으로 나타납니다.

 

코드 테스트 (Testing Your code)

게시된 사이트에서 코드가 실행되지만 게시하기 전에 코드를 테스트하여 예상한대로 작동하는지 확인해야 할 수 있습니다. 사이트 미리보기를 통해 게시하기 전에 코드를 테스트할 수 있습니다. 사이트의 모든 코드는 게시된 버전과 동일하게 미리보기 모드에서 정확히 동일하게 실행됩니다. 게시된 사이트의 코드를 디버깅할 수도 있습니다.

 

코드 버전 저장 (Saving Versions of Your Code)

사이트를 저장하거나 사이트가 자동 저장되면 해당 코드가 사이트의 해당 버전과 함께 저장됩니다. 사이트 기록으로 이동하여 저장된 버전의 사이트로 되돌리려면 해당 버전으로 저장된 코드도 복원됩니다.

 

 

 

 

 

연관된 토픽)

윅스 (Wix) 코딩 - 자바스크립트 (JavaScript) (Wix Code: JavaScript Support)

윅스 (Wix) 코딩 - 코딩 테스트 및 디버깅 (Wix Code: Testing and Debugging Your Code)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 : 

https://support.wix.com/en/article/wix-code-working-in-the-code-panel