파일 처리 전체 프로세스

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

Windows 8.1에서 실행되며 JavaScript로 작성한 Windows 스토어 앱에 파일 처리 기능을 추가하는 방법을 알아봅니다.

이 항목의 각 섹션은 주요 파일 처리 기능을 설명하고, 해당 기능에 대한 세부 정보를 제공하는 항목에 연결하고, 이 항목의 도우미 샘플인 파일 처리 전체 프로세스 도우미 샘플에서 관련 코드를 빠르게 찾는 방법을 설명합니다.

참고  폴더 및 파일을 조작하는 데 사용되는 대부분의 함수는 비동기입니다. 비동기 JavaScript 앱을 작성하는 방법에 대한 자세한 내용은 JavaScript를 사용한 비동기 프로그래밍을 참조하세요.

 

파일 액세스 기본 사항: 열거, 속성 가져오기, 데이터 읽기 및 쓰기

	빠른 시작: 프로그래밍 방식으로 파일 액세스 한 줄의 코드인 함수 StorageFolder.getFilesAsync호출만 추가하면 폴더, 라이브러리, 장치, 네트워크 위치 등의 위치에 있는 파일에 액세스할 수 있습니다. 지정된 위치의 최상위 파일 및 폴더 열거, 위치에 있는 파일 쿼리 등의 작업을 수행하는 방법을 보여 주는 단계별 지침은 프로그래밍 방식으로 파일 액세스를 참조하세요. 이 단계에서는 특정 위치의 파일을 열거하는 방법을 보여 줍니다. 원하는 위치의 StorageFolder 개체를 가져옵니다. 예를 들어 정적 KnownFolders 속성 중 하나(예: KnowFolders.picturesLibrary)를 참조하면 됩니다. 반환된 StorageFolder 개체의 StorageFolder.getFilesAsync 함수를 호출합니다. 이 항목의 도우미 샘플은 매개 변수 없이 이 메서드를 호출하여 모든 파일이 반환되도록 지정합니다. 쿼리를 사용한 StorageFolder.getFilesAsync 호출의 예제를 보려면 빠른 시작: 프로그래밍 방식으로 파일 액세스를 참조하세요. StorageFolder.getFilesAsync 함수가 완료되면 forEach 루프를 사용하여 반환된 각 파일을 반복할 수 있습니다. 이 코드 예제에서는 사진에 있는 모든 파일을 열거합니다. // Get a StorageFolder object representing Pictures. var library = Windows.Storage.KnownFolders.picturesLibrary; // Get all files from the StorageFolder object. library.getFilesAsync().then(function (files) { // For each file found ... files.forEach(function (file) { // ... perform your processing. }); }); } 도우미 샘플의 이 스크린샷은 사진에 있는 파일을 열거하는 예를 보여 줍니다. 샘플에서 찾기: 샘플에는 이 섹션에 제공된 예제를 포함하는 FileAccessBasics라는 페이지가 있습니다. 관련된 JavaScript 및 HTML 코드는 FileAccessBasicsPage.js(OnEnumPicturesClick 함수) 및 FileAccessBasicsPage.html 파일에 모여 있습니다.
	빠른 시작: 파일의 속성 가져오기 파일 속성은 파일의 특성 또는 파일 내용을 설명하거나 수량화합니다. 예를 들어 파일 속성에는 파일 이름, 경로, 파일 크기, 파일 특성, 마지막 액세스 날짜 등의 데이터가 포함됩니다. 빠른 시작: 파일의 속성 가져오기에서는 파일의 최상위 속성과 기본 속성을 검색하고 표시하는 방법을 보여 줍니다. 다음은 최상위 파일 속성 또는 기본 파일 속성을 가져오는 방법을 보여 주는 단계입니다. 최상위 파일 속성 - 기본 파일 속성을 StorageFile 클래스의 속성으로 검색합니다. 여기에는 StorageFile.attributes, StorageFile.contentType, StorageFile.dateCreated, StorageFile.displayName, StorageFile.displayType, StorageFile.fileType, StorageFile.folderRelativeId, StorageFile.isAvailable, StorageFile.name, StorageFile.path, StorageFile.provider 등이 포함됩니다. 빠른 시작: Microsoft OneDrive 파일의 가용성 확인에서는 StorageFile.isAvailable을 사용하는 방법을 설명합니다. 기본 파일 속성 - StorageFile.getBasicPropertiesAsync 함수를 호출하여 파일의 기본 속성을 검색합니다. 함수에서 BasicProperties 개체가 반환되며, 이 개체를 사용하여 BasicProperties.dateModified, BasicProperties.itemDate, BasicProperties.size 등의 파일 속성을 검색할 수 있습니다. 이 코드 예제에서는 사진에 있는 모든 파일을 열거하고 다양한 최상위 파일 속성과 기본 파일 속성을 표시합니다. JavaScript promises를 사용하여 두 비동기 작업(StorageFolder.getFilesAsync 및 StorageFile.getBasicPropertiesAsync)의 결과를 동기화하는 방법을 확인합니다. JavaScript의 비동기 프로그래밍 및 promises에 대해 자세히 알아보려면 JavaScript의 비동기 프로그래밍을 참조하세요. // Get a StorageFolder object representing the Pictures Library. var library = Windows.Storage.KnownFolders.picturesLibrary; // Initialize string that holds all property information. var outString = ""; // Get all files from the StorageFolder object. library.getFilesAsync().then(function (files) { var promises = []; files.forEach(function (file) { promises.push(WinJS.Promise.as(file)); promises.push(file.getBasicPropertiesAsync()); }) return WinJS.Promise.join(promises); }) .done(function (results) { var counter = 0 while (counter < results.length) { var file = results[counter]; var props = results[counter + 1]; outString += "File name: " + file.name + "<br/>"; outString += "File type: " + file.fileType + "<br/>"; outString += "File size: " + props.size + "<br/>"; outString += "<br/>" counter = counter + 2; } }); 도우미 샘플의 이 스크린샷은 다양한 최상위 파일 속성과 기본 파일 속성을 가져오는 예를 보여 줍니다. 샘플에서 찾기: 샘플에는 이 섹션에 제공된 예제를 포함하는 FileAccessBasics라는 페이지가 있습니다. 관련된 JavaScript 및 HTML 코드는 FileAccessBasicsPage.js(OnGetFilePropertiesClick 함수) 및 FileAccessBasicsPage.html 파일에 모여 있습니다.
	빠른 시작: 파일 읽기 및 쓰기 Windows 스토어 앱은 FileIO 클래스를 통해 파일을 읽고 씁니다. FileIO 및 StorageFile 클래스를 사용하여 다양한 형식의 데이터를 읽고 쓰는 방법을 보여 주는 코드 예제는 빠른 시작: 파일 읽기 및 쓰기 항목을 참조하세요. 파일에 텍스트 쓰기 파일에 쓰려면 먼저 데이터를 쓰기 위해 FileIO 함수 중 하나에 전달할 StorageFile 개체를 가져와야 합니다. 도우미 샘플에서는 이 작업을 위해 StorageFolder.createFileAsync 함수를 통해 파일을 만듭니다. StorageFile 개체가 있는 경우 오버로드된 FileIO.writeTextAsync 함수 중 하나를 통해 기본 파일에 텍스트를 쓸 수 있습니다. 이 코드 예제에서는 샘플 파일에 현재 날짜/시간을 씁니다. // Create the sample file; replacing it if it already exists. var lib = Windows.Storage.KnownFolders.picturesLibrary; lib.createFileAsync("FileHandlingJs.txt", Windows.Storage.CreationCollisionOption.replaceExisting) .then(function (file) { if (file) { // Format a string based on the current data/time. var now = new Date(); var sampleFileContents = [[now.getMonth() + 1, now.getDate(), now.getFullYear()].join("/"), [now.getHours(), AddZero(now.getMinutes())].join(":"), now.getHours() >= 12 ? "PM" : "AM"].join(" "); // Write the text to the sample file. Windows.Storage.FileIO.writeTextAsync(file, sampleFileContents) .then(function () { // File's contents have been written at this point. }, function (error) { // Handle error. }); } }); 파일에서 텍스트 읽기 파일 내용을 읽으려면 먼저 데이터를 읽기 위해 FileIO 함수 중 하나에 전달할 StorageFile 개체를 가져와야 합니다. 도우미 샘플에서는 이 작업을 위해 StorageFolder.getFileAsync 함수를 호출합니다. StorageFile 개체가 있는 경우 오버로드된 FileIO.readTextAsync 함수 중 하나를 통해 기본 파일에서 텍스트를 읽을 수 있습니다. 이 코드 예제에서는 샘플 파일의 내용을 읽습니다. // Open sample file. Windows.Storage.KnownFolders.picturesLibrary.getFileAsync("FileHandlingJs.txt") .then(function (file) { // If file found ... if (file) { // Read file's contents. Windows.Storage.FileIO.readTextAsync(file).then(function (contents) { // Process file contents as needed. }); } }, function (error) { // Handle error. }); 이 스크린샷은 샘플을 실행하고 샘플 파일에 쓰는 예를 보여 줍니다. 샘플에서 찾기: 샘플에는 이 섹션에 제공된 샘플을 포함하는 FileAccessBasics라는 페이지가 있습니다. 관련된 JavaScript 및 HTML 코드는 FileAccessBasicsPage.js(OnWriteTextToFileClick 및 OnReadTextFromFileClick 함수) 및 FileAccessBasicsPage.html 파일에 모여 있습니다.

 

