Web Service42 [ZOOM 클론 코딩] #1. Set up ~0.4까지의 강의 니꼬쌤과 이번에는 ZOOM 클론 코딩을 해보고자 한다! 이 강의를 듣기전에, ExpressJS, app.get(), Pug, (req, res)=> 를 알고 오라고 하셨지만... (이 부분은 백엔드로 사용한다고 하심! 프론트는 그냥 바닐라JS로 사용하신다고 합니다.) 우선은 그냥 들어보겠슴다. cmd창에서 원하는 위치로 가서 npm init -y를 해준다. 그리고 code .로 열어준다. 그 후 package.json으로 가서 main과 sciprts를 삭제한다. 그 후 이것저것 깃허브 관련 설정을 하고, nodemon을 설치하기 위해 npm i nodemon -D를 해준다. 바벨도 설치해줘야 해서, babel.config.json라는 파일도 만들어준다. 그리고 nodemon.json.. 2022. 7. 30. [트위터 클론 코딩] #9. Finishing up! ~6.5까지의 강의. 끝 ! 이제 코드를 정리해보자. 먼저. Home에 있는 form을 NweetFactory를 만들어 정리한다. Home.js 더보기 import React,{useState, useEffect } from "react"; import { dbService, storageService } from "fbase"; import Nweet from "components/Nweet"; import NweetFactory from "components/NweetFactory"; const Home = ({ userObj }) => { const [nweets, setNweets] = useState([]); useEffect(() => { dbService.collection("nweets").. 2022. 5. 6. [트위터 클론 코딩] #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. 이전 1 2 3 4 5 6 7 다음
