Web Service/React34 [트위터 클론 코딩] #8. Edit ~5.2까지의 강의 이번 강의에서는 프로필 설정하는 것을 위주로 진행하고자 한다. 프로필에서 로그아웃과 프로필 업데이트, 내가 쓴 글확인을 하고자 한다. 많은게 있지만 로그아웃은 끝났고, 이제 프로필을 업데이트 하는 것을 해보자. 여기에서는 세팅을 해보도록 하자. 데이터베이스의 스냅샷을 가지고 오는 것이다. EditProfile.js를 삭제하고, Profile.js에 모든 것을 넣도록 하자. Profile.js import React,{useEffect} from "react"; import { authService, dbService } from "fbase"; import { useHistory } from "react-router-dom"; export default ({userObj}) => { .. 2022. 5. 6. [트위터 클론 코딩] #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. 이전 1 2 3 4 5 6 다음