파일 및 폴더 선택기 작업

빠른 시작: 파일 선택기를 사용하여 파일에 액세스 선택기(파일 선택기 및 폴더 선택기)는 사용자가 추가 처리를 위해 하나 이상의 항목을 선택할 수 있는 파일 또는 폴더 목록을 표시하는 데 사용됩니다. 지정한 필터(예: 특정 확장명이 있는 파일)와 일치하는 파일 및 폴더 검색, 특정 폴더에서 시작, 특정 보기 모드(목록 또는 미리 보기) 표시 등을 수행하도록 프로그래밍 방식으로 선택기를 구성할 수 있습니다. 다음 절차에서는 단일 파일, 여러 파일 및 단일 폴더 선택을 위한 다양한 선택기를 구성하는 방법을 보여 줍니다. 단일 파일 선택 파일 선택기 구성 FileOpenPicker 개체를 인스턴스화합니다. FileOpenPicker 개체의 viewMode, suggestedStartLocation 및 fileTypeFilter 속성을 필요에 따라 설정합니다. FileOpenPicker.pickSingleFileAsync 함수를 호출합니다. FileOpenPicker.pickSingleFileAsync 함수가 완료되면 앱에 선택한 파일에 대한 읽기/쓰기 권한이 있습니다. 이 코드 예제에서는 단일 파일 선택을 위한 파일 선택기를 인스턴스화하고 표시합니다. // Instantiate a FileOpenPicker object. var openPicker = new Windows.Storage.Pickers.FileOpenPicker(); // Set the FileOpenPicker object's key properties. openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail; openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary; openPicker.fileTypeFilter.replaceAll([".jpg", ".jpeg", ".png" ]); // Display the FileOpenPicker for single file selection. openPicker.pickSingleFileAsync().then(function (file) { // If the user selected a file ... if (file) { // ... process file as needed. } else { // User canceled the operation. } }); 여러 파일 선택 파일 선택기 구성 FileOpenPicker 개체를 인스턴스화합니다. FileOpenPicker 개체의 FileOpenPicker.viewMode, FileOpenPicker.suggestedStartLocation 및 FileOpenPicker.FileTypeFilter 속성을 필요에 따라 설정합니다. FileOpenPicker.pickMultipleFileAsync 함수를 호출합니다. FileOpenPicker.pickMultipleFileAsync 함수가 완료되면 앱에 선택한 파일에 대한 읽기/쓰기 권한이 있습니다. 선택한 파일은 StorageFile 개체 배열로 표현됩니다. 배열의 sizes 속성은 선택한 파일 수를 나타내므로 표준 배열 표기법과 함께 for 루프를 사용하여 각 StorageFile 개체에 액세스할 수 있습니다. 이 코드 예제에서는 여러 파일 선택을 위한 파일 선택기를 인스턴스화하고 표시합니다. // Instantiate a FileOpenPicker object. var openPicker = new Windows.Storage.Pickers.FileOpenPicker(); // Set the FileOpenPicker object's key properties. openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail; openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary; openPicker.fileTypeFilter.replaceAll([".jpg", ".jpeg", ".png"]); // Display the FileOpenPicker for multiple-file selection. openPicker.pickMultipleFilesAsync().then(function (files) { // If the user selected at least one file ... if (files.size > 0) { for (var i = 0; i < files.size; i++) { // ... process each file - For example, files[i] } } else { // User canceled the operation. } }); 폴더 선택기 구성 FolderPicker 개체를 인스턴스화합니다. FolderPicker 개체의 FolderPicker.viewMode, FolderPicker.suggestedStartLocation 및 FolderPicker.fileTypeFilter 속성을 필요에 따라 설정합니다. FileOpenPicker.pickSingleFileAsync 함수를 호출합니다. FolderPicker.pickSingleFolderAsync 함수가 완료되면 앱에 하위 폴더를 포함하여 선택한 폴더에 대한 읽기/쓰기 권한이 있습니다. 이 코드 예제에서는 폴더 선택기를 인스턴스화하고 표시합니다. // Instantiate a FolderPicker object. var folderPicker = new Windows.Storage.Pickers.FolderPicker(); // Set the FileOpenPicker object's key properties. folderPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop; folderPicker.fileTypeFilter.replaceAll([".docx", ".xlsx", ".pptx"]); // Display the FolderPicker for folder selection. folderPicker.pickSingleFolderAsync().then(function (folder) { // If the user selected a folder ... if (folder) { // ... get the folder object. Windows.Storage.AccessCache.StorageApplicationPermissions. futureAccessList.addOrReplace("PickedFolderToken", folder); // Process folder as needed. } else { // User canceled operation. } }); 이 스크린샷은 샘플을 실행하고 두 파일(sample1.png 및 sample2.png)을 선택한 결과를 보여 줍니다. 샘플에서 찾기: 샘플에는 이 섹션에서 설명한 작업을 보여 주는 File and Folder Pickers(파일 및 폴더 선택기)라는 페이지가 있습니다. 이 샘플의 JavaScript 코드 및 HTML은 각각 FilePickerPage.js 및 FilePickerPage.html 파일에 있습니다.

 

