쑥쑥자라기🌱

State : 컴포넌트의 상태 useState는 컴포넌트의 상태를 간편하게 생성하고 업데이트 시킬 수 있는 도구를 제공해 준다, const [state,setState]= useState(초기값) state의 생성과 동시에 가져야 할 초기 값을 useState의 인자로 넣어주면 state와 setState라는 두 가지 요소를 배열 형태로 리턴해준다. 현재 상태 값은 state라는 변수에 들어있고 state를 변경시켜주고 싶을 때에는 setState를 이용해서 간편하게 변경시켜줄 수 있다. state와 setState의 이름은 변경할 수 있다. setState 함수를 사용해서 state를 변경하면 해당 컴포넌트는 화면에 다시 렌더링이 된다. state를 변경할 때 새로 변경될 state 값이 이전 stat..

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 객체..