728x90 리액트10 #11, Create-React-App Create-react-App 이란 ? 👋🏻 페이스북에서 만든 공식적인 React 웹 개발용 Boilerplate이다. 직접 모든 개발환경을 설정하지 않고, 페이스북이 지속적으로 업데이트를 해주기 때문에 많은 사람들이 사용하고 있다. 준비사항 🌿 1. Node.js Webpack, Babel 같은 도구들이 자바스크립트 런타임인 Node.js를 기반으로 만들어져 있기에 해당 도구들을 사용하기 위해서 Node.js를 설치한다. 2. Yarn npm ( 노드 패키지 매니저 ) 보다 조금 향상된 도구라고 생각하면 된다. npm은 위의 Node.js를 설치하게 될 때 같이 받게 되는 패키지 매니저 도구다. 프로젝트에서 사용되는 라이브러리를 설치 및 라이브러리 버전 관리를 하게 될 때 사용된다. 여기서 npm이 아.. 2021. 1. 20. #10. React (리액트) 란? Whatr is React.js ? 👋🏻 1. Library. Made by Facebook. Released in 2013 1. Components module과 비슷하게 컴포넌트로 이루어져 있어서 재사용이 가능하다. 2. Virtual Dom Real DOM vs Virtual DOM - Real DOM? 1. 만약 10개의 리스트가 있다. 2. 그 중에 한가지의 리스트만 Upload 됨. 3. 전체 리스트를 다시 Reload 해야 됨 4. Super Expensive한 작업 ! - Virtual DOM? ✔️ 1. 만약 10개의 리스트가 있다 2. 그 중에 한가지의 리스트만 Update 됨 3. 바뀐 한 가지 아이템만 DOM에서 바꿔준다. 어떻게 Virtual DOM에서 바꿔주지? 👀 1. JSX를.. 2021. 1. 20. #9. 로그아웃 기능 로그아웃 기능 만들기 🔐 1. 로그아웃 Route 만든다. 2. 로그아웃 하려는 유저를 데이터베이스에서 찾는다 3. 유저의 토큰을 지워준다. Auth에서 인증을 할 때 Client 에 있는 Cookie Token을 가져와서 DB Token과 맞는지 비교하여 인증을 한다. 로그아웃 시 Token을 지우게 되면, 로그아웃이 바로 진행 된다. // index.js ... app.get('/api/users/logout', auth, (req, res ) => { User.findOneAndUpdate({_id: req.user._id}, {token:""}, (err, user) => { if(err) return res.json({ success: false, err}); return res.status(2.. 2021. 1. 11. #8. Auth 기능 만들기 Auth 를 왜 만들어야 하나 😉 ? 1. 페이지 이동 시 로그인되어있는지 안되어있는지, 관리자 유저인지 등을 체크 2. 글을 작성하거나 지워야 할 때, 권한이 있는지 체크 How !! 1. Cookie 에서 저장되어있는 Token을 Server에 가져와서 복호화를 한다. 2. 복호화를 하면 User ID가 나오게 된다. 그러한 User ID 를 이용하여 데이터베이스 User Collection에서 유저를 찾은 후, 쿠키에서 받아 온 token이 유저도 갖고있는지를 확인한다. User.js // user.js ... userSchema.statics.findByToken = function ( token , cb ) { var user = this; user._id + '' = token; // 토큰을 .. 2020. 12. 26. 이전 1 2 3 다음 반응형
