TIL(addDoc, getDocs, html(circle))

10월 1일 화요일

오늘 계획
웹개발 4,5 주차 수강
SA 제출(미니 프로젝트 역할 분배, 와이어프레임 구상) 및 프로젝트 진행

오전 : 웹개발 4,5 주차 수강

오전에는 fetch api를 사용하여 Firebase에 addDoc으로 데이터를 추가하고 getDocs을 사용하는 방법을 알아보았다.

fetch api
간략하게 살펴보자면 클라이언트와 서버 간에 전송 기능을 제공하는 WEB API이다.

<a href=""> 방식으로 주소를 주어 이동하는 것은 화면 전체를 교체하기에 비효율적이다. 

자바스크립트는 싱글 스레드이며 모든 것을 돌려야하기에 비동기 방식이 등장하였다.

비동기적 자바스크립트 동작을 하는 기술을 통틀어 Ajax라 불렀다.

이때 XMLHttpRequest API를 이용하였는데 매우 번잡하였고 이를 대체하기 위해 Jquery를 통해 구현하다가 fetch API를 통해 통신하는 것이 주요 방식이 되었다.

addDoc

1. input box 안의 데이터를 담아 저장 버튼을 click으로 받아 변수에 받은 데이터를 저장

2. 위 변수를 리스트에 딕셔너리 형태로 변환 후 리스트에 저장

addDoc 문법

 await adddoc(collection(db, 컬렉션명), 리스트명);

3. 위와 같은 방법으로 컬렉션에 저장 후

4. window.location.rerlod으로 데이터 저장후 새로고침을 할 수 있도록 한다.

getDocs

getDocs는 위 사진에서 위에 있는 input box에서 데이터를 받아 밑에 카드를 만드는 형식으로 사용하였다.

await getDocs(collection(db, 컬렉션명));

1. 사용하고 싶은 컬렉션을 지정하여 getDocs로 꺼내온다.

2. 컬렉션에서 사용할 데이터를 변수에 저장하면 된다.

3. 카드를 만들기 위해 temp_html에 카드 양식의 html을 입력하고 이미지, 제목 등에 맞는 변수를 지정한 후 .append를 통해 카드를 생성한다.

오후 : SA제출 및 프로젝트 진행

Circle 만들기

프로젝트를 하다보니 원을 만들 기회가 생겨 찾아보았다.

html

<div class = "circle"></div> 

css

.circle{ 
	width: 400px;
    height : 400px;
    border-radius : 50%; 
}

이상이다.