Firebase로 회원 상세 페이지 만들기

URI와 URL의 차이

• URI (uniform Resource Identifier): 자원에서 위치 뿐만 아니라 자원의 고유한 식별자를 나타내고 있는 것
  • https://kyn1013.tistory.com/user/1  
• URL (uniform Resource location) : 자원의 위치를 나타내고 있는 것
  • https://kyn1013.tistory.com/user

 

1. 해당 회원의 상세 페이지로 이동하게 하기

• 해당 회원의 이름을 눌렀을 때 해당 회원의 식별값(id값 또는 이름)으로  쿼리파라미터방식 또는 패스로 이동하게 만들기
• encodeURIComponent(uriComponent) : 공백이나 특수문자가 들어간 경우에도 안전하게 해석되도록 하기 위해서 사용

let tempHtml = `
            <div class="col">
                <div class="card">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h2 class="name">
                        <a href="member_detail.html?name=${encodeURIComponent(name)}">${name}🐥</a>
                        </h2>
                        <p class="introduction">${comment}</p>
                    </div>
                </div>
            </div>
            `

 

2. 해당 회원의 상세 페이지에서 쿼리파라미터를 추출 한 후에 쿼리를 이용하여 해당 회원의 정보 가져오기

• window.location.search : url의 쿼리 문자열 부분을 반환 (?name=John&id=123)
• new URLSearchParams() : 쿼리 문자열을 키-값 쌍으로 만듦
• query(collection(db, "members"), where("id", "==", memberId));  : 해당 조건에 맞는 값 조회하기

try {
            const q = query(collection(db, "members"), where("id", "==", memberId));
            const querySnapshot = await getDocs(q);

            if (!querySnapshot.empty) {
                const memberData = querySnapshot.docs[0].data();
                document.getElementById("memberDetail").innerHTML = `
                        <p><strong>이름:</strong> ${memberData.name}</p>
                        <p><strong>소개:</strong> ${memberData.introduction}</p>
                        <p><strong>지역:</strong> ${memberData.region}</p>
                        <img src="${memberData.image}" alt="${memberData.name}" style="max-width: 200px;">
                    `;
            } else {
                document.getElementById("memberDetail").innerText = "회원 정보를 찾을 수 없습니다.";
            }
        } catch (error) {
            console.error("Error fetching member details: ", error);
            document.getElementById("memberDetail").innerText = "회원 정보를 로드하는 중 오류가 발생했습니다.";
        }

 

여기서 이름을 누르면!

 

해당 회원의 상세 페이지로 이동!