윅스 (Wix) 코딩 - 사이트 구조 사이드 바 (Wix Code: Working with the Site Structure Sidebar)

윅스 (Wix) 코딩 - 사이트 구조 사이드 바 (Wix Code: Working with the Site Structure Sidebar)

 

 

 

설명)

사이트 구조 사이드 바(Site Structure Sidebar)는 페이지, 라이트박스, 폴더, 파일 패키지, 데이터베이스 컬렉션 등 사이트를 구성하는 모든 파일을 표시합니다.

 

사이트 구조 사이드 바에서는 다음과 같은 작업들을 수행할 수 있습니다.

 

- 사이드 바를 숨기려면 편집기의 왼쪽 하단에 있는 

 아이콘을 눌러 숨깁니다.

 

 

- 사이드 바를 표시하려면 편집기의 왼쪽 하단에 있는 

 아이콘을 눌러 표시합니다.

 

 

페이지 (Pages) 

사이드 바의 페이지 섹션에는 사이트의 모든 일반(정적) 페이지(Reuglar Pages), 동적 페이지(Dynamic Page), 라우터 페이지(Router Pages)가 나열됩니다. 일반 페이지는 페이지 섹션 제목 바로 아래에 나타나며, 동적 페이지와 라우터 페이지는 하위 그룹으로 나타납니다.

 

 

일반 페이지 (Regular Pages) 

사이트의 일반 페이지는 페이지 섹션 제목 바로 아래에 표시됩니다. 

 설정 아이콘은 페이지 이름 위에 마우스를 올려 놓으면 표시되며, 클릭하여 페이지 설정을 변경할 수 있습니다. 사이트의 홈페이지(메인 페이지) 이외의 페이지는 동적 페이지로 설정할 수 있습니다.

 

동적 페이지 (Dynamic Pages)

동적 페이지를 만든 경우, 동일한 접두사가 있는 모든 페이지가 같은 섹션에 함께 그룹화가 됩니다. 그룹에 새로운 동적 페이지를 추가하려면 섹션 이름 위에 마우스를 올려 놓으면 표시되는 

 설정 아이콘을 클릭하여 추가합니다.

URL 또는 SEO 데이터와 같은 페이지 설정을 변경하거나, 동적 연결을 제거하여 일반 페이지로 만들거나, 페이지를 삭제하는 것도 페이지 설정에서 진행할 수 있습니다. 동적 페이지 이름 위에 마우스를 올려 놓으면 

 설정 아이콘이 나타납니다.

 

라우터 페이지 (Router Pages)

라우터 페이지를 만든 경우, 해당 라우터의 접두어와 연결된 모든 페이지가 동일한 섹션에 함께 그룹화됩니다. 예를 들어, myrouter 라는 접두어가 있는 라우터를 만든 경우, 섹션의 이름은 Myrouter Pages (Router)로 지정됩니다.

각 라우터 페이지에는 라우터 코드에 사용되는 기본 이름이 제공되며, 원하는 경우, 이름을 변경할 수 있습니다. 방문자는 페이지 이름을 볼 수 없습니다. 

라우터의 접두어 및 routers.js 파일에 구현된 관련 함수의 이름을 변경하거나, 라우터에 새 페이지를 추가하려면 라우터 섹션의 이름 위에 마우스를 올려 놓아 표시되는 

 설정 아이콘을 클릭합니다. 페이지의 설정 변경, 이름 변경, 삭제, 라우터에서 제거하여 일반 페이지로 만들 수 있습니다. 

페이지 섹션 헤더 위에 마우스를 올려놓으면 표시되는 

 더하기 아이콘 버튼을 클릭하여 새 라우터를 추가할 수 있습니다.

 

라이트박스 (Lightboxes)

라이트박스를 사이트의 페이지에 추가한 경우, 사이드 바의 라이트박스 섹션에 라이트박스가 나타납니다. 이 섹션은 하나 이상의 라이트박스를 사이트에 추가한 경우에만 나타나며, 에디터의 추가 메뉴를 사용하여 새 라이트박스를 추가할 수 있습니다. 사이드 바에 생성된 라이트박스를 선택하면 라이트박스 모드로 전환됩니다.

 

퍼블릭/공개 (Public)

퍼블릭 섹션은 사이트의 모든 페이지에서 사용하려는 코드가 포함된 자바스크립트(JavaScript) 파일을 저장하는 곳입니다. 사이트의 기능이 커짐에 따라 생기는 코드들을 파일들로 정리하여 관리에 용이하게 하고, 파일들을 폴더로 나누어 관리하여 이후에도 관리할 수 있도록 합니다.

여러 페이지에서 사용하지만 각 페이지에서 반복하고 싶지 않다면, 퍼블릭/공개 파일에 해당 함수를 한번 작성한 후, 필요에 따라 모든 페이지에서 호출할 수 있습니다. 퍼블릭/공개 파일에서 코드 작업을 하기 위해서는 모듈 구문을 활용해야 합니다.

페이지와 사이트 코드는 공개적으로 접근할 수는 있지만 퍼블릭 섹션에는 표시되지 않습니다. 페이지 및 사이트 코드를 편집하기 위해서는 코드 패널을 사용해야 합니다.

