React4 [React + Node.js + Mongo DB Atlas] Netlify(프론트엔드 배포) + Elastic Beanstalk(백엔드 배포) 배포하고 연결하기 풀스택 앱을 배포하는 과정을 연습해보기 위해 진행했는데, 아무리 찾아도 제대로 정리해놓은 글이 없어서.. 내가 작성하기로 했다. React 와 Node.js의 Express 프레임워크를 이용해 만든 프론트, 백엔드를 각각 다른 툴로 배포하여 연결할 것이다. 프론트엔드는 Netlify, 백엔드 배포는 AWS의 Elastic Beanstalk를 이용한다. DB는 몽고DB의 Atlas를 이용하였다. 만고의! 삽질 끝에 확실한 방법을 찾은 것이니 그대로 따라하기만 하면 된다.. ㅠㅠ * AWS 프리티어(무료)에 가입했다는 전제로 진행한다 * 개발 환경 Frontend : React Backend : Node.js Express DB : MongoDB Atlas 배포 환경 Frontend : Netlify Bac.. AWS/Elastic Beanstalk 2023. 1. 15. 4-4. [React + Node.js Express] 로그아웃 기능 회원가입과 로그인을 만들었으니 로그아웃을 구현한다. 로그아웃의 기능은 간단하다. 유저 인증을 프론트에서 보낸 JWT토큰을 통해 인증하는 방식으로 진행하고 있으므로, 먼저 db에 있는 JWT 토큰을 파기하여 유저 인증 절차가 불가능하게 만들어주면 된다. 그 후 Redux를 통해 사용한 LocalStorage(또는 SessionStorage)를 비워주고, 혹시 모르니 브라우저 쿠키도 파기해준다. Redux는 새로고침하면 사라지기 때문에 굳이 지워주지 않아도 되는데, 그냥 연습용으로 dispatch 한번 더 불러와 사용해본다. 모든 절차가 완료되면 새로고침 코드를 적용하여 페이지를 정돈해준다. 새로고침을 하면 모든 컴포넌트가 다시 마운트되기 때문에, 유저가 새로고침 할 필요 없이 메인 페이지가 바뀌는 모습을 .. 프로젝트/풀스택 프로젝트 2022. 12. 5. 4-3. [React + Node.js Express] 유저 인증 기능 예를 들어 쇼핑몰 사이트가 있다고 해 보자. 쇼핑몰 웹사이트는 장바구니 기능을 이용하기 위해 '현재 누가 로그인 되어있는지, 또는 로그인되어있지 않은 상태인지' 를 각 상품 주소를 이동할 때 마다 알아내야 한다. 또한 로그인되어 있는 상태라면 해당 유저의 정보를 매번 불러와야 한다. 지난 시간에 로그인을 구현하면서, 로그인을 하면 jwt 토큰을 발급해 쿠키에 저장하기로 했다. jwt 토큰은 암호화된 토큰인데, 반대로 말하면 복호화했을 경우 처음 토큰으로 이용된 값을 알아낼 수 있다. 우리는 user_id를 이용해 jwt토큰을 만들었으므로, 토큰을 복호화하면 user의 _id가 나오게 된다. 따라서 매 페이지를 이동할 때 마다 토큰을 복호화하여 db에 등록된 _id인지를 검사하면 로그인된 유저의 정보를 알.. 프로젝트/풀스택 프로젝트 2022. 12. 5. 4-2. [React + Node.js Express] 로그인 기능 회원가입을 완성시켰으니 로그인 기능을 만든다. 프론트에서 유저가 폼에 입력한 데이터를 받아 백엔드로 전송하고, 백엔드는 받은 데이터를 DB에 들어있는 데이터와 비교한다. 만일 입력받은 아이디가 DB에 존재하면, 비밀번호를 DB와 비교한다. 아이디와 비밀번호가 모두 일치할 시 로그인 유지를 위해 토큰을 생성하고, 유저 정보와 성공 메세지를 프론트로 전송한다. Frontend 회원가입에서 사용한 Register.js 와 원리가 같기 때문에 axios를 제외한 설명은 생략한다. 회원가입때와 마찬가지로 State와 onChange를 사용하여, 입력값이 변할 때 마다 State에 데이터를 저장해주는 형식이다. State로 받아온 데이터를 백엔드에 작성할 api로 보낸다. Login.js 로그인에 성공하면 navi.. 프로젝트/풀스택 프로젝트 2022. 12. 3. 이전 1 다음
