합니다, 개발공부📝 합니다, 개발공부📝

이와같은 비디오를 업로드하는 페이지 형식을 만들 것이다. 우선 client>components>views>VideoUploadPage>VideoUploadPage.js를 만든다 그 후 App.js에 route를 생성해준다. 여기서 null은 아무나 다 입장가능하고, false는 로그인한사람은 못들어가고, true는 로그인한사람만 들어갈 수 있다. import React, { Suspense } from 'react'; import { Route, Switch } from "react-router-dom"; import Auth from "../hoc/auth"; // pages for this product import LandingPage from "./views/LandingPage/LandingPa..

Login페이지와 마찬가지로 회원을 등록하는 페이지도 만들 것이다. App.js import React from 'react'; import {Route, Switch} from "react-router-dom"; import About from "./about"//index.js가 기본이기 때문에 굳이 타이핑하지 않아도 된다. import Login from "./RegisterLogin"; import Register from "./RegisterLogin/register"; function App() { return ( {/* */} ); } export default App; src>components>RegisterLogin>register.js index.js에서와 비슷하게 lastname, ..

컴포넌트 안의 registerlogin을 이용할 것이다. App.js에 라우터를 등록해 놓는다. import React from 'react'; import {Route, Switch} from "react-router-dom"; import About from "./about"//index.js가 기본이기 때문에 굳이 타이핑하지 않아도 된다. import LoginPage from "./RegisterLogin/LoginPage"; import RegisterPage from "./RegisterLogin/RegisterPage"; import LandingPage from "./ function App() { return ( {/* */} ); } export default App; 먼저 class ..

스타일보다 기능에 초점을 맞추기 위해서 css framework를 쓰자 https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design clientdp npm install antd --save를 해준다. 스타일을 import 해준다. (index.js에 해주자) 서버에서 받은 데이터중에서 어떤걸 받아서 client에 보여줄 지 redux를 이용해서 설정하자. 스토어 안의 state를 변경하고 싶으면 dispatch를 해야한다. 우리는 redux, redux-promise, redux-thunk가 필요하다. 액션은 객체 형식의 데이터를 받아야 처리할 수 있다. 그런데 객체형식이 아닌 프로미스형식이나 ..

여태까지 우리가 사용한 server와 client의 포트는 다르다. 포트가 다르기 때문에 우리가 바로 생성한대로 routing할 수가 없다 이럴때 cors issue 가 발생할 수 있는데, 이를 proxy를 이용해서 해결할 수 있다. 그에 대한 정보는 다음에서 확인할 수 있다. https://create-react-app.dev/docs/proxying-api-requests-in-development/ Proxying API Requests in Development | Create React App Note: this feature is available with react-scripts@0.2.3 and higher. create-react-app.dev 우선 dev에 proxy를 사용하면, $ n..

리얼돔은 하나만 변경해도 전체를 다시 다 로드한다. virtual dom은 하나만 다시 로드해서 더 빠르다. 스냅샷을 찍으놓은 것을 virtual 돔이 차이를 분석해서 바뀐 부분만 realdom에서 변경해준다. 리액트앱을 사용해보자. 여기서 webpack은 public폴더는 관리하지 않고 src 폴더만 관리한다. 따라서 사용하고 싶은 이미지등의 파일들은 모두 src폴더에 넣어주어야 한다. 여기서 npm 과 npx는 다음과 같다. npm은 레지스트리(dependency 담고 있고 파일 빌드기능도 포함한다.)이다. react app을 만드는 것은 다음링크에서 잘 나와있다. https://github.com/facebook/create-react-app facebook/create-react-app Set u..

여태까지 server 파트를 구현했는데, client파트와 구분하기 위해서 만들었던 내용들을 모두 server안으로 이동시켜준다. client폴더를 생성해주고 그 안에 react를 실행해 줄 것이다. 우선 다음의 사이트에 가서 헤로쿠를 다운받는다. https://devcenter.heroku.com/articles/heroku-cli The Heroku CLI | Heroku Dev Center Last updated April 27, 2021 The Heroku Command Line Interface (CLI) makes it easy to create and manage your Heroku apps directly from the terminal. It’s an essential part of u..

저번시간에 한 auth의 기능에서 false로 만들기 위해서는 인증하는 과정에서 token이 불일치 하면 되므로 그냥 db의 토큰을 지워주면 된다. register, login, auth기능에 이어서 logout 기능을 구현한다. token을 제거하고 auth를 false로 해주면 된다. app.get("/api/users/logout",auth, (req, res)=>{ //유저찾아서 업데이트 (미들웨어에서 id 넣어줬으므로 그냥 그대로 넣어주면 된다. 토큰은 지워준다.) User.findOneAndUpdate({_id:req.user._id}, {token:""}, (err, doc)=>{ if(err) return res.json({success:false, err}) return res.statu..