퍼블릭 섹션에 파일이나 폴더를 추가하려면 섹션 이름 위에 마우스를 올리면 표시되는 

 더하기 아이콘을 클릭하여 추가합니다. 새 파일 및 새 폴더 추가, 폴더 삭제를 하기 위해서는 폴더 이름 위에 마우스를 올려 놓으면 표시되는 

 설정 아이콘을 클릭하여 변경합니다.

파일의 이름을 변경 및 삭제하기 위해서는 파일 이름 위에 마우스를 올려 놓으면 표시되는 

 설정 아이콘을 클릭하여 변경합니다.

 

 

백엔드 (Backend)

사이드 바의 백엔드 섹션에는 사이트에서 공개적으로 액세스할 수 없는 파일들이 나열됩니다. 백엔드 코드는 보이지 않으므로 보안 위험이 있는 중요한 정보들을 백엔드에 배치할 수 있습니다. 백엔드에서 사용할 자바스크립트(JavaScript) 파일, 웹 모듈 및 텍스트 파일들을 만들 수 있으며 폴더에 파일들을 정리할 수 있습니다.

백엔드 파일의 코드를 작업하기 위해서는 모듈 구문을 활용해야 합니다. 사이트의 백엔드 섹션에는 두 가지 특수 자바스크립트 파일이 있을 수 있습니다. data.js 파일에는 데이터 후크 코드가 들어 있으며, routers.js 파일에는 라우터 및 데이터 바인딩 라우터 후크 코드가 들어 있습니다.

백엔드 섹션에 새 파일이나 폴더를 추가하려면 섹션 이름 위에 마우스를 올리면 표시되는 

 더하기 아이콘을 클릭하여 추가합니다.

새 파일 및 새 폴더 추가, 폴더 삭제하려면 폴더 이름 위에 마우스를 올려 놓으면 표시되는 

 설정 아이콘을 클릭하여 변경합니다.

파일 이름 변경 및 삭제하려면 파일 이름 위에 마우스를 올려 놓으면 표시되는 

 설정 아이콘을 클릭하여 변경합니다.

router.js 파일은 일단 생성되면 삭제할 수 없지만, 모든 내용을 삭제하여 해당 기능을 비활성화시킬 수 있습니다.

 

 

패키지 (Packages)

사이드 바의 백엔드 섹션에 노드 패키지를 설치할 수 있습니다. 다른 사람이 이미 구현한 복잡한 기능을 사이트에 추가하고 싶을 때, 필요에 맞는 코드 라이브러리를 사용하여 자신의 코드에 통합 및 재사용 가능한 각 코드 라이브러리를 패키지(Packages)라고 합니다.

백엔드 섹션 이름 위에 마우스를 가져갈 때 나타나는 

 더하기 아이콘을 클릭하여 패키지를 설치할 수 있습니다.

패키지 관리자에 패키지를 설치하고 나면 패키지를 추가 및 관리할 수 있으며, node_modules 위에 마우스를 올려 놓으면 표시되는 

 설정 아이콘을 클릭하여 관리합니다.

패키지 이름 위에 마우스를 올려 놓으면 표시되는 

 설정 아이콘을 클릭하여 패키지를 제거할 수 있습니다.

 

데이터베이스 (Database)

사이드 바의 데이터베이스 섹션에는 데이터베이스 컬렉션이 포함되어 있으며, 데이터베이스 컬렉션을 클릭하여 데이터 관리자에게 엽니다.

섹션 이름 위에 마우스를 올리면 표시되는 

 더하기 아이콘을 클릭하여 새 컬렉션을 추가할 수 있습니다.

데이터베이스 컬렉션을 기반으로 하는 새로운 동적 페이지 추가 및 컬렉션 권한 업데이트, 컬렉션 제거를 하려면 컬렉션 이름 위에 마우스를 올려 놓으면 표시되는 

 설정 아이콘을 클릭하여 관리합니다.

 

 

윅스 앱 (Wix Apps)

사이트에 특정 윅스 앱(Wix Apps)를 추가하면 관련된 페이지와 데이터베이스 컬렉션이 자동으로 사이트에 추가되며 관련 페이지 및 데이터베이스 컬렉션은 사이드 바에 나타납니다. 예를 들어, 사이트에 윅스 스토어(Wix Stores)를 추가하면 감사 표시 페이지, 제품 및 장바구니 페이지, 컬렉션 및 제품 컬렉션등이 사이드 바에 표시됩니다.

 

 

노트 :

데이터베이스의 앱(Apps)컬렉션을 보려면 사이트를 저장하거나 게시하고 브라우저를 새로 고침을 해야 할 수 있습니다. 윅스 앱(Wix App) 컬렉션에는 윅스 앱의 항목에 대한 정보가 들어 있으며, 각 앱의 컬렉션은 사이드 바에 함께 그룹화되어 나타납니다. 컬렉션은 읽기 전용이며, 대시 보드에서 관련 앱 관리자의 컬렉션을 수정 관리할 수 있습니다.

 

 

 

 

 

 

 

연관된 토픽)

윅스 (Wix) 코딩 - 동적 페이지 예제 (Dynamic Page Example)

윅스 (Wix) 코딩 - 라우터 (Wix Code: About Routers)

About Lightboxes

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

About Your Database Collection Fields

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-working-with-the-site-structure-sidebar