쑥쑥자라기🌱

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) Firebase Authentication 파이어베이스에서 제공하는 인증 기능 구글 로그인, 페이스북 로그인 같은 소셜 로그인 기능, 파이어베이스에 직접 사용자를 추가(회원가입), 관리하는 기능을 제공한다. 2) Authentication 설정하기 파이어베이스 대시보드 → Authentication에서 이메일/비밀번호 항목을 사용설정 해준다. 파이어베이스 설치하기 npm install firebase shared/firebase.js에서 auth 설정 import firebase from "firebase/app"; import "firebase/auth"; const firebaseConfig = { // 인증정보! }; firebase.initializeApp(firebaseConfig); co..

Http는 한번 요청을 하고 응답을 받으면 연결이 해제된다. 즉, access_token을 클라이언트 어딘가에 저장을 해두어야 한다. 1) 클라이언트 저장소 개발자도구 → Application 탭 → 좌측 Storage 확인 2) 쿠키 클라이언트 로컬에 저장되는 key: value 형태의 저장소이다. 약 4KB 정도 저장할 수 있다. 쿠키 만들기 쿠키는 브라우저에서 개발자 도구를 열고 꼭 어떤 사이트로 들어 간 뒤 사용할 수 있다. // key는 MY_COOKIE, value는 here, document.cookie = "MY_COOKIE=here;"; 쿠키 가져오기 console.log(document.cookie); 쿠키 삭제 쿠키를 삭제할 때는 만료일을 이전으로 돌려서 지우는 방법을 많이 사용한다...

1) 토큰 기반 인증이란? 세션 기반 인증 예전에는 사용자의 로그인 상태를 서버가 전부 가지고 있었다. 서버의 세션에 사용자 정보를 넣고 이 사람이 로그인을 했다 안했다를 전부 기록하고 기억했다. 이 세션은 서버의 메모리나 데이터베이스 등에 저장해두는데, 로그인한 사용자가 많아지면 서버에 부하가 많이온다. 그렇다고 서버를 여러개 놓자니 관리가 까다루워지기 때문에 최근에는 토큰 기반 인증 방법을 많이 사용한다. 토큰 기반 인증 토큰 기반 인증은 사용자가 맞다는 정보를 가진 토큰으로 서로 사용자임을 확인하는 프로토콜이다. 공연의 입장권 같은 거라고 생각하면 된다. 2) OAuth2.0 외부서비스의 인증 및 권한부여를 관리하는 프레임워크이다. → Open Authentication, Open Authoriza..

1) http 요청은 유지가 될까? HTTP 프로토콜 클라이언트는 요청을 하고 서버는 응답을 한다. HTTP는 한 번 요청을 보내고 응답을 받으면 그 요청은 거기서 끝난다.(비연결성) 요청을 주면 응답을 준다. 클라이언트는 요청만, 서버는 응답만 가능하다. 2) 바뀐 데이터를 받아오기 위한 기법, 폴링 브라우저가 일정 주기를 두고 요청을 보내는 것 주기적으로 요청을 보내고 그에 따른 응답을 받아온다. 실시간으로 바뀐 데이터를 받아올 수 없다. 3) 짧은 폴링이 부하를 일으킨다면, 롱 폴링 요청을 보내고 응답을 지연시키는 것 요청을 보내고 서버가 그 응답을 바로 보내지 않는 것 데이터의 변동이 있다면 바로 응답을 보낸다. 데이터 변동이 없다면 서버는 응답을 일정 시간동안 지연한다.