clara-shin/index.css

## index.css
.image-list {
  width: 500px;
}

## index.html
<!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>

## index.js
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();
})
	<!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>
	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();
	})