쑥쑥자라기🌱

1)app.js에서 firestore 데이터 사용하기 (1) 데이터 전체 읽어오기 collection()으로 찾은 다음, getDocs()로 콜렉션 내의 데이터를 가져온다. 그리고 forEach문으로 내용을 확인할 수 있다. (배열이 아니기 때문) import { db } from "./firebase"; import { collection, getDoc, getDocs } from "firebase/firestore"; ... React.useEffect(async() => { const query = await getDocs(collection(db, 'bucket')); console.log(query); query.forEach((doc) => { console.log(doc.id, doc.dat..

1) 파이어베이스 패키지 설치 npm install firebase 2) config 가져오기 (1) src 폴더 하위에 firebase.js 파일을 만들어준다. //firebase.js import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { // firebase 설정과 관련된 개인 정보 }; // firebaseConfig 정보로 firebase 시작 initializeApp(firebaseConfig); // firebase의 firestore 인스턴스를 변수에 저장 const db = getFirestore(); // 필요한 곳에서 사용할..

1) 웹의 동작방식 웹은 요청과 응답으로 굴러간다. 클라이언트가 서버에게 요청, 서버가 클라이언트에게 응답한다. 2) 서버가 하는 일 서버는 데이터도 관리, 분산처리, 웹 어플리케이션 등 많은 일을 하고 이를 관리해줘야 한다. 3) 서버리스란 서버리스는 서버가 없다가 아니라 서버를 신경쓸 필요가 없다라는 의미이다. 이미 누군가가 구축해둔 서버의 일부분을 빌려서 쓸 수 있다. 필요한 서버를 필요한만큼만 빌려 쓰면 되기 때문에 인프라를 구축하거나 서버 스펙을 고민할 필요가 없다는 의미이다. 4) BaaS가 빌려오는 것 BaaS는 Backed as a Service의 약자이다. 흔히 백엔드 하면 떠올리는 것들을 빌려오는 것. 파이어베이스를 예를들면 데이터 베이스, 소셜 서비스 연동(일종의 소셜 로그인), 파일..

1) Firestore 설정하기 firebase authentication은 우리가 원하는 모든 회원 정보를 담을 수 없다. firestore를 써서 집주소를 저장해보자. 파이어베이스 대시보드 → Firestore로 이동 shared/firebase.js 에서 firestore 설정 import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { // 인증 정보! }; const app = initializeApp(firebaseConfig); export const auth = ..

1. 스크립트 등록 $ npm set-script 스크립트이름 "명령어" 2. 스크립트 실행 $ npm run 스크립트이름 등록한 스크립트는 package.json에서 확인할 수 있다.

1) Fetch API Fetch API는 서버와 통신하기 위해 사용하는 XMLHttpRequest의 대체제이다. XMLHttpRequest보다 훨씬 사용법이 간단하고 서비스 워커 등 다른 기술을 쓸 때 손쉽게 엮어 사용할 수 있다. fetch()는 구식 브라우저에서는 돌아가지 않는다. fetch() fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스는 반환된다. 이 프라미스를 사용해서 fetch()를 호출한다. // url – 접근하고자 하는 URL // options – 선택 매개변수, method나 header 등이 여기에 들어간다. let promise = fetch(url, [options]) fetch() 사용법 get const callSomething = async () =..

1) 서버와 클라이언트 동작 방식 서버와 클라이언 클라이언트는 요청을하고 서버는 응답을 한다. 서버와 클라이언트는 REST API를 통해 소통한다. 클라이언트는 REST API를 호출하고 서버는 응답을 보내준다. 2)XMLHTTPRequest XMLHttpRequest 객체는 서버와 통신하기 위해 사용하는 객체이다. 달리 말하면 브라우저는 XMLHttpRequest를 이용해서 Ajax 요청을 생성하고 전송한다. 이때, 서버가 브라우저의 요청에 대한 어떤 응답을 돌려주면 같은 XMLHttpRequest 객체가 그 결과를 처리한다. XML뿐만 아니라 JSON, text 등 모든 종류의 데이터를 받아오는데 사용할 수 있다. HTTP 이외의 프로토콜도 지원한다.(file,ftp) XMLHTTPRequest 객체..

Mock API를 만들고 테스트하기 위해서는 POST MAN이라는 프로그램이 필요하다. https://www.postman.com/downloads/ [포스트맨 설치 링크] 1) Rest API란? REpresentational State Transfer API의 약어이다. 소프트웨어 개발 아키텍쳐의 한 형태로, 클라이언트와 서버 사이 통신 방식 중 하나이다. RESTful은 REST API를 제공하는 웹서비스를 말한다. REST 구성 자원: URI 행위: Http method(GET, POST, PUT, DELETE) 표현: JSON, XML, ...(대부분의 경우 JSON을 주고 받는다.) REST 특징 클라이언트 - 서버 구조 무상태성 캐시 처리 기능 자체 표현 구조 계층화 인터페이스 일관성 2) ..