안녕하세요. firebase 로그인 기능 강의 관련 질문 드립니다.

9 글 보임 - 1 에서 9 까지 (총 9 중에서)

글쓴이

글
2021년 7월 23일 19:36 #12009

이종욱
참가자

인덱스 파일입니다. 하단 이미지 부분을 수정했더니 갑자기 이미지란이 보이지 않습니다. 바꾸기 전에는 사각 박스는 보였습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link href="main.css" rel="stylesheet">

</head>
<body>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">사과마켓</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container mt-3">

</div>

  <script src="/__/firebase/8.8.0/firebase-app.js"></script>
  
  <script src="/__/firebase/8.8.0/firebase-auth.js"></script>
  <script src="/__/firebase/8.8.0/firebase-firestore.js"></script>
  <script src="/__/firebase/8.8.0/firebase-storage.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

  <script>
    var firebaseConfig = {
    apiKey: "AIzaSyC88gGCeAzUn60bj5_RC3acCnErYLs9pFk",
    authDomain: "hahaha-df9a6.firebaseapp.com",
    projectId: "hahaha-df9a6",
    storageBucket: "hahaha-df9a6.appspot.com",
    messagingSenderId: "546947675925",
    appId: "1:546947675925:web:94dda821fed7a03e68db1c",
    measurementId: "G-N7LVQ5FZXT"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);


  </script>

  <script>

     const db = firebase.firestore();
     db.collection('product').get().then((결과)=>{
        결과.forEach((doc)=>{
          console.log(doc.data());
          var 템플릿 = ` <div class="product">
    <div class="thumbnail" style="background-image: url('${doc.data().이미지}')"></div>
    <div class="flex-grow-1 p-4">
      <h5 class="title">${doc.data().제목}</h5>
      <p class="date">2030년 1월 8일</p>
      <p class="price">${doc.data().가격}</p>
      <p class="float-end">?0</p>
    </div>
  </div>`;
          $('.container').append(템플릿)
        })
     })

  </script>

</body>
</html>

아래는 업로드 파일입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link href="main.css" rel="stylesheet">

</head>
<body>

       <script src="/__/firebase/8.8.0/firebase-app.js"></script>
       
       <script src="/__/firebase/8.8.0/firebase-auth.js"></script>
       <script src="/__/firebase/8.8.0/firebase-firestore.js"></script>
       <script src="/__/firebase/8.8.0/firebase-storage.js"></script>

       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

       <script
       src="https://code.jquery.com/jquery-3.6.0.min.js"
       integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
       crossorigin="anonymous"></script>

       <script>
         var firebaseConfig = {
         apiKey: "AIzaSyC88gGCeAzUn60bj5_RC3acCnErYLs9pFk",
         authDomain: "hahaha-df9a6.firebaseapp.com",
         projectId: "hahaha-df9a6",
         storageBucket: "hahaha-df9a6.appspot.com",
         messagingSenderId: "546947675925",
         appId: "1:546947675925:web:94dda821fed7a03e68db1c",
         measurementId: "G-N7LVQ5FZXT"
       };
       // Initialize Firebase
       firebase.initializeApp(firebaseConfig);
       firebase.analytics();

       </script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">사과마켓</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

     <div class="container mt-3">
       <input type="text" class="form-control mt-2" id="title" placeholder="title">
       <textarea class="form-control mt-2" id="content">content</textarea>
       <input type="text" class="form-control mt-2" id="price" placeholder="price">
       <input class="form-control mt-2" type="file" id="image">
       <button class="btn btn-danger mt-3" id="send">올리기</button>
     </div>

  <script>

     const db = firebase.firestore();
     const storage = firebase.storage();
     $('#send').click(function(){

       var file = document.querySelector('#image').files[0];
       var storageRef = storage.ref();
       var 저장할경로 = storageRef.child('image/' + file.name);
       var 업로드작업 = 저장할경로.put(file)

       업로드작업.on( 'state_changed',
        // 변화시 동작하는 함수
       null,
        //에러시 동작하는 함수
       (error) => {
       console.error('실패사유는', error);
       },
        // 성공시 동작하는 함수
       () => {
         업로드작업.snapshot.ref.getDownloadURL().then((url) => {
          console.log('업로드된 경로는', url);

          var 저장할거 = {
           제목 : $('#title').val(),
           가격 : $('#price').val(),
           내용 : $('#content').val(),
           날짜 : new Date(),
           이미지 : url
       }
       db.collection('product').add(저장할거).then((result)=>{
           console.log(result);
           window.location.href = "/index.html";
       }).catch((err)=>{
              console.log(err)
       })

      });
    }
);


     })


  </script>

</body>
</html>

2021년 7월 23일 23:42 #12018

codingapple
키 마스터

console.log(doc.data()); 출력해보면 어떤게 나오나요?

이미지속성이 없으면 이미지업로드가 잘안되어서 그 안에 이미지속성이 없는게 아닐까요

2021년 7월 24일 06:21 #12021

이종욱
참가자

백그라운드 이미지 경로 변경전에는 정상적이었구요,

변경 후의 콘솔은 이렇네요.

2021년 7월 24일 08:51 #12023

codingapple
키 마스터

저거 Object 눌러보면 어떻게나옵니까

2021년 7월 24일 09:59 #12025

이종욱
참가자

이렇게 나오네요.

2021년 7월 24일 10:54 #12026

codingapple
키 마스터

이미지 항목이 없는거같은데요

이미지 업로드하면 storage에 파일 잘넣어지고 firestore에도 이미지 url 잘 추가 되나요

안되면 무슨 에러가 뜹니까

2021년 7월 24일 11:19 #12028

이종욱
참가자

지금 스토리지 확인을 위해서 업로드 했는데 이미지가 정상적으로 올라가네요. 제 컴퓨터가 이상한걸까요? vue.js 강의 들을때도 뭔가가 계속 안되다가 그냥 좀 쉬다가 갑자기 정상 작동 되는 경우가 있었습니다. 지금도 아무것도 바뀐게 없는데도 갑자기 정상 작동 되네요. 죄송합니다.

2021년 7월 24일 11:22 #12029

이종욱
참가자

firestore에는 이미지 경로가 표시 되네요.

2021년 7월 25일 09:37 #12054

codingapple
키 마스터

파일저장을 잘 안한것일까요

emoji가 네모로 보이는걸 보니 컴퓨터가 이상한게 의심이 가는군요
글쓴이

글

9 글 보임 - 1 에서 9 까지 (총 9 중에서)

답변은 로그인 후 가능합니다.

로그인

안녕하세요. firebase 로그인 기능 강의 관련 질문 드립니다.

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png