미니 프로젝트_Day 2

하루 요약

오늘은 본캠프 2일 차... 어제 진행하던 프로젝트를 계속 진행하였다.
내가 담당했던 멤버 카드, 방명록 파트를 오전에 다 해결하고 팀원분과 메인 페이지를 합쳤다!!
팀원분이 작성한 코드와 내가 작성한 코드를 모두 합친 후, 나는 현재 시간과 방명록을 데이터베이스와 연결하는 부분을 추가적으로 담당하기로 했다.

점심을 맛있게 먹고 난 후, 현재 시간을 나타내주는 Javascript 코드를 작성하고 페이지에 문제없이 표시되는 것을 확인할 수 있었다.

<!-- 시계 -->
<div class="clock">
    <h3 id="time"></h3>
</div>

// 시간 불러오는 기능
function updateTime() {
    const timeElement = document.getElementById("time");
    const now = new Date();

    // 시간을 형식에 맞게 가져오기
    const hours = String(now.getHours()).padStart(2, "0"); // 시
    const minutes = String(now.getMinutes()).padStart(2, "0"); // 분
    const seconds = String(now.getSeconds()).padStart(2, "0"); // 초

    // 시간을 문자열로 조합
    timeElement.textContent = `${hours}:${minutes}:${seconds}`;
}

// 1초마다 시간을 업데이트
setInterval(updateTime, 1000);

// 페이지가 로드될 때 즉시 시간을 표시하기 위해 초기 호출
updateTime();

위의 두 코드를 통해 실시간으로 시간이 표현되는 것을 성공했다 😎😎😎 

다음은 방명록을 작성하면 Firestore에 저장되고 다시 불러와서 나타날 수 있도록 하는 기능을 구현했다.
우선 팀장님의 Firestore Database와 연동을 하고 방명록이 Database에 저장될 수 있도록 작성했다.

// 방명록 저장 기능
$(document).on("click", "#guestbookbtn", async function () {
    let name = $('#exampleFormControlInput1').val();
    let content = $('#exampleFormControlTextarea1').val();

    if (name && content) {
        let docData = {
            'name': name,
            'content': content
        };
        try {
            await addDoc(collection(db, "guestbook"), docData);
            alert('방명록이 저장되었습니다!');
            window.location.reload();
        } catch (error) {
            console.error("방명록 저장 중 오류가 발생했습니다: ", error);
        }
    } else {
        alert('이름과 내용을 모두 입력해주세요.');
    }
});

그다음은 Database에서 데이터를 가져와서 페이지에 보여주는 기능을 구현했다.

// 방명록 가져오기 및 카드로 표시
async function loadGuestbook() {
    try {
        $('#card').empty();  // 기존 데이터를 초기화하여 중복 방지
        let docs = await getDocs(collection(db, "guestbook"));
        docs.forEach((doc) => {
            let row = doc.data();
            let id = doc.id;
            let name = row['name'];
            let content = row['content'];

            let temp_html = `
            <div class="guestbookcard" id="guestbook-${id}">
                <div class="card-body">
                    <h3>${name}</h3>
                    <p>${content}</p>
                    <button type="button" class="btn btn-outline-primary edit-btn" data-id="${id}">수정</button>
                    <button type="button" class="btn btn-outline-danger delete-btn" data-id="${id}">삭제</button>
                </div>
            </div>`;

            $('#card').append(temp_html);
        });
    } catch (error) {
        console.error("방명록을 가져오는 중 오류가 발생했습니다: ", error);
    }
}

이 부분까지 완성하고 팀 깃허브에 git push를 해서 올려야 하는데 여기서 문제가 발생했다.......
git push가 먹히지 않았다... 🥲🥲🥲 분명 잘되던 Github가 말썽이 되니까 식은땀이 나기 시작했다...

다시 정신을 차리고 에러 코드를 복사해서 구글링도 하고 ChatGPT에게도 물어보면서 차근차근 한 단계씩 해결해 나가기 시작했다!

To https://github.com/hajoo0322/1week-project.git
 ! [rejected]        main -> main (non-fast-forward)
error: failed to push some refs to 'https://github.com/hajoo0322/1week-project.git' 
hint: Updates were rejected because the tip of your current branch is behind        
hint: its remote counterpart. If you want to integrate the remote changes,
hint: use 'git pull' before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

해결하는 과정에서 가장 많이 본 에러 코드이다...........
이 오류는 현재 로컬 브랜치가 원격 저장소의 최신 상태와 일치하지 않아서 발생한다.
즉, 원격 저장소에 있는 커밋이 로컬에 아직 반영되지 않았기 때문에 git push 명령어가 거부된 것이었다...
이를 해결하기 위해서는 원격 저장소의 변경 사항을 먼저 로컬에 가져와야 한다.
그래서 다음 코드들을 차례로 입력했고 무사히 에러 코드를 넘길 수 있었다 😃😃 

git pull origin main

git add <파일명>
git commit -m "메시지 입력"

git push origin main

 

From https://github.com/hajoo0322/1week-project
 * branch            main       -> FETCH_HEAD
error: Your local changes to the following files would be overwritten by merge:
        index.html
Please commit your changes or stash them before you merge.
Aborting
Merge with strategy ort failed.

다음으로 많이 본 에러 코드이다....
이 오류 메시지는 로컬에서 수정한 파일이 있어서 병합을 진행할 수 없을 때 발생한다.
index.html 파일에 로컬 변경 사항이 존재하기 때문에, 병합을 진행하기 전에 이를 정리해야 한다.
다음 코드들을 이용해서 에러를 무사히 해결할 수 있었다 🤔🤔 

