윅스 (Wix) 코딩 예제 - 코딩으로 컬렉션 데이터 가져오기 및 내보내기 (Wix Code Tutorial: Importing and Exporting Collection Data with Code)
설명)
이 글에서는 데이터를 컬렉션으로 가져오는 방법과 코드를 사용하여 컬렉션에서 데이터를 내보내는 방법을 보여줍니다. 간단한 양식을 만든 다음 wix-data API를 사용하여 JSON 데이터를 컬렉션에서 가져오고 내보내는 코드를 작성합니다.
노트 :
데이터 관리자를 사용하여 컬렉션 데이터를 가져오고 내보낼 수도 있습니다. 자세한 내용은 데이터 관리자에서 컬렉션 데이터를 가져오는 방법 및 데이터 관리자에서 컬렉션 데이터를 내보내는 방법을 참조합니다.
전제 조건 (Prerequisites)
wix-data API는 데이터가 JSON 형식이어야하므로 데이터를 JSON과 JSON간에 변환하는 것에 익숙해야합니다.
노트 :
이 글에서는 스프레드시트 또는 데이터베이스 애플리케이션에서 데이터를 시작한다고 가정합니다.
데이터를 컬렉션으로 가져오기 (To import data into a collection) :
1. 스프레드시트 또는 데이터베이스 응용 프로그램을 사용하여 데이터를 CSV 형식으로 내보냅니다.
2. convertcsv.com과 같은 온라인 도구를 사용하여 CSV 데이터를 JSON 형식으로 변환합니다.
3. 아래 설명된대로 양식을 사용하여 JSON 데이터를 컬렉션으로 가져옵니다.
컬렉션에서 데이터를 내보내기 (To export data from a collection) :
4. 아래 설명된대로 양식을 사용하여 컬렉션에서 JSON 데이터를 내보냅니다.
5. convertcsv.com과 같은 온라인 도구를 사용하여 JSON 데이터를 CSV 형식으로 변환합니다.
6. 스프레드시트 또는 데이터베이스 응용 프로그램을 사용하여 CSV 형식에서 데이터를 보거나 가져옵니다.
데이터 설정 (Data Setup)
wix-data API를 사용하여 데이터를 가져오기 때문에 데이터는 데이터 소스에서 사용중인 입력란(필드)를 식별하기 위해 입력란(필드) 이름이 아닌 입력란(필드) 키를 사용해야 합니다. 즉, CSV 파일의 첫 번째 행에는 컬렉션의 입력란(필드) 키가 있어야합니다.
컬렉션 입력란(필드)의 입력란(필드) 키를 찾으려면 에디터에서 데이터 관리자의 입력란(필드) 위로 마우스를 가져갈 때 나타나는 수직 타원을 클릭하고 속성 관리를 선택합니다.
컬렉션에 추가할 항목에 고유한 ID를 제공하려면 ID 값이 포함된 _id 키가 있는 입력란(필드)를 추가하십시오. 고유 한 ID 값을 제공하지 않으면 각 항목에 고유한 자동 생성 ID 값이 부여됩니다.
중요 :
API는 가져오는 데이터를 검사하여 데이터를 가져오는 입력란(필드)의 입력란(필드) 유형과 일치하는지 확인합니다. 잘못된 유형의 데이터를 성공적으로 가져오고 오류 표시가 데이터 관리자에 표시됩니다.
양식 (Form)
사이트에서 새 페이지로 시작하여 여기에 표시된 것과 비슷한 양식을 만듭니다 :
|
유형 (Type) |
ID |
사용 (Usage) |
|
텍스트 입력(Text Input) |
collectionInput |
가져오거나 내보낼 컬렉션을 입력하는 경우 |
|
텍스트 상자(Text Box) |
textBox |
가져올 데이터 입력 또는 내보낸 데이터 표시하는 경우 |
|
버튼 (Button) |
importButton |
가져오기 트리거하는 경우 |
|
버튼 (Button) |
exportButton |
내보내기 트리거하는 경우 |
코드 (Code)
페이지 코드 패널에서 첫 번째 코드 줄로 wix-data API를 가져와서 시작합니다.
import wixData from 'wix-data';
코드 가져오기 (Import Code)
위에서 만든 Import 버튼을 선택하고 Properties 패널을 사용하여 onClick 이벤트 핸들러를 추가합니다.
페이지 코드 패널에서 아래 코드를 이벤트 핸들러에 추가합니다.
export function importButton_onClick(event) {
const items = JSON.parse($w("#textBox").value);
const collection = $w("#collectionInput").value;
items.forEach( (item) => {
wixData.insert(collection, item)
.then( (results) => {
console.log(`Added item: ${JSON.stringify(results)}`);
} )
.catch( (err) => {
console.log(err);
} );
} );
$w("#textBox").value = "";
}
이 코드는 컬렉션의 이름과 JSON 항목을 양식 요소에서 가져옵니다. 그런 다음 각 JSON 항목을 반복하고 insert( ) 함수를 사용하여 컬렉션에 추가합니다.
코드 내보내기 (Export Code)
위에서 만든 내보내기 버튼을 선택하고 속성 패널을 사용하여 onClick 이벤트 핸들러를 추가합니다.
페이지 코드 패널에서 아래 코드를 이벤트 핸들러에 추가합니다.
export function exportButton_onClick(event) {
let collection = $w("#collectionInput").value;
wixData.query(collection)
.find()
.then( (results) => {
$w("#textBox").value = JSON.stringify(results.items);
} )
.catch( (err) => {
console.log(err);
} );
}
이 코드는 컬렉션의 이름을 양식 요소에서 가져와서 query( ) 및 find( ) 함수를 사용하여 컬렉션을 쿼리합니다.
위의 코드는 컬렉션에서 최대 50개의 항목을 내보낼 것입니다. 컬렉션에 50개 이상의 항목이 있는 경우 쿼리가 반환할 최대 항목 수를 지정하는 제한을 추가해야합니다.
export function exportButton_onClick(event) {
let collection = $w("#collectionInput").value;
wixData.query(collection)
.limit(1000)
.find()
.then( (results) => {
$w("#textBox").value = JSON.stringify(results.items);
} )
.catch( (err) => {
console.log(err);
} );
}
최대 허용 한도는 1000입니다. 따라서 컬렉션에서 1000개가 넘는 항목을 내보내려면 여러 쿼리를 수행해야합니다.
양식 사용 (Using the Form)
양식을 사용하여 데이터를 가져오기 (To import data using the form) :
1. 데이터를 가져올 컬렉션의 이름을 입력합니다.
2. 텍스트 상자에 JSON 형식의 데이터를 붙여 넣습니다.
3. 가져오기 버튼을 클릭합니다.
4. 각 항목을 컬렉션으로 가져오면 성공 또는 오류 메시지가 콘솔에 기록됩니다.
양식을 사용하여 데이터를 내보내기 (To export data using the form) :
5. 데이터를 내보낼 컬렉션의 이름을 입력합니다.
6. 내보내기 버튼를 클릭합니다.
7. 내보낸 데이터가 텍스트 상자에 표시되거나 오류가 콘솔에 기록됩니다.
추가 고려사항 (Additional Considerations)
컬렉션에서 수행하는 다른 작업과 마찬가지로 샌드박스 또는 라이브 컬렉션에서 가져오기 또는 내보내기를 수행할 수 있습니다. 사이트 미리보기 중에 가져오거나 내보내는 경우 샌드박스 컬렉션을 사용하여 작업이 수행됩니다. 게시된 사이트에서 가져오거나 내보낼 경우 라이브 컬렉션을 사용하여 작업이 수행됩니다.
경고 :
위에서 작성한 양식을 사용하여 사이트를 게시하면 잠재적인 보안 위험이 발생할 수 있습니다. 양식과 함께 사이트를 게시하거나 적절한 권한이 있는 방문자만 액세스 할 수 있도록 조치를 취합니다.
라이브 컬렉션에서 데이터를 가져오거나 내보내려면 사이트의 양식을 한 번만 사용해야 할 수도 있습니다.
이 경우 위에서 설명한 잠재적인 보안 위험을 피하기 위해 라이브 컬렉션과 함께 작동하도록 사이트를 게시하거나 샌드박스 컬렉션을 통해 라이브 컬렉션과 함께 작업할지 여부를 고려해야합니다.
사이트를 게시하지 않고 양식을 라이브 컬렉션과 함께 사용하기 (Using the form with the Live Collection without publishing your site)
샌드박스를 통해 라이브 컬렉션의 데이터를 내보내기 (To export the data from your Live collection through the Sandbox) :
1. 양식을 작성하고 코드를 추가합니다.
2. 라이브 컬렉션의 항목을 샌드박스 컬렉션에 복사합니다.
3. 사이트를 미리보고 양식을 사용하여 데이터를 내보냅니다.
4. 다음 사이트를 게시하기 전에 양식이 포함된 페이지를 삭제합니다.
샌드박스를 통해 라이브 컬렉션으로 데이터를 가져오기 (To import data to your Live collection through the Sandbox) :
1. 양식을 작성하고 코드를 추가합니다.
2. 사이트를 미리보고 양식을 사용하여 데이터를 가져옵니다.
3. 가져온 항목을 샌드박스에서 라이브 컬렉션으로 복사합니다.
4. 다음 사이트를 게시하기 전에 양식이 포함된 페이지를 삭제합니다.
게시된 사이트에서 양식 사용하기 (Using the form on your published site)
한 번 이상 가져오거나 내보내고 나중에 사용할 수 있도록 양식이 필요한 경우 (If you are going to import or export more than once and need the form for future use) :
1. 양식을 작성하고 코드를 추가합니다.
2. 양식의 페이지가 사이트의 메뉴에 나타나지 않도록 숨깁니다.
3. URL이 있어도 방문자가 페이지에 액세스할 수 없도록 양식의 페이지를 암호로 보호합니다.
4. 필요한 경우 회원 로그인 버튼을 추가합니다 (아래 노트 참조).
5. 사이트를 게시합니다.
6. 샌드박스 컬렉션을 사용하여 가져오기 및 내보내기할 사이트를 미리볼 때 이 양식을 사용합니다.
7. 게시된 사이트의 양식을 사용하여 라이브 컬렉션을 사용하여 가져오고 내보낼 수 있습니다.
노트 :
사이트에 회원 로그인 버튼이 있고 게시된 사이트에 로그인하면 가져오기 및 내보내기하려는 컬렉션에 대한 전체 권한을 부여하는 관리자 역할이 할당됩니다. 게시된 사이트에 로그인하지 않은 경우 방문자 역할이 할당됩니다. 생성 권한이 '모든 사용자'로 설정된 컬렉션으로 가져올 수 있으며 읽기 권한이 '모든 사용자'로 설정된 컬렉션에서만 내보낼 수 있습니다.
API 목록 (API List)
다음 API는 이 글의 코드에서 사용된다. 자세한 내용은 API 참조 문서를 참조합니다.
$w.TextBox
- $w.TextBox.value - 요소의 값을 설정하거나 가져옵니다.
$w.TextInput
- $w.TextInput.value - 요소의 값을 설정하거나 가져옵니다.
wix-data
- wix-data.insert( ) - 컬렉션에 항목을 추가합니다.
- wix-data.query( ) - 쿼리를 만듭니다.
- wix-data.WixDataQuery.find( ) - 쿼리와 일치하는 항목을 반환합니다.
- wix-data.WixDataQuery.limit( ) - 쿼리에서 반환하는 항목 수를 제한합니다.
연관된 토픽)
윅스 (Wix) 코딩 - 데이터 관리자에서 데이터 가져오기 (Importing Data in the Data Manager)
윅스 (Wix) 코딩 - 데이터 관리자에서 데이터 내보내기 (Exporting Data in the Data Manager)
윅스 홈페이지 만들기 101
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index 윅스 (Wix.com) 윅스 ADI & 템플릿 (Wix ADI & 템플릿) 윅스 웹에디터 (Wix Editor) 윅스 코딩 (Wix Code - Corvid) 윅스 해커톤 (Wix Hackathon)
limejuicer.tistory.com
출처 :
댓글