OneDrive 파일 작업

빠른 시작: OneDrive 파일의 가용성 확인 Windows 8.1에서는 사용자가 OneDrive 파일을 온라인 전용으로 표시할 수 있습니다. OneDrive에서 사용자 연결이 끊어지면 해당 파일을 사용할 수 없습니다. 파일의 가용성을 프로그래밍 방식으로 확인할 수 있도록 새로운 StorageFile.isAvailable 속성이 추가되었습니다. 이 단계에서는 StorageFile.isAvailable 속성을 사용하여 파일의 가용성을 확인하는 방법을 보여 줍니다. 원하는 위치의 StorageFolder 개체를 가져옵니다. 예를 들어 정적 KnownFolders 속성 중 하나(예: KnowFolders.picturesLibrary)를 참조하면 됩니다. 반환된 StorageFolder 개체의 StorageFolder.getFilesAsync 함수를 호출합니다. 이 항목의 도우미 샘플은 매개 변수 없이 이 메서드를 호출하여 모든 파일이 반환되도록 지정합니다. 쿼리를 사용한 StorageFolder.getFilesAsync 호출의 예제를 보려면 빠른 시작: 프로그래밍 방식으로 파일 액세스를 참조하세요. StorageFolder.getFilesAsync 함수가 완료되면 forEach 루프를 사용하여 반환된 각 파일을 반복할 수 있습니다. 이 코드 예제에서는 사진에 있는 모든 파일을 열거하고 각 파일의 이름, 공급자 이름 및 가용성을 표시합니다. // Get a StorageFolder object representing Pictures. var library = Windows.Storage.KnownFolders.picturesLibrary; // Initialize string that will contain the file name, provider name, // and availability for each file. var outString = ""; // Get all files from the StorageFolder object. library.getFilesAsync().then(function (files) { // For each file found ... files.forEach(function (file) { // Retrieve the file's name, provider name, and availability. outString += file.name + " (on " + file.provider.displayName + ") is " + (file.isAvailable ? "available" : "not available") + "\n"; }); }); 이 스크린샷은 사진에 있는 파일의 가용성을 확인하는 샘플 결과를 보여 줍니다. 샘플에서 찾기: 샘플에는 로컬 컴퓨터의 사진에 있는 모든 파일을 열거하는 단추가 포함된 "OneDriveFilesPage"라는 페이지가 있습니다. 각 파일 이름이 해당 파일의 공급자(이 PC 또는 OneDrive) 및 이 파일을 현재 사용할 수 있는지 여부와 함께 표시됩니다. 이 샘플의 JavaScript 코드 및 HTML은 각각 OneDriveFilesPage.js 및 OneDriveFilesPage.html 파일에 있습니다.

 

마무리

	Windows 앱 인증 키트 사용 권장. Windows 앱 인증 키트를 실행하면 앱이 Windows 스토어 요구 사항을 충족하는지 확인하는 데 도움이 됩니다. 앱에 주요 기능을 추가할 때마다 Windows 앱 인증 키트를 실행하는 것이 좋습니다.
	완료되었습니다. 앱의 다양한 파일 처리 기능을 살펴보았으므로 이제 파일 처리 전체 프로세스 도우미 샘플과 같은 앱을 만들 준비가 되었습니다.

 

더 자세히 알고 싶으세요?

빠른 시작: JavaScript의 비동기 프로그래밍

JavaScript를 사용한 비동기 프로그래밍에 대해 자세히 알아봅니다.

빠른 시작: 프로그래밍 방식으로 파일 액세스

파일 열거에 대해 자세히 알아봅니다.

빠른 시작: 파일 읽기 및 쓰기

파일 읽기 및 쓰기에 대해 자세히 알아봅니다.