git add index.html
git commit -m "메시지 작성"

git pull origin main

설명하자면 git add와 git commit을 통해 변경 사항을 커밋한 후 병합을 진행하는 것이다!

이렇게 구글링과 ChatGPT 덕분에 무사히 에러를 넘길 수 있었다... 🤨🤨 
에러를 넘기고 Github main에 git push를 하고 나서 팀원들끼리 다시 프로젝트에 대해 상의하는 시간을 가졌다!

본 캠프는 백엔드 트랙이어서 매니저님께서 프론트에 너무 집중하지 않아도 된다고 하신 말씀을 듣고, 모두 모여서 Firebase와 연동을 해서 우리가 구현을 할 수 있는 기능이 뭐가 있을까..... 회의를 진행했다.
회의를 진행한 결과, 회원가입 기능, 로그인 기능, 방명록 추가 · 수정 · 삭제 기능, 회원가입 시 입력되는 암호를 해시 알고리즘을 통한 보안 강화 등의 의견이 결정되었다.

나는 그 중에서 회원가입, 로그인 기능을 담당하기로 했다.
우선 Firebase를 통해 회원가입, 로그인 기능을 어떻게 할 수 있는지 잘 몰랐기에 구글링을 하였고 수많은 자료 중에서 유튜브 조코딩 채널의 Firebase를 통한 회원가입, 로그인 기능 추가 영상이 눈에 띄었다.

✔️ 참고

유튜브 주소 - 조코딩 ( 로그인 기능 구현하기 왕기초 (ft. 파이어베이스) )
https://www.youtube.com/watch?v=tPqTE14DEUg

난 기능을 구현하기 위해서 바로 유튜브로 달려가서 영상을 시청했고, 알려주는 코드들을 공부하면서 실시간으로 회원가입, 로그인 페이지를 만들고 기능을 추가했다.

회원가입 페이지

로그인 페이지

 
위와 같이 깔끔하게 정리된 페이지를 만들 수 있었고 안에 회원가입 기능과 로그인 기능을 추가했다.

// 회원가입 기능
import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js";

document.getElementById('signUpButton').addEventListener('click', (event) => {  // 클릭했을 때 함수 실행
    event.preventDefault();

    const email = document.getElementById('signUpEmail').value;
    const password = document.getElementById('signUpPassword').value;

    const auth = getAuth();  // auth라는 변수를 만들어서 getAuth() 함수 실행
    createUserWithEmailAndPassword(auth, email, password)  // User를 만들어주겠다는 함수
        .then((userCredential) => {
            console.log(userCredential);
            // 회원가입 성공 시
            alert('회원가입되셨습니다!');
            window.location.href = "login.html"; // login.html로 이동
        })
        .catch((error) => {
            console.log('error');
            const errorCode = error.code;
            const errorMessage = error.message;
            alert(`회원가입에 실패했습니다: ${errorMessage}`); // 에러 메시지 표시
        });
});

// 로그인 기능
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js";

const auth = getAuth();  // auth라는 변수를 만들어서 getAuth() 함수 실행

// 클릭했을 때 함수 실행
document.getElementById('signInButton').addEventListener('click', (event) => {
    event.preventDefault()

    const signInEmail = document.getElementById('signInEmail').value;
    const signInPassword = document.getElementById('signInPassword').value;


    signInWithEmailAndPassword(auth, signInEmail, signInPassword)
        .then((userCredential) => {
            // Signed in
            console.log(userCredential)
            const user = userCredential.user;
            // ...
        })
        .catch((error) => {
            console.log('로그인 실패!')
            const errorCode = error.code;
            const errorMessage = error.message;
        });
})

영상을 따라하면서 만들어서 그런지 따로 오류는 발생하지 않았고 무사히 회원가입 페이지, 로그인 페이지를 완성할 수 있었다.
그 후 팀 Github에 git push 하여 모든 팀원들이 볼 수 있도록 하였다!

 

 

프로젝트하면서 느낀 점 🤨

프론트엔드 부분에서 코드를 작성해서 페이지를 완성하는 부분도 내가 생각했던 것보다 더 어려웠고 복잡했다... 또한 새로운 기능들을 추가하기 위해 구글링, ChatGPT 등을 이용해서 공부하는 것도 흥미로웠고, 실제로 페이지에 잘 적용되는 것도 신기했다. 😮😮

또한 프로젝트를 진행하면서 새로 알게 된 내용들이 엄청나게 많았다.... 
난 전혀 모르고 있었던 Github의 branch 개념들과 Pull Request 등등 협업할 때 필요한 내용들이 프로젝트하면서 처음 듣고 공부하게 되었다. 그리고 Github에 git commit 할 때 깃 메시지와 깃모지를 이용해서 정해진 규칙으로 작성하면 눈에 더 깔끔하고 잘 들어온다는 것을 매니저님을 통해 듣고 프로젝트하는 동안 익숙해지기 위해 계속 사용해서 익숙해져야겠다고 생각했다.

✔️ 참고

깃 메시지 참고
https://jane-aeiou.tistory.com/93

깃모지 참고
https://inpa.tistory.com/entry/GIT-%E2%9A%A1%EF%B8%8F-Gitmoji-%EC%82%AC%EC%9A%A9%EB%B2%95-Gitmoji-cli

 
아직 프로젝트가 진행 중이고, 할 것도 많이 남았기 때문에 체력과 컨디션 관리를 잘하면서 이번 주에 프로젝트를 잘 마무리했으면 좋겠다. 지금까지 문제없이 잘 진행되고 있어서 기분이 좋다 😃😃😃