FIRE BASE 서버 통신

https://github.com/kyung412820/NoBase-Introduce

GitHub - kyung412820/NoBase-Introduce

 

구현에는 어제 학습했던 프론트엔드 관련 지식이 함유되었다.

가장 기본이 되는 Java Script + HTML + CSS를 바탕으로 웹페이지의 화면과 이동을 구현하였다

 

대부분의 패널이 위와 같은 방식으로 구현되었지만, 이 프로젝트에서 가장 중요했던 부분은 역시 [ FIRE BASE ] 이 스텍 부분이였다.

 

파이어 베이스는 NoSQL을 기반으로한 데이터 베이스로, 구글에서 제공하는 데이터 스토리지 서버다. 단순히 말하면 일반적으로 말하는 서버의 역활을 구글이 무료로 제공해 준다고 생각하면 편하다.

 

 

FIRE BASE에서 프로젝트를 생성하면 이렇게 데이터 베이스를 사용할 수 있게 된다.

 

 

다만 데이터 베이스를 생성하더라도 위와 같이 앱을 설정을 해줘야 내 웹 코드에서 사용이 가능한데

 

1. 앱은 앱플리케이션을 말하는 것이 맞지만, 흔히 아는 스마트폰의 프로그램만을 의미하는 것이 아닌 원래 의미는 응용 소프트웨어를 말한다.

 

2. 그럼 응용 소프트웨어는 뭔가, 컴퓨터의 기본 시스템인 OS를 제외한 모든 프로그램을 말한다. 크롬, 게임, 알약과 같은 모든 프로그램이 이에 포함된다.

 

3. 이러면 웹 앱은 이해가 쉽다. 웹 서버에서 실행되며, 웹 브라우저를 통해 접근할 수 있는 소프트웨어 애플리케이션으로 간단히 말하면 '웹에서 사용되는 프로그램' 이라는 의미다.

 

4. 내 서버(FIRE BASE 서버)에서 웹 앱을 만든 다는 것은, 내 FIRE BASE에서 사용할 프로그램을 만든다는 것이다. (여기서는 서버에 접근할 수 있는 키를 제공하거나 내가 만든 프로그램에 서버를 연결하는 기능을 메인으로 사용했다.)

 

 

실제로 FIRE BASE는 위의 이미지에서 녹색 칠이 되어있는 부분에서 서버 접속에 필요한 키를 제공해 준다.

 

 

 

당연히 프로그램이 서버에 접속하는 입장이니 "나도 니네 서버 키 있어"라고 알려줘야 하기에, 프로그램 상에도 해당 키 부분이 포함되어야 한다.

 

 

 

위의 예시는 엄밀히 말하면 잘못된 예시지만, 위와 같은 느낌으로 클라이언트는 서버에 내가 입장권이 있다고 알려주는 것이다. 입장권이 맞다면 서버는 클라이언트에게 반대로 데이터를 제공해 준다는 것

 

 

이를 이용하여 코드를 구축하면

        $("#postingbtn").click(async function () {
            let name = $('#name').val();
            let pw = $('#pw').val();
            let content = $('#content').val();
            let date = new Date().toISOString();

            // Firestore에서 비밀번호 가져오기
            let passwordDoc = await getDocs(collection(db, "password"));

            // 비밀번호가 포함된 첫 번째 문서 가져오기
            let storedPw = '';
            passwordDoc.forEach(doc => {
                storedPw = doc.data().password; // 비밀번호 가져오기
            });
            console.log('Stored Password:', storedPw);
            // 비밀번호가 '1'인지 확인
            if (pw === storedPw) {
                let doc = {
                    'name': name,
                    'pw': pw,
                    'content': content,
                    'date': date
                };

                await addDoc(collection(db, "postmessage"), doc);
                alert('저장완료!');
                window.location.reload();
            } else {
                alert('비밀번호를 확인해 주세요');
            }
        })

        let docs = await getDocs(collection(db, "postmessage"));
        docs.forEach((doc) => {
            let row = doc.data();

            let name = row['name'];
            let pw = row['pw'];
            let content = row['content'];
            let date = row['date'];

            let temp_html = `
        <div class="post-entry">
            <div class="post-header">
                <span class="post-name">${name}</span>
                <p>${date}</p>
            </div>
            <hr class="post-divider"> 
            <div class="post-footer">
                <small class="post-date"">${content}</small>
            </div>
        </div>`;
            $('#message').append(temp_html);
        });

위와 같은 방식으로 구현할 수 있는데

 

이해가 힘들 수 있으니 특정 코드에 대해 설명해 보자 

await addDoc(collection(db, "postmessage"), doc);

1. 위 코드에서 doc = document 즉, 문서를 말한다.

2. addDoc은 '문서에 더하라' 라는 의미이다.

3. collection(db, "postmessage")는 'postmessage라는 이름의 데이터 베이스'를 의미한다.

4. doc은 내가 선언한 변수로, 현재 수정하고 있는 문서의 내용을 의미한다.

 

즉, 위 코드의 의미는

postmessage라는 이름의 데이터 베이스에 내가 수정한 문서를 서버 문서에 추가해라 라는 의미이다.

 

let docs = await getDocs(collection(db, "postmessage"));

그럼 이 부분은? 

반대로 postmessage라는 이름의 데이터 베이스에서 문서를 가져와서 docs라는 변수에 추가해라 라는 의미가 된다.

 

위 내용을 토대로 서버 문서에는 name, pw, content, date라는 4개의 데이터 들이 하나의 문서로 합쳐진 다음 서버에 문서로서 업로드 되거나 반대로 불러와 진다.

 

 

아래는 실제로 어떤 변화가 생기는 지 설명하려 한다.

<위는 내가 생성한 프로그램>

 

<여기는 FIRE BASE의 데이터 베이스>

 

이렇게 맨 위의 커뮤니티 탭에서 [ 닉네임(name), pw, 내용(content) ]를 저장하면 아래와 같이 서버에 직접적으로 저장되고, 커뮤니티는 다시 서버에서 데이터를 불러와 오른쪽 패널에 서버에 있는 데이터를 띄운다.

 

간단한 서버와 클라이언트 간의 소통을 구현한 것으로, 백엔드라고 부를 수 있는 건지는 모르겠지만, 서버 통신이 가능했다는 것은 분명한 사실이다.

 

요새는 대부분의 기업이 firebase보다는 AWS와 같은 서버를 이용하지만 아직 기초단계인 나에게는 이정도가 딱 적당할 듯 싶다.

 

빨리 AWS나 Oracle, JPA, SPRING 과 같은 백엔드의 메인이라 불리는 기술들을 사용해 볼 수 있었으면 좋겠다.