-
-
Save clara-shin/000fd84a90dd62ac3c435585d8aec6b4 to your computer and use it in GitHub Desktop.
사진 공유 앱 예제 코드
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .image-list { | |
| width: 500px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="./index.css"> | |
| </head> | |
| <body> | |
| <button class="login-button">로그인</button> | |
| <input type="file" class="file-input"> | |
| <button class="prev-button">이전 페이지</button> | |
| <button class="next-button">다음 페이지</button> | |
| <div class="image-list"></div> | |
| <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script> | |
| <script> | |
| // Initialize Firebase | |
| var config = // ... | |
| firebase.initializeApp(config); | |
| </script> | |
| <script src="./index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const IMAGE_PER_PAGE = 2; | |
| const loginButtonEl = document.querySelector('.login-button'); | |
| const auth = firebase.auth(); | |
| const storage = firebase.storage(); | |
| const database = firebase.database(); | |
| const provider = new firebase.auth.GoogleAuthProvider(); | |
| const fileInputEl = document.querySelector('.file-input'); | |
| const imageListEl = document.querySelector('.image-list'); | |
| const keyStack = []; | |
| loginButtonEl.addEventListener('click', async e => { | |
| const result = await auth.signInWithPopup(provider); | |
| console.log(result.user); | |
| }) | |
| fileInputEl.addEventListener('change', async e => { | |
| console.log(fileInputEl.files[0]); | |
| const refStr = `/images/${auth.currentUser.uid}:${new Date().getTime()}`; | |
| const snapshot = await storage.ref(refStr).put(fileInputEl.files[0]); | |
| // 실시간 데이터베이스에 데이터 저장 | |
| await database.ref('/images').push({ | |
| downloadURL: snapshot.downloadURL, | |
| fileName: fileInputEl.files[0].name | |
| }); | |
| refreshImages(); | |
| }) | |
| async function refreshImages() { | |
| // 실시간 데이터베이스에서 이미지 정보 가져오기 | |
| const snapshot = await database | |
| .ref('/images') | |
| .orderByKey() | |
| .limitToFirst(IMAGE_PER_PAGE + 1) | |
| .startAt(keyStack[keyStack.length - 1] || '') | |
| .once('value'); | |
| const imageObj = snapshot.val(); | |
| const keys = Object.keys(imageObj); | |
| keyStack.push(keys[keys.length - 1]); | |
| // 각 이미지를 표시해주기 | |
| imageListEl.innerHTML = ''; | |
| const imageArr = Object.values(imageObj).slice(0, IMAGE_PER_PAGE); | |
| for (let {downloadURL, fileName} of imageArr) { | |
| const itemEl = document.createElement('div'); | |
| itemEl.classList.add('image-list__item'); | |
| const imageEl = document.createElement('img'); | |
| imageEl.src = downloadURL; | |
| imageEl.classList.add('image-list__image'); | |
| itemEl.appendChild(imageEl); | |
| const nameEl = document.createElement('div'); | |
| nameEl.textContent = fileName; | |
| nameEl.classList.add('image-list__name'); | |
| itemEl.appendChild(nameEl); | |
| imageListEl.appendChild(itemEl); | |
| } | |
| } | |
| firebase.auth().onAuthStateChanged(function(user) { | |
| if (user) { | |
| refreshImages(); | |
| } | |
| }); | |
| document.querySelector('.next-button').addEventListener('click', async e => { | |
| refreshImages(); | |
| }) | |
| document.querySelector('.prev-button').addEventListener('click', async e => { | |
| keyStack.pop(); | |
| keyStack.pop(); | |
| refreshImages(); | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment