Joon's Space

Query로 원하는 데이터 가져오기 query문을 사용하면 원하는 조건의 데이터를 가져올 수 있는데, firebase에서는 query() 함수를 사용한다. 이때, where() 함수를 사용하여 안에 조건을 작성해 주면 된다. userObj.uid 와 일치하는 정보를 갖고싶으면 다음과 같이 입력한다. const q = query(collection(dbService, "nweets"), where("creatorId", "==", userObj.uid)); 필드명이 "creatorId" 이고 값이 userObj.uid와 일치하면 query에 반환한다. query함수 안에 orderBy를 다음과 같이 작성하면 순서대로 반환하겠지만, firebase에서는 index를 추가하여야 하는데, const q = qu..

Form 게시글을 입력하고 submit 할 Form을 생성한다. // Home.js const Home = () => { const [nweet, setNweet] = useState(""); const onSubmit = (event) => { event.preventDefault(); }; const onChange = (event) => { const { target: {value}, } = event; setNweet(value); } return ( ); }; export default Home 게시글을 입력하고, 제출 버튼을 클릭하여 앞서 입력해서 제출한 정보글들을 저장할 공간이 필요한데, 이때 firebase의 database를 사용한다. Cloud Firestore firebase의 Clo..

※ nomadcoder twitter clone coding 강의 참고 React + Firebase setup - React 프로젝트 생성 npx create-react-app 프로젝트명 - firebase 모듈 설치 npm install firebase - Firebase 프로젝트 생성 src/firebase.js을 생성하여 홈페이지에서 생성된 firebaseConfig를 저장하고 initiallizeApp으로 실행 // src/firebase.js import * as firebase from "firebase/app"; const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AU..

로그인 페이지 디자인 (TailwindCSS) // login.tsx import React from "react"; export const Login = () => { return Log In Log In ; }; 사용한 class들 flex : flexbox - items-center : 세로축에서 위치를 가운데로 위치하게 함 - justify-center : 가로축에서 위치를 가운데로 위치하게 함 bg-gray-800 : 배경색을 gray 800 단계로 설정 (100 ~ 900 진하기) text-gray-800 : 글자색을 gray 800 단계로 설정 text-center : 글자를 가운데로 배치 mt-5 : margin top을 5로 설정 (mt : top, mb: bottom, mr: right..

Local State ? local state 는 local storage ( HTML5에서 브라우저에 추가된 저장소로, 브라우저가 종료되어도 그대로 남아있음. ) 에 state 값을 저장해서 사용 할 수 있는 것. LogIn & LogOut Authentication // Apollo.ts import { ApolloClient, InMemoryCache } from "@apollo/client"; export const client = new ApolloClient({ uri: 'http://localhost:4000/graphql', cache: new InMemoryCache({ typePolicies: { Query: { fields: { isLoggedIn: { read() { return f..

Local State ? local state 는 local storage ( HTML5에서 브라우저에 추가된 저장소로, 브라우저가 종료되어도 그대로 남아있음. ) 에 state 값을 저장해서 사용 할 수 있는 것. LogIn & LogOut Authentication // Apollo.ts import { ApolloClient, InMemoryCache } from "@apollo/client"; export const client = new ApolloClient({ uri: 'http://localhost:4000/graphql', cache: new InMemoryCache({ typePolicies: { Query: { fields: { isLoggedIn: { read() { return f..

패키지 설치 npx create-react-app nuber-eats-frontend --template=typescript create react app 은 template을 가지고 있는데, typescript를 사용하기 때문에 위와 같이 작성해 준다. ※ App.test.tsx 파일의 "cannot use JSX" 오류는 tsconfig.json 파일에서 "jsx" 부분을 "react-jsx" -> "react"로 수정해준다. (버전이 맞지 않아서 버그가 발생했던 것.) TailwindCSS TailwindCSS는 부트스트랩과 같이 CSS 프레임 워크이다. TailwindCSS는 utility-first CSS framework라고 원문에서 설명되어 있는데, tailwind는 엄청 긴 css file..

React Hooks 란? react의 state machine에 연결하는 기본적인 방법. Hooks를 사용하면 기존의 class 방식을 더 이상 사용하지 않고, 함수형 프로그래밍 방식을 사용한다. useState // App.js import { useState } from "react"; import "./styles.css"; export default function App() { const [item, setItem] = useState(1); // state 초기값을 1로 설정해줌. const incrementItem = () => setItem(item + 1); const decrementItem = () => setItem(item - 1); return ( Hello {item} Sta..