본문 바로가기

풀스택

(9.0) 리액트.장고.회원가입 Quick Start_ 10분 만에 토큰 방식 회원가입 구성하기 *(9.0) 리액트.장고.회원가입 Quick Start_ * 10분 만에 토큰 방식 회원가입 구성하기 안녕하세요? 영어쌤 죠니입니다. 이번엔 그 동안의 에러 등등... 아... 힘듭니다. 장고가 이렇게 힘든것인줄은... 어쨌든 쉽진 않지만 빠르게 회원가입 및 토큰 방식 인증을 구성하는 방법을 포스팅을 합니다. 다음의 방법대로 하면 10분만 투자하여 회원가입 및 인증 튜토리얼을 구성해보는 시간이 되겠습니다. 해당 방법은 Traversy Media의 Brad Traversy께서 작성하신 [ Github: Lead_Manager_React_Django ] [ Youtube: Lead_Manager_React_Django ] 프로젝트 입니다. 작업환경 OS_ Ubuntu 18.04.2 LTS Python_ Py.. 더보기
(8.0) 오류 리포트_ .js파일들의 html 태그를 수정해도 UI가 안바뀌어요... 해결_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (8.0) 번외편_ .js파일들의 html 태그를 수정해도 UI가 안바뀌어요... 해결_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 안녕하세요? 웹개발 하는 영어선생 죠니 입니다. 아직은 늦지 않은 오전 2시이네요. 작업을 하면서 발생하는 오류중 하나를 정리해 보려 합니다. 우선 발생했던 문제 또는 궁금증은 다음과 같았습니다. 1. 분명 나는 reducer, action과 같은 동작 기능을 주었는데 왜 반영잉 나되는 느낌이지? 2. 구차하지만 UI를 직접 바꿔보고, console.log를 여기 저기 다 찍어보자... 3. 그런데도 안된다... 왜지??? 내가 뭘 잘못했는데 이러는걸까... 하는 자괴감에 빠지다가 문득 생각이 났습니다. 아!!!! /frontend/templ.. 더보기
(7.4) Frontend Authentication_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (7.4) Frontend Authentication_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 안녕하세요? 죠니입니다. 이제 진짜 마지막의 마지막에 다가왔군요. - 인증받은 계정으로 로그인 시에만 새로운 데이터를 생성하고 관리하는 것이 가능해 지도록 하는 작업을 할 차례입니다. - 시간 끌지 말고 바로 해볼까요? (25) /src/actions/leads.js - lead action을 조금 수정합니다. - action의 auth.js 파일에서 token config function이 있습니다. 그것을 leads로 가져옵니다. - token 을 얻기 위해 다음과 같이 dispatch와 함께 getState를 줍니다. - 결과 확인 - 새로고침을 해 보면 - 프로젝트 내.. 더보기
(7.3) Frontend Authentication_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 7장 Frontend Authentication 안녕하세요? 죠니입니다. 이번 7.3은 로그인 시 메세지 출력 부터 시작하겠습니다. (12) /src/components/layout/Header.js - Header.js 파일에 다음과 같이 코드를 작성합니다. - 음... 코드를 작성하기 전에 제가 예상했던 메세지와는 조금 다르지만, 이것도 확실히 쓸모가 있습니다. - 다음의 결과화면과 같이 로그아웃 버튼의 좌측에 Welcome 메세지가 발생되어 있고 user name이 있어 어떤 계정으로 인증을 받았는지 알 수 있습니다. (13) /src/actions/auth.js - auth.js 액션 파일의 가장 아래에 다음과 같이 코드를 추가 작성합니다. - logout user 부분의 다음의 블록지정된 코드를.. 더보기
(7.2) Frontend Authentication_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 7장 Frontend Authentication 안녕하세요? 죠니입니다. 이번 7.2 에선 지난 포스팅에 진행했던 로그인에 이어 로그아웃을 하도록 합니다. (5) /src/components/layout/Header.js - 먼저 UI를 보시면 로그아웃을 하는 링크는 보이지 않습니다. - 로그인 상태라면 로그아웃 버튼이 있어야 하고, 로그아웃 상태라면 로그인 버튼을 제공해 줍니다. - react redux와 proptypes를 가져옵니다. - 로그아웃을 구현하기 위한 코드 수정 및 추가 작성을 진행합니다. - 다음은 Register와 Login에 대해 작성되어 있던 의 코드를 모두 잘라냅니다.(ctrl + x) - 그리고 그 잘라냈던 코드는 다음에 붙여줍니다. - const guestLinks 를 새로 .. 더보기
(7.1) Frontend Authentication_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 7장 Frontend Authentication 안녕하세요? 죠니입니다. 이제 이번 React+Django+Redux Authentication의 마지막 주제가 되겠습니다. - Login Functionality(로그인 기능) - Login - get a token (토큰 발급 받기) - Token 확인이 되어 인증 받기 - Register - 회원가입 하기 바로 시작해 보겠습니다. (1) /src/actions/types.js - 로그인 성공, 로그인 실패에 대한 type 추가하기 - Code on Color Scripter (2) /src/actions/auth.js - auth.js 파일 내에 로그인 성공, 실패에 대한 코드를 추가합니다. - 5, 6번째 포스팅에서 진행했던 토큰에 대한 코드와 매우.. 더보기
(6.2) 권한주기(Auth State & Private Routes)_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (6.2) 권한주기(Auth State & Private Routes)_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 안녕하세요? 죠니입니다. 바로 시작할게요! - 아직까진 Add Lead(data 생성)과 Lead list(data list) 페이지가 숨겨지지 않고 전면에 공개되어 있습니다. 있어서는 안될 일이죠. - 그래서 당연하지만 인증 받은 계정으로 접속시에만 해당 기능이 가능한 페이지로 넘기도록 작업을 할 것 입니다. (10) Lead data 생성 화면 숨기기 입니다. 시작! (10) /src/components/common/PrivateRoute.js 파일 생성 및 작성 - Lead data 생성 및 리스트 페이지 숨기기 // 권한을 가진 계정만 접근 가능 - .. 더보기
(6.1) 권한주기(Auth State & Private Routes)_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (6.1) 권한주기(Auth State & Private Routes)_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 안녕하세요? 영어쨈 죠니 입니다. 저번 포스팅에선 백엔드에서 토큰을 발급받고 이를 활용해 로그인 등을(백엔드 에서) 구현하는 법과 등록, 로그인 그리고, 토큰을 받고 해당 토큰을 이용하여 보호된 루트들로 접근하는 것을 알아보았습니다. 이번 포스팅에선 로그인, 등록 컴포넌트들로 Interface에 띄울 수 있게 하고, react router를 설치하고, 인증 권한에 따른 페이지 접근 등을 알아봅니다. 로그인을 해야만 서비스 페이지에 접근 및 서비스를 이용 가능하게 하는 것과 같습니다. - 인증 받은 예정으로 접근해야만 다음의 페이지에 접근해 이후 작업을 진행할.. 더보기
(5.3) 장고 토큰 인증- 로그인 구현하기_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (5.3) 장고 토큰 인증- 로그인 구현하기_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 - 이번엔 로그인을 구현하여 작동하고 있는 Authentication에 적용하도록 합니다. (11) /leadmanager/accounts/serializers.py || Validation(인증) 코드 작성 작업 - 다음과 같이 #Login Serializer 및에 인증 기능을 하는 serializer를 만들어 줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 // /leadmanager/account/serializers.py from res.. 더보기
(5.2) 장고 토큰 인증(Django Token Authentication)_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (5.2) 장고 토큰 인증(Django Token Authentication) 안녕하세요? 죠니입니다. 지난 포스팅의 마지막에 언급했던 것을 다시 상기시켜 봅니다. 이제 우리에게 필요한 것은 인증을 하도록 해 주는 것 입니다. 그렇게 하기 위해 이제 할 일은 1. Registration(등록) API 만들기: 계정 생성을 위함 2. Login API 만들기 3. TOKEN - 그리고 우리가 로그인을 할 때 장고 서버로부터 토큰을 받게 될 것 입니다. - 토큰을 받으면 받은 토큰을 header들과 함께(또는 headers 로부터) 보냅니다. - 그렇게 하면 lead를 추가, fetch(호출)과 같은 것들을 할 수 있습니다. 결론은 토큰을 받는 인증 플로우를 만들어 주는 것 입니다. 그러면 바로 시작해 볼까.. 더보기

티스토리툴바