[미니 프로젝트/#3] 팀 소개 페이지 제작

<생각>

-멤버카드 등록을 눌러서 입력했을 시 firebase에 데이터가 입력되게 하기 위해

    +멤버 등록을 입력할 수 있게 하는 화면 구성을 위해

-------> javascript, html, css를 사용하여 코드 작성 & 부트스트랩을 활용해 버튼이나 입력칸 모양 참고

 

-수정하기 버튼을 누르면 등록할 때 적은 내용이 조회되고, 수정된 데이터가 입력되도록 하기

------->firebase에서 등록된 데이터를 불러오기 updateDoc 사용

 

<오늘 작성한 코드> -화면 구성은 했으니 이제 기능 구현을 해봤다.

 

-firebase에서 데이터를 등록하고 불러오기 위해서 가져와야하는 값들

-script type = "module" : 다른 모듈에 접근하기 위해서 스크립트 타입을 모듈로 지정해야함

-import : 모듈 가져오기

<script type="module">
import {initalizeApp} from 주소;
import {getFirestore} from 주소;
import {
getStorage, uploadBytes, getMetadata, getDownloadURL, collection, addDoc, updateDoc, getDocs, getDoc, dox, deleteDoc, query, where
} from 주소;

const firebaseConfig = { firebase 개인 코드};

 

-firebase에 데이터를 내보내고, firestore 데이터베이스를 가져오기

-const 키워드로 선언

-async function 비동기 함수사용

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const storage = getStorage(app, 가져올 주소);

$("#image")   ----id가 "image"인 요소를 선택한다.

                   .val(data.image);   ----선택된 요소의 data 속성을 image 값으로 반환한다.

                   .attr ---요소의. 현재 상태의 원래 값을 제공

location.herf 를 활용해 글을 다 쓰고 등록하기 버튼을 누르거나 닫기버튼을 누르면 홈화면으로 이동하도록 구현

updateDoc을 활용해

-패스워드 부분은 다른 팀원이 구현

---

<알게 된 것>

*외부로 데이터를 보내고 가져오기 위해서는 script를 module로 지정해야한다.

*요소를 일일히 선택해서 원하는 속성 값으로 반환해줘야한다.

 

<실수& 보완>

팀원이 코드를 합치는 과정에서 import 부분에 updateDoc을 빠뜨렸는데 발견하지 못해서 다른 팀원분이 찾아서 보완해줬음.

내가 적은 코드인데도 어떤부분이 문젠지 발견 못한 부분이 제대로 이해를 하고 코드를 적은게 아니구나 라는 생각을 가지게 되어서 코드를 하나하나 다시 보면서 공부를 다시 해보니 조금 더 확실하게 알게된 것 같다.