분류 전체보기94 [트위터 클론 코딩] #7. File Upload ~4.4까지의 강의 4강 나중에 다시 들을 것 이제 버킷에 업로드해보자. 사진을 업로드할건데 사진이 있으면 url을 받아 그걸 nweet에 추가하는 것이다. 사진이 있으면 사진을 올리고 url을 받아 nweet에 넣는다. 파일 url을 넣는 것을 한다. 그 전에 fbase.js로 가서, export const storageService = firebase.storage(); Home.js import { v4 as uuidv4 } from "uuid"; import { dbService, storageService } from "fbase"; const onSubmit = async (event) => { event.preventDefault(); const fileRef = storageService... 2022. 4. 10. [트위터 클론 코딩] #6. Preview Images ~4.1까지의 강의 firebase storage를 생성한다. 생성이라고 거창한 것은 없고, 그냥 클릭하면 됨 사진을 첨부해야 하니까 방법을 바꿔보도록 하자 Home.js const onChange = (event) => { const { target: { value }, } = event; setNweet(value); }; const onFileChange = (event) => { const { target: { files }, } = event; const theFile = files[0]; const reader = new FileReader(); reader.onloadend = (finishedEvent) => { console.log(finishedEvent); }; reader.readA.. 2022. 4. 3. [트위터 클론 코딩] #5. Nweeting-Update, Delete ~3.6까지의 강의 tweet을 수정하고 지우는 것에 대해서 알아보자! 우리가 실행하는 이 작업들이 커지기 때문에 새로운 component로 만들어 보자. 우리가 하는 작업들을 빠르게 할 수 있다. 그러기 전, 몇 가지를 보내주어야 한다. 수정하고 지우기 위해서는, 누가 작성했는 지 알아야 한다. 전에 creatorId를 만들었고, Home이 userObj를 가지기 때문에, Home에서 보내주어야 한다. Home.js {nweets.map((nweet) => ( ))} isOwner은 주인인지 알아보는 것이다. nweet의 creatorId와 userObj의 uid가 같은 경우 주인이라고 판단 하는 것이다! Nweet.js import React from "react"; const Nweet = ({ n.. 2022. 4. 2. [트위터 클론 코딩] #4. Nweeting-Create, Read ~3.3까지의 강의 로그인 하면 나오는 Home에서 tweet용으로 form을 하나 만들것이다. Home.js import React,{useState} from "react"; const Home = () => { const [nweet, setNweet] = useState(""); const onSubmit = (event) => { event.preventDefault(); }; const onChange = (event) => { const { target: { value }, } = event; setNweet(value); }; return ( ); }; export default Home; 앞에서 설명했던 거랑 비슷한 코드가 너무 많아서, 딱히 설명할 것은 없는 듯 이제 Firestore .. 2022. 4. 1. [트위터 클론 코딩] #3. LogIn/Out-2 ~2.6까지의 강의 파이어베이스 공식문서에 가면 많은 것이 있는데, 우리는 Emailauthprovier을 보아야한다. 여기에 가보면, email과 password로 사용자를 생성하는 것과, 인증하는 것에 대해서 나와있다. Auth.js import { authService } from 'fbase'; import React,{useState} from 'react'; const Auth = () => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [newAccount, setNewAccount] = useState(true); const onChange = (event) => { c.. 2022. 3. 31. [트위터 클론 코딩] #2. LogIn/Out-1 ~2.2까지의 강의 AppRouter를 하나의 용도, 즉 Routes들만 보여주는 것으로만 사용해야 한다. 그래서 App.js에다가 useState를 쓴다음에 분리시켜서 쓸 수 있게 한다. 그 전에, fbase에 무엇인가를 추가해보자. export const authService = firebase.auth(); 먼저 authService를 사용하고 싶다면 import해야하는데, 우리는 이미 import했다. 그리고, 위의 코드를 export 시켜서 다른 곳에서도 authService를 사용할 수 있도록 한다. jsconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } jsconfig를 만들면, 덕분에 src로 시작되는 것을.. 2022. 3. 31. 이전 1 ··· 9 10 11 12 13 14 15 16 다음
