TIL - 2023.11.28

어제 본 캠프가 개강을 한 이후 작은 프로젝트가 주어졌다.

프로젝트는 팀 소개 페이지 만들기.

어떤 식으로 팀 과제가 주어지고, 어떻게 협력해서 과제를 수행해 나가야 하는지를 알려주는 목적으로 진행되는 것 같았다.

팀 소개 페이지 만들기는 이전에 사전캠프에서 배운 요소들을 이용해 충분히 만들 수 있는 수준이였다.

하지만 영상을 보고 따라하는게 아닌 아얘 0부터 시작해야 하는 거다보니 조금 막막했다.

오늘은 각 팀원의 카드를 클릭했을 때 팀원의 정보와 짧은 자기소개가 나오는 모달 창을 만드는 작업을 했다.

이전에 했던 작업을 가져와 구현했다.

<div id="myModal" class="modal">
        <div class="modal-content">
            <p id="modalcontent">
            <div class="teamjoining" id="joindocs">
                <div class="mb-3">
                    <label for="exampleFormControlInput1" class="form-label">1. 이름을 입력해주세요!</label>
                    <input id="name" type="email" class="form-control" id="exampleFormControlInput1" placeholder="이름">
                </div>
                <div class="mb-3">
                    <label for="exampleFormControlInput1" class="form-label">2. 나이를 입력해주세요!</label>
                    <input id="age" type="email" class="form-control" id="exampleFormControlInput1" placeholder="나이">
                </div>
                <div class="mb-3">
                    <label for="exampleFormControlInput1" class="form-label">2. MBTI를 입력해주세요!</label>
                    <input id="mbti" type="email" class="form-control" id="exampleFormControlInput1" placeholder="MBTI">
                </div>
                <div class="mb-3">
                    <label for="exampleFormControlInput1" class="form-label">3. 이미지 주소를 입력해주세요!</label>
                    <input id="pic" type="email" class="form-control" id="exampleFormControlInput1"
                        placeholder="이미지 주소">
                </div>
                <div class="mb-3">
                    <label for="exampleFormControlTextarea1" class="form-label">4. 짧은 자기소개를 입력해주세요!</label>
                    <textarea id="intro" class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
                </div>
            </div>
            <!-- // joinbtn 합류/닫기 버튼 -->
            <div class="joinbtn">
                <button id="joinus" type="button" class="btn btn-primary">합류하기!</button>
                <button id="joiningdocclose" type="button" class="btn btn-outline-primary">닫기</button>
            </div>
            </p>
        </div>
    </div>

이런식으로 modal 창을 구현하고, 아래 코드로 열고 닫는 기능을 넣었다.

$(".joiningbtn").click(function () {
            $('#myModal').show();
})
        $("#joiningdocclose").click(function () {
            $('#myModal').hide();
})

 

 

modal창에서 받은 정보는 firebase에 추가된다.

$("#joinus").click(async function () {
            let pic = $('#pic').val();
            let name = $('#name').val();
            let mbti = $('#mbti').val();
            let intro = $('#intro').val();
            let age = $('#age').val();
            let doc = {
                'pic': pic,
                'name': name,
                'age': age,
                'mbti': mbti,
                'intro': intro,
                'timestamp': new Date()
            };
            await addDoc(collection(db, "member"), doc); //member 팀원 정보
            alert('환영합니다!');
            window.location.reload();
        })

 

timestamp는 추가된 팀원 카드를 추가된 시간순으로 나열하기 위해 추가한 필드이다. new date()는 현재 시간을 나타낸다.

 

이렇게 추가된 카드는 getDocs를 사용해 불러온다.

// 문서ID저장 전역변수
let selectedDocumentId;

let collectionRef = collection(db, 'member');
let myquery = query(collectionRef, orderBy('timestamp', 'asc'));

getDocs(myquery).then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        selectedDocumentId = doc.id;
        let row = doc.data();

        let pic = row['pic'];
        let name = row['name'];
        let age = row['age'];
        let mbti = row['mbti'];
        let intro = row['intro'];
        let temp_html = `
    <div class="col">
        <div class="card h-100">
            <img src="${pic}" class="card-img-top"
                alt="...">
            <div class="card-body">
                <h5 class="card-title">${name}</h5>
                <p class="card-text">
                    <p class="mbti">MBTI: ${mbti}</p></p>
                    <p class="age">나이: ${age}세</p></p>
            </div>
            <div class="doc-id" id="docID" style="display: none;">${selectedDocumentId}</div>
            <div class="intro" style="display: none;">${intro}</div>
        </div>
    </div>`;
        $('#card').append(temp_html);

    });
});

 

카드를 시간순으로 정렬하려면 orderBy라는 메소드를 사용해야 하는데, 이 메소드는 firebase에서 값을 가져올 때 getDocs에 query형태를 사용해야 한다. 그래서 import에 query와 orderBy를 추가했다.

let query = query(collectionRef, orderBy('timestamp', 'asc'));

getDocs(query).then((querySnapshot) => {
    querySnapshot.forEach((doc) => {

처음엔 이렇게 코드를 작성했다.

그러자 Uncaught SyntaxError: Identifier 'query' has already been declared (at index_last.html:150:13)

이런 오류가 발생했다. 'query'가 이미 정의되어있다는 소리였는데, 찾아보니 let query = query(..... 이 부분에서 문제가 발생했다. query 메소드를 사용하기 위해 firebaseSDK에서 query를 Import했었는데, 거기서 쓴 query와  let query가 이름이 같아서 발생한 문제였다.

 let query를  let myquery = ... 으로 바꿨더니 잘 작동했다.

사소한 변수 이름때문에 프로그램 전체가 먹통이 될 수도 있다는걸 알았다. 다음엔 더 명확하고 겹치지 않게 변수 이름을 정해야 겠다.