TIL 4주 3일차

 

댓글에 프로필 사진과 사용자 이름을 추가하는 기능을 구현하였다.

 

 

 

const post_HTML = `

<div class="post" id="${docSnap.id}">

    <div class="post-content">

        <h1>${docSnap.data()["title"]}</h1>

        <div class="post-creator-info" id="#loadUserProfile.${postCreatedBy}" onclick="checkHash(this.id);">

            <img id="post-creator-profile" class="post-creator-profile" src="../img/default-profile.png">

            <p id="post-creator-name" class="post-creator-name"></p>

        </div>

        <p><pre class="post-content-pre">${docSnap.data()["content"]}</pre></p>

    </div>

    <div class="comments" id="comments"></div>

</div>`

        const post_Btn = `

    <div>

        <button onclick="editPost('${postId}')">글 수정</button>

        <button onclick="scratchPost('${postId}')">글 삭제</button>

    </div>

        `

       

        Promise.all([

            getUserDisplayName(postCreatedBy),

            getUserPhotoURL(postCreatedBy)

        ]).then(function(response) {

            const [userName, profileURL] = response

            document.getElementById("post-creator-profile").src = profileURL;

            document.getElementById("post-creator-name").innerHTML = userName;

            // 여기서 변수로 위에 html 수정

        })

----------------------------------------------------------------------------------------------------------------------

<img id="post-creator-profile" class="post-creator-profile" src="../img/default-profile.png">

            <p id="post-creator-name" class="post-creator-name"></p>

---

const [userName, profileURL] = response

document.getElementById("post-creator-profile").src = profileURL;  // -> Javascript set img src

            document.getElementById("post-creator-name").innerHTML = userName;

 

userName , profileURL 함수로 지정

id가 post-creator-profile, post-creator-name 인 태그를 각각 src와 html 출력