24.7.17 (웹페이지 - Firebase)

오늘은 어제의 메인페이지에 이어서 개인페이지 작성

메인페이지는 html,css로 완성했지만 개인페이지는 javascript, firebase 를 추가로 사용하였다.

비록 홈페이지 작성이지만, 거기에서도 백엔드가 개입해야할 요인들을 많지 않지만

조금 사용하였다.

이번 페이지에서는 방명록을 추가하여 Firebase에 방명록에 대한 데이터들을 수집하고 가져오는 작업을 하였다.

Firebase는 NoSQL로 데이터들이 정리되어 있지 않은, 하지만 수정이 가능한 Query Language 이다.

 

---

 

일단 Firebase를 Vscode에서 사용하려면 SDK 라이브러리, Firebaseconfig를 코드로 가져오고,

인스턴스 초기화를 필수로 시켜줘야한다.+ <script type="module"> 까지.

스크립트를 모듈이라는 타입으로 사용하겠다라는 것.

 

개인페이지 만들기 

1. 개인페이지에 넣어야 할 요소들 생각하기

(얼굴사진, 자기소개 등 각 종 Comment, 방명록, 메인페이지로 넘어갈 버튼)

2. html 코드 짜기 일단 사진, Comment 먼저 코드로 짠다.

3. 방명록에 들어갈 요소와 방명록을 짠다.

(bootstrap의 card 활용)

4. 동적으로 데이터를  Firebase에 넣어주기 위해 방명록에 Input 칸 추가 및 데이터를 넘길 수 있도록 코드를 짠다.

5. 받은 데이터를 다시 웹페이지로 넘겨서 방명록 댓글을 단 카드를 아래에 보여주게 코드를 짠다.

6. 이 과정들을 하면서 중간중간에 CSS로 규격과 틀을 조금씩 맞춰준다.

 

---

 

$(document).ready(async function () {

            $("#postingbtn").click(async function () {

                let name = $('#name').val();

                let star = $('#star').val();

                let comment = $('#comment').val();

                let doc = {

                    'name': name,

                    'star': star,

                    'comment': comment

                };

                await addDoc(collection(db, "profile"), doc); // profile 라는 컬렉션이름으로 doc에 대한 db 생성

                alert('저장 완료!'); // 클릭하게 되면 저장  완료

                window.location.reload(); // 클릭 후 저장 문구가 뜨면 윈도우 재로딩

            })

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

            docs.forEach((doc, index) => {

                let row = doc.data();

                let name = row['name'];

                let star = row['star'];                 // 변수 형태 : object

                let comment = row['comment'];

 

Firebase에 DB 생성 및 웹사이트로 가져오게 하는 코드

  ● 여기서 웹사이트를 띄워서 받아오는 로그를 보니 형태가 Object다. 추가적으로 Firebase로 넘겨줄땐 변수형태가 Val 이 지만 받아올땐 object 형태로 온다. 왠지는 모르겠다.

 

 let temp_html = `

                <div class="mycard col-md-6">

                    <div class="card border-dark mb-3">

                        <div class="card-header">${name}</div>

                        <div class="card-body">

                            <h5 class="card-title">${star}</h5>

                            <p class="card-text">${comment}</p>

                        </div>

                    </div>

                </div>`;

               

                // 처음 입력 시에는 한 줄에 한 개의 카드 출력

                if (index === 0) {

                    $('#mycard-container').html(temp_html);

                } else {

                    // 이후 입력부터는 한 줄에 두 개의 카드 출력

                    if (index % 2 === 0) {

                        $('#mycard-container').append('<div class="w-100 d-none d-md-block"></div>'); // 줄 바꿈 추가

                    }

                    $('#mycard-container').append(temp_html);

                }

            });

        });

카드 출력 코드

● 나는 카드를 출력할때 가로로 2개씩 출력하고 싶은데 자꾸 세로로 출력이 돼서 아무꺼나 다 바꿔봐도 안됨. 그래서 그 구문의 틀을 더 자세히 보니 temp_html 이라는 변수가 카드를 출력하는 값이니까, 그 밑에 조건을 줘야겠다라고 생각했다.

 조건문을 넣어주니 바로 원하는대로 출력이 되었다.

 

---

오늘은 백엔드 쪽도 같이 다뤄봤는데, 드디어 약 4년만에 백엔드 개발에 도움되는 일을 했다.

내일 할 일 개인홈페이지 더 꾸미기

메인페이지로 연동하는 코드 짜기

프로젝트 발표 준비 + a

매일 12시간씩 해서 피곤하긴 하지만, 그래도 하루하루가 뿌듯하다.

빨리 성장해서 성공한 개발자가 되고싶지만, 모든 것이든 만족할만한 성과를 내기 위해서는 쉽지가 않다.

앞으로도 1%씩 성장하는 하루하루가 되길.