웹이나 어플을 만들때 사용자가 입력하는 부분은 모두 db에 저장됨.
이미지, 동영상, 파일 등도 db에 저장할 수는 있으나 용량을 너무 많이 잡아먹음
이는 db를 효율적으로 사용하지 못하게 함
이것을 해결하기 위해 파일들의 경우 firebase를 사용해 저장하고 저장된 firbase의 주소를 db에 저장하는 방식을 사용
[firbase 사용방법]
1. 접속: 아래 링크를 통해 접속
Firebase | Google's Mobile and Web App Development Platform
개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.
firebase.google.com
2. 우측상단 Go to Console로 들어가 프로젝트 생성
3 . 생성한 프로젝트를 클릭하면 사진과 같은 페이지가 나타남. 빌드 > storage 클릭 해서 스토리지 활성화
4. firebase 사용방법(test.jsp, test.js로 설명)
- FirbaseJS SDK 설치: CDN으로 SDK를 설치할 수 있도록 가이드 함
- 필수: "https://www.gstatic.com/firebasejs/10.13.1/firebase-app.js"
- storage 사용: "https://www.gstatic.com/firebasejs/10.13.1/firebase-storage.js"
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
// file 업로드 위한 input태그 만듬
<input id="file" type="file" />
</body>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<!-- firebase CDN -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-storage.js"></script>
</html>
- js를 통해 Firebase 초기화 및 업로드 설정
- firbaseconfig는 프로젝트 개요 > 설정 > 구성에서 확인 가능
- html에서 upload > firebase로 업로드 > firbase url 생성 > url을 db에 저장 순으로 이루어짐(여기서는 출력까지만 진행)
// Firebase init
const firebaseConfig = {
.....
};
// fileUpload > firbaseUpload > urlDownload > console.log
$(document).ready(function(){
// Firebase 초기화(중복 초기화 방지를 위해 if문 사용)
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
// storage 초기화
var storage = firebase.storage();
// fileUpload
$('#file').on('change', function() {
var file = $(this)[0].file[0] // 업로드한 파일
var ref = storage.ref('test/' + file.name) // firebase storage에 저장할 경로
// firebaseUpload
ref.put(file).then(function(snapshot) {
// urlDownload
ref.getDownloadURL().then(function(url) {
console.log(url);
}).catch(function(err) {
alert('url download error');
})
}).catch(function() {
alert('firebase upload error');
})
})
})'FrameWork' 카테고리의 다른 글
| [이미지업로드] 미리보기 (0) | 2024.10.27 |
|---|---|
| [동기&비동기] async await (2) | 2024.10.11 |
| [coolSMS] 문자보내기 서비스 이용 (0) | 2024.09.29 |
