당근마켓을 만들며 배워보는 Firebase_9강&10강_문의 드려요.

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

1 2 →

글쓴이

글
2021년 8월 6일 21:59 #12857

노마천리
참가자

안녕하세요. 몇번을 다시 확인했는데 두가지가 해결이 안되고 있어 문의 드립니다.

detail.html에 본인 정보 넣기.
아래 코드를 추가하였으나 detail.html에서 정보를 표시하지 못하였습니다.db.collection('product').doc(쿼리스트링.get('id')).get().then((result)=>{
console.log(result.data())
$('.title').html(result.data().제목)
$('.price').html(result.data().가격)
$('.detail-pic').css('backgroud-image', 'url(${result.data().이미지})' )

edit.html에 본인 정보 불러오기var 쿼리스트링 = new URLSearchParams(window.location.search);
쿼리스트링.get('id');

db.collection('product').doc( 쿼리스트링.get('id') ).get().then((result)=>{
$('#title').val(result.data().제목)
$('#content').val(result.data().내용)
})

detail.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>detail</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="#">PoTaToMK</a>
<span class="ms-auto mx-2" id="userName">사용자이름</span>
<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>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBTmC_UlfIWZJLP6zd_RcSXSLiS95L0Pw8",
authDomain: "potato0001a.firebaseapp.com",
projectId: "potato0001a",
storageBucket: "potato0001a.appspot.com",
messagingSenderId: "335112556779",
appId: "1:335112556779:web:0a1f223f1c37213887aeae"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

</script>

<style>
.detail-pic {
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
}
</style>


<div class="container">

<div></div>
<h2>상세페이지</h2>
<div class="detail-pic my-4" style="background-image: url('https://placeimg.com/640/380/tech');"></div>
<div>
<h5>올린사람 : 못난감자</h5>
<hr>
<h5 class="title">상품명</h5>
<p class="date">올린날짜</p>
<p class="price">가격</p>
<button type="submit" class="btn btn-primary" id="edit">수정하기</button>

</div>
</div>

<script>

const db = firebase.firestore();
const storage = firebase.storage();

// 유저정보확인
var 뺀거 = localStorage.getItem('user')
$('#userName').html(JSON.parse(뺀거).displayName)

var 쿼리스트링 = new URLSearchParams(window.location.search)
쿼리스트링.get('id')

db.collection('product').doc(쿼리스트링.get('id')).get().then((result)=>{
console.log(result.data())
$('.title').html(result.data().제목)
$('.price').html(result.data().가격)
$('.detail-pic').css('backgroud-image', 'url(${result.data().이미지})' )
})

var 쿼리스트링 = new URLSearchParams(window.location.search)
$('#edit').click(function(){
window.location.href = '/edit.html?id=' + 쿼리스트링.get('id')
})

</script>

</body>
</html>

edit.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>edit</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="#">PoTaToMK</a>
<span class="ms-auto mx-2" id="userName">사용자이름</span>
<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>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBTmC_UlfIWZJLP6zd_RcSXSLiS95L0Pw8",
authDomain: "potato0001a.firebaseapp.com",
projectId: "potato0001a",
storageBucket: "potato0001a.appspot.com",
messagingSenderId: "335112556779",
appId: "1:335112556779:web:0a1f223f1c37213887aeae"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

</script>

<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">
<button class="btn btn-danger mt-3" id="send">수정하기</button>
</div>

<script>

const db = firebase.firestore();
const storage = firebase.storage();

var 뺀거 = localStorage.getItem('user')
$('#userName').html(JSON.parse(뺀거).displayName)

var 쿼리스트링 = new URLSearchParams(window.location.search);
쿼리스트링.get('id');

db.collection('product').doc( 쿼리스트링.get('id') ).get().then((result)=>{
$('#title').val(result.data().제목)
$('#content').val(result.data().내용)
})

$('#send').click(function(){
var 바꿀거 = {
제목 : $('#title').val(),
가격 : $('#price').val()
}

db.collection('product').doc().update(바꿀거)
})

</script>

</body>
</html>

2021년 8월 6일 23:49 #12886

codingapple
키 마스터

지금 /detail.html 페이지로 접속하고 있어서 그런듯요

/detail.html?id=어쩌구 이런 페이지로 접속해야 var 쿼리스트링 이게 생성되고

그걸 db.collection('product').doc() 에 잘 집어넣어야 상세 게시물을 찾아올 수 있습니다

2021년 8월 8일 20:46 #13136

노마천리
참가자

강사님, 해결되었습니다. 감사합니다.

2021년 8월 11일 17:17 #13297

노마천리
참가자

강사님 닐짜 표시 부분 추가 문의 드립니다. 메인화면의 시간표시를 yyyy.mm.dd hh.mm으로 하려면 어떻게 해야 하나요? 아래와 같이 수정하였으나 저의 화면에는 "Timestamp(seconds=1628434815, nanoseconds=923000000)"와 같이 표기됩니다.

upload.html에는

var 저장할거 = {
제목 : $('#title').val(),
가격 : $('#price').val(),
내용 : $('#content').val(),
날짜 :<strong> new Timestamp(new Date()),</strong>
이미지 : url
}

index.html에는
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"><a href="/detail.html?id=${doc.id}"> ${doc.data().제목} </a></h5>
<p class="date" >${doc.data().날짜}</p>
<p class="price">${doc.data().가격}</p>
<p class="float-end">❤️ 777 </p>
</div>
</div>`;
$('.container').append(템플릿)
})
})

로 작성하였습니다.

2021년 8월 11일 18:15 #13306

codingapple
키 마스터

new Date(거기있던날짜.toDate())

이런거 쓰면 될걸요 firebase 날짜 parse 하는법 이런거 구글에 찾아보면 방법이 여러가지입니다.

2021년 8월 12일 10:24 #13333

노마천리
참가자

네, parse 하는법으로 검색하니 많이 나오는 군요. 감사합니다. ^^

2021년 9월 9일 13:20 #14843

조규성
참가자

안녕하세요 firebase 상세페이지 만들기 숙제에서

제목이나 다른 정보는 상세 내용을 가져올수 있는데 이미지만 해당이미지를 못가져 오고있어서 알려주심 감사하겠습니다.

        <div class="container">
             Detail Page
            <span style="color: #ff0000;"><strong><div class="detail-pic my-4" style="background-image: url('https://placeimg.com/640/380/tech');"></div></strong></span>
<span style="color: #ff0000;"><strong>            <div></strong></span>
              <hr>
              <p>Title</p><p class="title">상품명</p>
              
              <span>Type</span><p class="type">Type</p>
              <span>Rate</span><p class="rate">가격</p>
            </div>
        </div>

2021년 9월 9일 14:01 #14847

codingapple
키 마스터

${} 문법을 사용하려면 일반 따옴표가 아니라 백틱 기호안에 쓰셔야합니다

2021년 9월 9일 15:30 #14854

조규성
참가자

감사합니다. 해결했습니다. 꾸뻑

2021년 9월 13일 12:41 #14998

노마천리
참가자

안녕하세요. 조규성님!
당근마켓 코드 공유 부탁드려도 될까요?
컴퓨터가 먹통이 되는 바람에 코딩파일이 다 날라가버렸습니다.
이번주에 과제를 제출해야 되는데. 맨붕입니다. 10강까지 하다 그렇게 되었네요. ㅠㅠ
글쓴이

글