728x90 반응형 WEB49 WEB 만들기 15 - Create React App 예전에 리액트 앱을 처음 실행하려면 Babel이나 Webpack을 설정하기 위해서 많은 시간이 걸렸다. 하지만 이제는 create-react-app Command로 바로 시작할 수 있습니다. Babel 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌수 있게 해주는것을 말한다. Webpack 이걸을 통해 저런것을 묶어주는 bundle을 시킨다. 이런식으로 폴더로 서버와 클라이언트를 구분해주고 cd client로 해서 client쪽으로 들어간후에 npx create-react-app . 해줍니다. 이렇게 해주고 여기서 지금까지 npm을 했는데 npm은 뭐고 npx는 무엇인지 생각할 수 있다. 다음에 알려드리겠습니다. 2021. 1. 19. WEB 만들기 14 - 리액트란? 프론트의 시작 React JS 페이스북에서 만들어졌고 2013에 발표 Components로 module과 비슷하게 컴포넘트로 이뤄져 있어서 reusable이 뛰어납니다. 한파일에 모듈화 컴포넘트화 하면 편하게 쓸수 있다. Real Dom과 virual Dom Real Dom은 10개의 리스트가 있을대 한가지의 리스트가 업데이트 되었다고 하자. 그러면 그 전체 리스트를 다시 리로드(Reload) 해줘야한다. 그래서 super expensive한 작업이 된다. virual Dom에서는 하나가 바뀌면 그 하나만 새로 가져올 수 있다. 어떻게 한개만 바꿀수 있는지? 이 리스트들을 스냅샷으로 찍어놓고 스냅샷 찍은거랑 새로 살펴본것에서 차이 분석해서 그 부분만 realDom에서 바꿔주는것이다. Virual Domd.. 2021. 1. 19. WEB 만들기 - 13 로그아웃 우리가 이번에는 로그아웃 기능을 만들것인데 우선 로그아웃 Route 만들고 로그아웃 하려는 유저를 데이터베이스에서 찾아서 그 유저의 토큰을 지워주는 식으로 구현을 할것입니다. 왜 토큰을 지워주면 되냐면 서버에 토큰이 없다면 클라이언트에 토큰과 비교해도 인증이 안되서 인증이 안되서 로그인 기능이 풀리기 때문에 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.s.. 2021. 1. 19. WEB 만들기 12 - Auth 기능 auth 라는 라우터가 필요한 이유는 어떤 페이지를 들어가게되면 어떤 페이지는 로그인해야 들어갈 수 있고 또는 로그인 안해도 되고 어드민 관리자만 이용할 수 있는 기능이 있는데 그런것을 하나하나 체크 하기 위해서 만드는 것이다. 우리가 토큰을 만든다음에 그 토큰을 유저 정보에 넣어줬다. 그리고 클라이언트 쪽에서는 그 토큰을 쿠키에다가 서버에서는 데이터베이스 쪽에 넣어주었습니다. 이 두가지를 이용해서 서로 토큰이 맞는지 서로 확인하는것 어떤 유저가 A페이지에서 B페이지로 갔을때 해당 유저가 B페이지로 갈 수있는 사람인지에 대해서 클라이언트 부분에서 쿠키에 담겨있는 토큰이 인코드 되어있는데 디코드해서 유저아이디가 나오는것을 서버로 전달하는 개념이라고 생각하면된다. 그래서 이 유저 아디를 가진 것이 토큰에 있.. 2021. 1. 19. 이전 1 ··· 5 6 7 8 9 10 11 ··· 13 다음 728x90 반응형
