728x90 반응형 리액트30 WEB 만들기 - 16 NPM? NPX? NPM(Node Package Management)은 레지스트리 저장소 역활을한다. 지금까지 우리가 dependencies 쪽에 저장되는 라이브러리가 저장되어있는곳을 말한다. 애플리케이션을 켤때 npm run start나 배포를 할때 빌드를 해서 배포를 해야하는데 이때 npm run build 할때쓴다. 이처럼 이런 이름이 뭐고 스크립트는 뭐고 어떤게 다운되어있는지 나와있다. 그리고 우리가 npm install ``` 하면서 설치를 할때는 로컬로 다운이되는 Locally로 . 로컬에 다운하면 이곳에 다운이되는것이고 npm install ``` -g 를 하면 Grobally 글로벌로 되는데 프로젝트가 아닌 bin/directort인 윈도우는 %AppData%/npm에 저장이 된다고 생각하면되고 맥의 경우는.. 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 ··· 3 4 5 6 7 8 다음 728x90 반응형
