728x90 반응형 SMALL 프론트엔드개발5 계정 생성 페이지구현 마지막으로 계정 생성코드를 작성해 보겠습니다.! 지금까지 TodoList를 작성하고, 로그인을 하고 로그아웃을 했지만 계정생성페이지를 만들지않아 계속 postman 을 통해서 계정을 만들어주었습니다.ㅠㅠ 계정생성이 불가능했으면 로그인 기능은 화중지병입니다. 따라서 이제 로그인, 유저에 대한 기능을 위한 계정 생성페이지를 구현해보겠습니다!! 로그인 하는 버튼 하단의 링크를 클릭해서 계정 생성 페이지로 라우팅 한 후 계정 생성 완료 시 로그인 페이지로 돌아가는 간단한 로직을 구현해 보겠습니다 계정생성 로직 ApiService에 signup 메서드를 추가해주고, 이 메서드를 이용해 백엔드의 signup 요청을 해주도록 하겠습니다. export function signup(userDTO){ return call.. 2021. 12. 16. 액세스 토큰 저장 로그인 시 받은 토큰을 로컬 스토리지에 저장하는 것이 저의 로직이됩니다. 백엔드에 API콜을 할 때마다 로컬 스토리지에서 액세스 토큰을 불러와 헤더에 추가해 줍니다. 첫 번째로 로그인 시 받은 토큰을 로컬 스토리지에 저장하는 코드를 작성해 보겠습니다. apiservice.js 의 로그인하는 함수를 수정해 주어야 합니다. export function signin(userDTO) { return call("/auth/signin", "POST", userDTO).then((response) => { if(response.token){ //로컬스토리지에 저장 localStorage.setItem("ACCESS_TOKEN",response.token); //token이 존재하는 경우 Todo화면으로 리디렉트 w.. 2021. 12. 15. 로컬 스토리지 여기서 궁금증!!!! 과연 우리가 로그인하고, 상태값이라던가, 정보라던가, 내활동 기록들 등등이 어디에 기록될까요? 계속 DB에 왔다갔다하면서 로그인이 되어있으면 로그인관련 테이블의 로그인유무에 대한 컬럼의 row가 0, 1 로 계속 기록되는걸까요? 웹 스토리지를 이용하면 사용자의 브라우저에 데이터를 key-value 형태로 저장할 수 있습니다. 쿠키와 비슷하다고 생각하면 될것같습니다. 웹 스토리지에는 두 종류가 있습니다. 세션스토리지, 로컬 스토리지 세션 스토리지는 브라우저를 닫으면 사라지고 로컬 스토리지는 브라우저를 닫아도 사라지지 않습니다. 따.라.서, 사용자가 브라우저를 재시작할 때마다 로그인하게 하고 싶으면 세션 스토리지를, 브라우저를 재시작해도 로그인 상태를 유지하고 싶으면 로컬 스토리지를 사.. 2021. 12. 15. 로그인 페이지 구현내용 로그인 페이지 구현 메인 페이지 리디렉션 로직 구현 로그인을 위한 API서비스 메서드 작성 로그인 API서비스는 /auth/signin 이었습니다. 이 경로를 이용해 로그인하는 메서드를 ApiService에 작성해주겠습니다. export function signin(userDTO) { return call("/auth/signin", "POST", userDTO).then((response) => { console.log("response : " , response); alert("로그인 토큰 : " + response.token); }); Login 컴포넌트를 수정했습니다 . Login 컴포넌트는 이메일과 패스워드를 받는 인풋 필드와 로그인 버튼으로 이뤄져 있습니다. 사용자가 이메일과 패스워드.. 2021. 12. 15. 로그인 컴포넌트 현재 프론트엔드 애플리케이션은 백엔드에 http 요청을 보냈을 때 403이 리턴되면 로그인 페이지로 리디렉트 해야합니다. 또 로그인한 후 백엔드 서비스로 부터 받은 토큰을 어딘가에 저장해 놓고 요청을 보낼 때마다 헤더에 Bearer 토큰을 지정해줘야합니다. 그래서 첫번쨰로 로그인 페이지와 리디렉션 로직을 구현해야합니다. 그러기위해서 리액트-라우터-돔 라이브러리가 필요합니다. 2021.12.14 - React-router-dom 라이브러리가 필요한 이유 React-router-dom 라이브러리가 필요한 이유 React-router-dom 라이브러리가 필요한이유 이 라이브러리가 왜 필요한지 설명전에 우리에게 익숙한 형식의 웹 애플리케이션을 살펴 보겠습니다. 우리에게 익숙한 형식의 라우팅은 다음과 같습니다 u.. 2021. 12. 14. 이전 1 다음 728x90 반응형 LIST
