[TIL] 내배캠 4일차

4일차에는 웹개발 강의 4주차에서 배운 내용을 정리했다.

FrontEnd
눈에 보이는 부분이며 클라이언트쪽을 다룬다.
(Html, CSS, JavaScript)

BackEnd
눈에 보이지 않는 부분이며 서버쪽을 다룬다.
(Server, API, DB)

Firebase란?

파이어베이스(Firebase)는 구글(Google)이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼이다. 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있게 해준다.

데이터베이스란?

잘 찾으려고 데이터를 저장하고 여러사람들이 관리하는 데이터의 모음이다.

데이터 베이스에 종류는 다음 두가지로 나뉜다.

관계형 데이터 베이스(SQL)
정리된 정보를 다룰 때 사용한다. (은행, 대기업)

비관계형 데이터 베이스(NoSQL)
복잡하거나 유연한 정보를 다룰 때 사용한다.(스타트업)

각각의 데이터베이스 유형은 다른 용도와 장단점을 가지고 있기 때문에 데이터의 구조와 요구 사항에 맞춰서 적절한 데이터베이스 유형을 선택하는 것이 중요하다.

FireStore란?

구글의 클라우드(cloud)기반 NoSQL 데이터베이스이며, 데이터를 저장하고 관리할 수 있는 기능을 제공한다.

• 컬렉션(Collection): 여러 개의 문서들은 특정한 주제 또는 유형으로 그룹화되어 있다. 예를 들어, “albums"이라는 컬렉션 안에는 문서들이 저장될 수 있다.
• 문서(Document): 문서는 여러 개의 필드(Field)로 구성되어 있다. 필드는 문서에 저장된 데이터를 나타낸다.
• 필드(Field): 문서 안에 있는 데이터의 작은 부분이다. 각 필드는 값으로 구성된다. 예를 들어, 사용자 문서의 필드로는 "내용", "날짜", "이미지주소", “제목” 등이다.

자바스크립트로 firebase 데이터 추가하기

$("#id").click(async function () {
    let doc = {};
    await addDoc(collection(db, "콜렉션이름"), doc);
})

자바스크립트로 firebase 데이터 읽기

let docs = await getDocs(collection(db, "콜렉션이름"));
docs.forEach((doc) => {
    let row = doc.data();
    console.log(row);
}); 

4일차 공부를 마치며...

이번 시간에는 데이터베이스를 통해 데이터를 가져올 때 간단하게 데이터를 읽고 추가하는 경우에 적합한 firebase를 배울 수 있었다. 리액트로 쓸때는 어려웠는데 제이쿼리를 통해 자바스크립트로 활용해 보니까 비교적 쉽고 재밌게 느껴졌다.