[2025.04.10] 방명록 만들기 중
요즘 계속 기본 웹페이지 만들기를 하고 있다.
간단하게 팀 소개 페이지를 만드는데 우리팀은 Firebase를 연동하여 방명록 작성하는 기능을 만들자고 해서
해당 부분을 내가 맡게 되었다.
나는 계속 백엔드를 맡아왔기때문에
메인페이지나 소개페이지 등 디자인이 좀 더 중요한 부분보단 방명록 쪽이 좋긴하다
인풋 박스 만들어서 넣으면 되니깐!
나는 이번 과제가 웹페이지를 공부하는 파트인 줄 알았는데
우리 팀원들이 제일 어려워하는 부분은 git으로 협업하는 부분이었다.
난 git을 많이 써봤기때문에 별로 어렵지 않았지만 다른 팀원들은 다들 개발을 처음 하시는 분들인 것 같았다.
그래서 월요일엔 웹페이지 만들때 꿀팁같은걸 공유하고
화요일엔 git 사용 방법을 알려줬다.
제대로 설명한건진 모르겠네 ㅎㅎ;;;
그리고 사실 해당 프로젝트는 나혼자 하면 금방 끝나지만 다같이 연습해보고 하는게 의미가 있는 부분이라고 생각해서
그냥 사고났을때 같이 해결하는 방식으로 진행했다.
어떤 마음씨 착하신 분이 다른 분들 힘들까봐 미리 틀을 만들어 두셨는데
사실 초보자한테는 아무것도 없는 페이지에서 시작하는게 더 쉽다는 것....
우리는 BootStrap을 사용해서 만들었고 그에 관련된 사이즈 조정하는 class라던데 덮어씌우기 등등
처음 보는 사람 입장에선 코드가 길어지면 당연히 어려울 수 밖에 없다.
그래서 구역을 나눠서 파일을 따로 분리하여 진행
그래서 만들어진게
이런 느낌의 방명록이다.
근데 한가지 간과한게 방명록 container에 배경을 줬더니 방명록이 하나도 없을때 저런식으로 줄이 그어져있다.
그래서 내용이 없을 땐 <작성된 방명록이 없습니다> 라는 문구를 띄우고 싶어서
Firebase 요청을 보냈을 때 데이터가 오지않으면 저 문구를 보여주는 코드를 집어넣었다.
하지만 결과는 아무일도 발생하지 않았다.....
그래서 querySnapshot 값을 console에 찍어봤는데
github에 apikey를 올리면 안되기때문에 잠깐 안넣어 놨더니 연결이 안돼서
Firebase인스턴스를 초기화 하는 부분에서부터 오류가 나고 있었던 것
그래서 어떻게 할까 생각을 해보다가 해당 오류도 처리를 해주기로 했다.
try catch 구문으로 감싸 초기화가 되지 않으면 데이터베이스 연결에 실패했다는 문구를 띄울 것이다.
이렇게 문구를 작성
하고 봤더니 margin값이 1rem설정되어있어서 다시 css 만지러 출동
근데 나는 설정한 적이 없는데 왜 margin bottom이 있는건지 봤는데
bootstrap은 <p>태그 자체에 mb 값이 있다고 한다.
그래서 m-0 class값을 설정하여 해결
-> bootstrap은 tailwind마냥 class에 부트스트랩이 설정한 문구를 넣어주면 스타일을 조정할 수 있다.
이제 맨 처음으로 돌아가서 원래 하려고 했던 데이터가 없을 때 잘 나오는지 확인해보자.
얘도 성공!!
그리고 이제 끝난 줄 알았는데 방명록을 최신순으로 정렬해달라는 요청이 들어와서
최신순으로 나열하는 코드를 추가!
Firebase에 query와 orderby 메소드를 import한 다음
이 코드를 추가해줬다
그리고 결과는 성공!
나는 솔직히 웹페이지를 만들어보기도 했고
백엔드를 공부하다 와서 css를 만지는 것보다 firebase 연동이라던지 그런 부분 하는게 좀 더 편할 줄 알았지만
막 썩 쉽진 않았다.
외부랑 연결을 한다는 것은 많은 오류가 생길 수 밖에 없는 것 같다...
백엔드는 그래도 연동하고 코드 마음대로 짜면 끝이었는데
연동 해도 그 뒤엔 css가 문제되고... 프론트가 확실히 일이 좀 더 많은 것 같기도...
그래도 프론트가 눈으로 딱 보이는게 있다보니 재미있는 것은 맞는 것 같다.