24. 07. 18

오늘 팀을 소개하는 미니 웹 프로젝트를 완성했다. Firebase와 연동하여 댓글을 관리하는 기능을 개발했는데, 지금부터 firebase의 간단한 사용법을 알아보도록 하겠다.

 

우선 파이어베이스(firebase)란 구글이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼으로, 개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와준다. 

 

쉽게 말해 웹 서버를 대신 만들어주는 서비스로, 서버 개발이나 백엔드 코드가 없어도 웹 서비스 출시가 가능하도록 해주는 플랫폼이다.

 

시작하는 방법은 다음과 같다.

 

• 구글 로그인 이후 콘솔로 이동

 

• 프로젝트 만들기

 

• 프로젝트 이름 입력 후 프로젝트 만들기 클릭

 

• 웹으로 선택

 

• 앱 닉네임 적은 후 앱 등록

 

• 스크립트 태그 사용에 들어가 코드 복사 후 사용할 HTML 안에 붙여넣기

 

 

Firebase를 이용해 구현한 댓글 코드는 아래와 같다.

 

		// 데이터 추가
        $("#addBtn").click(async function () {
            let userId = $('#userId').val();
            let comment = $('#comment').val();

            try {
                const docRef = await addDoc(collection(db, "comments"), {
                    'userId': userId,
                    'comment': comment,
                });

                alert("댓글이 추가 되었습니다!");
                window.location.reload();
            } catch (e) {
                console.error("Error adding document: ", e);
            }
        });

        // 데이터 읽기 및 댓글 생성
        const querySnapshot = await getDocs(collection(db, "comments"));

        querySnapshot.forEach((doc) => {

            let userId = doc.data().userId;
            let comment = doc.data().comment

            let temp_html = `
            <div class="card mb-3">
                <div class="card-body">
                    <p class="card-text" id="comment">${comment}</p>
                </div>
                <div class="card-footer" id="userId">
                    ${userId}
                </div>
            </div>`;

            $("#comments").append(temp_html);
        });

 

 

 

완성한 프로젝트의 링크는 아래에 남겨두도록 하겠다. 이번 미니 웹 프로젝트를 통해 프론트엔드의 동작 원리와 같은 기술적인 부분 뿐만 아니라 앞으로 어떤 식으로 협업하게 될 것인지, 그리고 어떤 식으로 소통하는게 좋은지 많이 느끼고 배운 것 같다. 

 

 

https://github.com/areum0116/let_me_introduce_28

GitHub - areum0116/let_me_introduce_28: 내일배움캠프 팀원 소개 미니 웹 프로젝트