웹에서 Cloud Storage 참조 만들기
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
파일은 Cloud Storage 버킷에 저장됩니다. 이 버킷의 파일은 로컬 하드 디스크의 파일 시스템 또는 Firebase Realtime Database의 데이터와 같이 계층 구조로 표시됩니다.
파일을 가리키는 참조를 만들면 앱에 액세스 권한이 부여됩니다. 이러한 참조를 사용하여 데이터 업로드 또는 다운로드, 메타데이터 가져오기 또는 업데이트, 파일 삭제 등을 수행할 수 있습니다. 참조는 특정 파일을 가리키거나 계층 구조에서 보다 상위 노드를 가리킬 수도 있습니다.
Firebase Realtime Database를 사용해 본 적이 있다면 이 경로가 매우 익숙할 것입니다. 그러나 파일 데이터는 Realtime Database가 아니라 Cloud Storage에 저장됩니다.
참조 만들기
파일 업로드, 다운로드, 삭제, 메타데이터 가져오기 또는 업데이트를 수행하려면
작업할 파일을 가리키는 참조를 만들어야 합니다. 참조는 클라우드의
파일을 가리키는 포인터라고 볼 수 있습니다. 참조는 메모리에 부담을 주지 않으므로 얼마든지 많이 만들 수 있으며 여러 작업에서 재사용할 수도 있습니다.
참조를 만들려면 getStorage()
를 사용하여 스토리지 서비스의 인스턴스를 가져온 후 서비스를 인수로 사용하여 ref()
를 호출합니다.
이 참조는 Cloud Storage 버킷의 루트를 가리킵니다.
Web
import { getStorage, ref } from "firebase/storage";
// Get a reference to the storage service, which is used to create references in your storage bucket
const storage = getStorage();
// Create a storage reference from our storage service
const storageRef = ref(storage);
Web
// Get a reference to the storage service, which is used to create references in your storage bucket
var storage = firebase.storage();
// Create a storage reference from our storage service
var storageRef = storage.ref();
ref()
를 호출할 때 이 경로를 두 번째 인수로 전달하여 'images/space.jpg'
와 같이 트리에서 하위 위치를 가리키는 참조를 만들 수 있습니다.
Web
import { getStorage, ref } from "firebase/storage";
const storage = getStorage();
// Create a child reference
const imagesRef = ref(storage, 'images');
// imagesRef now points to 'images'
// Child references can also take paths delimited by '/'
const spaceRef = ref(storage, 'images/space.jpg');
// spaceRef now points to "images/space.jpg"
// imagesRef still points to "images"
Web
// Create a child reference
var imagesRef = storageRef.child('images');
// imagesRef now points to 'images'
// Child references can also take paths delimited by '/'
var spaceRef = storageRef.child('images/space.jpg');
// spaceRef now points to "images/space.jpg"
// imagesRef still points to "images"
참조로 탐색하기
parent
및 root
속성을 사용하여 파일 계층의 위쪽으로 이동할 수도 있습니다. parent
는 한 단계 위로 탐색하며 root
는 맨 위로 탐색합니다.
Web
import { getStorage, ref } from "firebase/storage";
const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');
// Parent allows us to move to the parent of a reference
const imagesRef = spaceRef.parent;
// imagesRef now points to 'images'
// Root allows us to move all the way back to the top of our bucket
const rootRef = spaceRef.root;
// rootRef now points to the root
Web
// Parent allows us to move to the parent of a reference
var imagesRef = spaceRef.parent;
// imagesRef now points to 'images'
// Root allows us to move all the way back to the top of our bucket
var rootRef = spaceRef.root;
// rootRef now points to the root
child()
, parent
, root
는 각각 참조를 반환하므로 여러 번 연결할 수 있습니다. root
의 parent
(null
)는 예외입니다.
Web
import { getStorage, ref } from "firebase/storage";
const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');
// References can be chained together multiple times
const earthRef = ref(spaceRef.parent, 'earth.jpg');
// earthRef points to 'images/earth.jpg'
// nullRef is null, since the parent of root is null
const nullRef = spaceRef.root.parent;
Web
// References can be chained together multiple times
var earthRef = spaceRef.parent.child('earth.jpg');
// earthRef points to 'images/earth.jpg'
// nullRef is null, since the parent of root is null
var nullRef = spaceRef.root.parent;
참조 속성
fullPath
, name
, bucket
속성으로 참조를 조사하여 참조가 가리키는 파일을 자세히 파악할 수 있습니다. 이러한 속성은 파일의 전체 경로, 파일의 이름, 파일이 저장된 버킷을 가져옵니다.
Web
import { getStorage, ref } from "firebase/storage";
const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');
// Reference's path is: 'images/space.jpg'
// This is analogous to a file path on disk
spaceRef.fullPath;
// Reference's name is the last segment of the full path: 'space.jpg'
// This is analogous to the file name
spaceRef.name;
// Reference's bucket is the name of the storage bucket where files are stored
spaceRef.bucket;
Web
// Reference's path is: 'images/space.jpg'
// This is analogous to a file path on disk
spaceRef.fullPath;
// Reference's name is the last segment of the full path: 'space.jpg'
// This is analogous to the file name
spaceRef.name;
// Reference's bucket is the name of the storage bucket where files are stored
spaceRef.bucket;
참조 제한사항
참조 경로와 이름에는 유효한 Unicode 문자를 어떤 순서로든 포함할 수 있지만 다음을 비롯하여 몇 가지 제한사항이 있습니다.
- UTF-8 인코딩 시 총
reference.fullPath
길이는 1~1,024바이트여야 합니다.
- 캐리지 리턴 또는 라인 피드 문자는 사용할 수 없습니다.
#
, [
, ]
, *
또는 ?
는 Firebase Realtime Database 또는 gsutil과 같은 기타 도구와 잘 호환되지 않으므로 사용하지 마세요.
전체 예시
Web
import { getStorage, ref } from "firebase/storage";
const storage = getStorage();
// Points to the root reference
const storageRef = ref(storage);
// Points to 'images'
const imagesRef = ref(storageRef, 'images');
// Points to 'images/space.jpg'
// Note that you can use variables to create child values
const fileName = 'space.jpg';
const spaceRef = ref(imagesRef, fileName);
// File path is 'images/space.jpg'
const path = spaceRef.fullPath;
// File name is 'space.jpg'
const name = spaceRef.name;
// Points to 'images'
const imagesRefAgain = spaceRef.parent;
Web
// Points to the root reference
var storageRef = firebase.storage().ref();
// Points to 'images'
var imagesRef = storageRef.child('images');
// Points to 'images/space.jpg'
// Note that you can use variables to create child values
var fileName = 'space.jpg';
var spaceRef = imagesRef.child(fileName);
// File path is 'images/space.jpg'
var path = spaceRef.fullPath;
// File name is 'space.jpg'
var name = spaceRef.name;
// Points to 'images'
var imagesRef = spaceRef.parent;
다음으로 Cloud Storage에 파일을 업로드하는 방법을 알아보세요.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-08-13(UTC)
[null,null,["최종 업데이트: 2025-08-13(UTC)"],[],[],null,["# Create a Cloud Storage reference on Web\n\n\u003cbr /\u003e\n\nYour files are stored in a\n[Cloud Storage](//cloud.google.com/storage) bucket. The\nfiles in this bucket are presented in a hierarchical structure, just like the\nfile system on your local hard disk, or the data in the Firebase Realtime Database.\nBy creating a reference to a file, your app gains access to it. These references\ncan then be used to upload or download data, get or update metadata or delete\nthe file. A reference can either point to a specific file or to a higher level\nnode in the hierarchy.\n\nIf you've used the [Firebase Realtime Database](/docs/database), these paths should\nseem very familiar to you. However, your file data is stored in\nCloud Storage, **not** in the Realtime Database.\n\nCreate a Reference\n------------------\n\nIn order to upload or download files, delete files, or get or update metadata,\nyou must create a reference to the file you want to operate on. A reference\ncan be thought of as a pointer to a file in the cloud. References are\nlightweight, so you can create as many as you need, and they are also reusable for\nmultiple operations.\n\nTo create a reference, get an instance of the Storage service using\n`getStorage()` then call `ref()` with the service as an argument.\nThis reference points to the root of your Cloud Storage bucket. \n\n### Web\n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\n// Get a reference to the storage service, which is used to create references in your storage bucket\nconst storage = getStorage();\n\n// Create a storage reference from our storage service\nconst storageRef = ref(storage);https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_create_ref.js#L8-L14\n```\n\n### Web\n\n```javascript\n// Get a reference to the storage service, which is used to create references in your storage bucket\nvar storage = firebase.storage();\n\n// Create a storage reference from our storage service\nvar storageRef = storage.ref();https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L6-L10\n```\n\nYou can create a reference to a location lower in the tree,\nsay `'images/space.jpg'` by passing in this path as a second argument when\ncalling `ref()`. \n\n### Web\n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\n\n// Create a child reference\nconst imagesRef = ref(storage, 'images');\n// imagesRef now points to 'images'\n\n// Child references can also take paths delimited by '/'\nconst spaceRef = ref(storage, 'images/space.jpg');\n// spaceRef now points to \"images/space.jpg\"\n// imagesRef still points to \"images\" \nhttps://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_create_ref_child.js#L8-L19\n```\n\n### Web\n\n```javascript\n// Create a child reference\nvar imagesRef = storageRef.child('images');\n// imagesRef now points to 'images'\n\n// Child references can also take paths delimited by '/'\nvar spaceRef = storageRef.child('images/space.jpg');\n// spaceRef now points to \"images/space.jpg\"\n// imagesRef still points to \"images\" \nhttps://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L18-L25\n```\n\nNavigate with References\n------------------------\n\nYou can also use the `parent` and `root` properties to navigate up the\nfile hierarchy. `parent` navigates up one level,\nwhile `root` navigates all the way to the top. \n\n### Web\n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\nconst spaceRef = ref(storage, 'images/space.jpg');\n\n// Parent allows us to move to the parent of a reference\nconst imagesRef = spaceRef.parent;\n// imagesRef now points to 'images'\n\n// Root allows us to move all the way back to the top of our bucket\nconst rootRef = spaceRef.root;\n// rootRef now points to the root \nhttps://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_navigate_ref.js#L8-L19\n```\n\n### Web\n\n```javascript\n// Parent allows us to move to the parent of a reference\nvar imagesRef = spaceRef.parent;\n// imagesRef now points to 'images'\n\n// Root allows us to move all the way back to the top of our bucket\nvar rootRef = spaceRef.root;\n// rootRef now points to the root \nhttps://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L33-L39\n```\n\n`child()`, `parent`, and `root` can be chained together multiple times, as\neach returns a reference. The exception is the `parent` of `root`, which\nis `null`. \n\n### Web\n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\nconst spaceRef = ref(storage, 'images/space.jpg');\n\n// References can be chained together multiple times\nconst earthRef = ref(spaceRef.parent, 'earth.jpg');\n// earthRef points to 'images/earth.jpg'\n\n// nullRef is null, since the parent of root is null\nconst nullRef = spaceRef.root.parent;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_navigate_ref_chain.js#L8-L18\n```\n\n### Web\n\n```javascript\n// References can be chained together multiple times\nvar earthRef = spaceRef.parent.child('earth.jpg');\n// earthRef points to 'images/earth.jpg'\n\n// nullRef is null, since the parent of root is null\nvar nullRef = spaceRef.root.parent;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L47-L52\n```\n\nReference Properties\n--------------------\n\nYou can inspect references to better understand the files they point to\nusing the `fullPath`, `name`, and `bucket` properties. These properties\nget the full path of the file, the name of the file,\nand the bucket the file is stored in. \n\n### Web\n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\nconst spaceRef = ref(storage, 'images/space.jpg');\n\n// Reference's path is: 'images/space.jpg'\n// This is analogous to a file path on disk\nspaceRef.fullPath;\n\n// Reference's name is the last segment of the full path: 'space.jpg'\n// This is analogous to the file name\nspaceRef.name;\n\n// Reference's bucket is the name of the storage bucket where files are stored\nspaceRef.bucket;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_ref_properties.js#L8-L22\n```\n\n### Web\n\n```javascript\n// Reference's path is: 'images/space.jpg'\n// This is analogous to a file path on disk\nspaceRef.fullPath;\n\n// Reference's name is the last segment of the full path: 'space.jpg'\n// This is analogous to the file name\nspaceRef.name;\n\n// Reference's bucket is the name of the storage bucket where files are stored\nspaceRef.bucket;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L60-L69\n```\n\nLimitations on References\n-------------------------\n\nReference paths and names can contain any sequence of valid Unicode characters,\nbut certain restrictions are imposed including:\n\n1. Total length of `reference.fullPath` must be between 1 and 1024 bytes when UTF-8 encoded.\n2. No Carriage Return or Line Feed characters.\n3. Avoid using `#`, `[`, `]`, `*`, or `?`, as these do not work well with other tools such as the [Firebase Realtime Database](/docs/database) or [gsutil](https://cloud.google.com/storage/docs/gsutil).\n\nFull Example\n------------\n\n### Web\n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\n\n// Points to the root reference\nconst storageRef = ref(storage);\n\n// Points to 'images'\nconst imagesRef = ref(storageRef, 'images');\n\n// Points to 'images/space.jpg'\n// Note that you can use variables to create child values\nconst fileName = 'space.jpg';\nconst spaceRef = ref(imagesRef, fileName);\n\n// File path is 'images/space.jpg'\nconst path = spaceRef.fullPath;\n\n// File name is 'space.jpg'\nconst name = spaceRef.name;\n\n// Points to 'images'\nconst imagesRefAgain = spaceRef.parent;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_ref_full_example.js#L8-L30\n```\n\n### Web\n\n```javascript\n// Points to the root reference\nvar storageRef = firebase.storage().ref();\n\n// Points to 'images'\nvar imagesRef = storageRef.child('images');\n\n// Points to 'images/space.jpg'\n// Note that you can use variables to create child values\nvar fileName = 'space.jpg';\nvar spaceRef = imagesRef.child(fileName);\n\n// File path is 'images/space.jpg'\nvar path = spaceRef.fullPath;\n\n// File name is 'space.jpg'\nvar name = spaceRef.name;\n\n// Points to 'images'\nvar imagesRef = spaceRef.parent;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L75-L93\n```\n\nNext, let's learn how to\n[upload files](/docs/storage/web/upload-files) to\nCloud Storage."]]