TeamPage 프로젝트 하면서 다시 한번 알게 된 점 - 3

오늘은 저번시간에 말한 것처럼 데이터베이스에 값을 넣고 빼는 기능을 넣어봤습니다.

데이터 값을 빼고 넣던 와중에 지금까지 부트스트랩으로 컴포넌트를 가져와서 크기를 조절하고 부모 자식 크기 생각 안하고 그때마다 값을 맞추던 것에 대한 반동을 오늘 받았습니다.

일단 당장에는 문제가 없겠지만 중요작업이었다면 처음부터 다시 하나하나 구현을 해야하는 정도였습니다.

 

오늘 첫번째로 데이터베이스에 데이터를 저장하는 방식을 다시 한번 복기하기 위해서 예전 웹개발 초급 강의를 다시 확인했습니다.

파이어베이스에 들어가서 새로운 프로젝트를 만들고 SDK를 복사해서 넣어줘야하는데 이때 까지만해도 import가 뭐에 쓰이는 거였는지 또한 const firebaseConfig = { } 이 부분에 대해서 이해를 하지 못하고 썼습니다.

하지만 import는 말그대로 내가 사용하고 싶은 기능을을 불러오는 것을 뜻하고 const firebaseConfig는 너무 크게 생각하지 않으면 enum처럼 정해져있는 키값들이 존재하는데 그것을 파이어베이스에서 만들면 주는 것 이었습니다.

우리는 여기서 파이어베이스에서 앱을 추가하면 import하는 것이 늘어나고 거기서 필요한 데이터를 뽑아 올 수 있습니다.

즉, 데이터베이스를 내가 만들지 않고 그냥 편하게 꺼내오는 기능을 주는 것 뿐이기 때문에 이제 데이터를 어떻게 저장하는지가 문제였습니다.

 

두번째로 파이어베이스에 데이터를 넣는 방식은 await addDoc(collection(db, "Info"), doc); 이부분인데 여기서 db는 나의 데이터베이스 주소라고 생각하면 편하고 Info는 내가 저장할 데이터 이름 불러오기 할때 또는 파이어베이스에서 어떻게 저장되어있는지 보기 편한 명함이라 생각하면 됩니다.

마지막으로 doc는 내가 넣고 싶은 정보들을 넣어두는 것 입니다.

여러 변수들을 저장해둔 곳이라 생각하면 편합니다.

 

세번째로는 데이터베이스에 데이터를 저장했으니 빼내올 줄 알아야겠죠? 데이터를 뽑아오기 위한 변수를 적고 let docs = await getDocs(collection(db, "Info")); 이렇게 저장되어있는 데이터를 뽑아오면 됩니다.

여기서 데이터를 뽑아오는 방식은 forEach문을 docs로 돌려서 모든 값을 순회해서 내가 원하는 부분을 가져오는 겁니다.

docs.forEach((doc) => { let row = doc.data(); let image = row['image']; .... ~${image} ... };

여기서 let row = doc.data();는 docs에 저장되어있는 모든 값들을 정렬해서 넣어주는 것입니다.

row라고 한것은 가로줄로 가져온다는 것을 뜻하기 위해 어떤 id값에 어떤 value가 들어가 있는지 쉽게 알기 위해서 입니다.

그럼 여기서 이제 실제 데이터를 불러왔으면 웹에 내가 넣은 데이터에 의한 값을 나오게 하는 방법은 틀을 만들어서 id이든 class이든 그 밑에다가 append(); 하는 것 입니다.

$('#inputcard').append(temp_html); 이런식으로 내가 미리 만들어 둔 것에 대해서 어디에 붙일지를 지정해주면 자동으로 붙여줍니다.

이걸 이용해서 내가 다른 html에서 데이터베이스를 넣었을 때 또 다른 html에 자동으로 값이 들어가 원하는 것을 만들어주는 것 입니다.

 

마지막으로 로그인 회원가입을 하고있는데 일단은 아주 간단하게 파이어베이스에서 Authentication을 이용해서 이메일과 비밀번호를 통해서 로그인을 진행하는 방식을 알아봤습니다.

순서대로 적어보면 틀을 만들어서 회원가입 또는 로그인할 틀을 만들고

파이어베이스 SDK를 불러옵니다.

그다음 회원가입 버튼을 눌렀을때 이메일과 패스워드를 받는 코드를 파이어베이스 Authentication->도움말 ?를 누르고 -> 개발자 문서 빌드의 인증을 눌러줍니다. -> 아무것도 모르기 때문에 시작하는 방법 알아보기를 누릅니다. -> 밑으로 내려보면 이메일 주소 및 비밀번호 로그인 웹 칸이 보입니다 눌러줍니다. -> https://firebase.google.com/docs/auth/web/password-auth?authuser=0&hl=ko 이런곳에 와지는고 -> 비밀번호 기반 계정 만들기에 있는 코드를 가져와서 내가 원하는 대로 바꿔 준 후 -> 이메일 주소화 비밀번호로 사용자 로그인 하는 코드도 가져와서 미리 틀을 만들어 둔 곳의 id들을 불러와서 데이터베이스에 넣어주고 그 데이터와 같은지를 확인하는 것 입니다.

여기서 가장 많이 쓰인 document.getElementById는 Id를 통해서 이벤트를 콜백형식으로 받아가지고 눌렀을 때 어떤 것이 실행할지 만들어 주는 것입니다.

이렇게 일단 하는 방법만 알게 되었습니다.

 

내일은 로그인 회원가입을 해가지고 화면이 바뀌게 한 후 깃허브에서 웹으로서 작동하게 하는 것 까지가 목표입니다.