본문 바로가기

리덕스

(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(호출)과 같은 것들을 할 수 있습니다. 결론은 토큰을 받는 인증 플로우를 만들어 주는 것 입니다. 그러면 바로 시작해 볼까.. 더보기
(5.1) 장고 토큰 인증(Django Token Authentication)_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (5.1) 장고 토큰 인증(Django Token Authentication) 안녕하세요? 죠니입니다. 이번 다섯 번째 포스팅은 파이썬_장고 내에서 토큰 인증을 다룰 것 입니다. 지난 포스팅의 마지막에 언급한 리스트를 먼저 상기시켜 볼까요?? 1. Implementing authentication 2. 로그인 페이지 3. 등록(register page) 4. React router 사용 5. Dealing with the backend as well~~.(Server Side도 다뤄줘야 합니다.) 6. 5번의 이유는 어느 한 계정으로 로그인 시 해당 계정이 부여받은 권한 밖의 정보는 볼 수 없게 해 줘야 하기 때문이죠. 7. Accounts 라는 Django Backend app(API)을 추가할 것 입.. 더보기
(4.1) 예외처리와 알림 서비스_third-party package(써드파티 사용)_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (4.1) 예외처리와 알림 서비스_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 안녕하세요? 영어회화 전문 강사 영어쨈 죠니입니당~!!! - 이번엔 지난 포스팅(3.4) 마지막에 언급했듯이 예외처리와 알림 서비스를 다룰 것 입니다. - 시작하기에 앞서 Remind(상기) 시켜 볼까요? - 정보 입력 이후 등록을 하려 해도 이미 동일 정보인 email이 list에 있으므로 등록이 안됩니다. - 사용자 입장에선 안되는 이유를 알 수 없기에 그 다음 단계의 행동을 취하기 난해해집니다. - 그렇기에 이미 다른사용자가 해당 email 계정을 가지고 있어 다른 이름의 계정을 생성하라는 메세지를 띄워 줘야 할 것 입니다. - 이를 해결하기 위해 우리가 만들 것은! 1. erros red.. 더보기
(3.4) Implementing React_ Redux & HTTP. 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (3.4) Implementing React_ Redux & HTTP. 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 안녕하세요? 웹개발 하는 영어쌤 좌니 입니당~. - 이번 포스팅은 3.3 에서 언급했듯이 계정 정보 입력 및 Submit 기능을 만들어 볼 차례입니다. (23) add lead form(계정 정보 입력) User Interface 만들기 || /src/components/leads/Form.js - 사용자의 입장에서 정보를 입력하기 위해서 당연히 입력 창이 필요합니다. - 그러니 state들을 추가 작성해 보도록 합니다. - (2.4) Implementing React_ 서버 최신화 자동화에서 작성했던 From.js 에 정보 입력 폼을 위한 코드를 추가로 작성.. 더보기
(3.3) Implementing React_ Redux & HTTP. 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (3.3) Implementing React_ Redux & HTTP. 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 Implement Redux - 저번 포스팅까진 React-Redux를 이용해 서로 연결하고 Redux Tool을 이용해 leads의 정보들을 띄워 보았습니다. - 이번 시간엔 이 정보들을 브라우저상의 User Interface에 띄울 수 있도록 할 것 입니다. (17) Leads.js에 UI에 반영하는하는 코드 작성하기 - Leads.js 코드 내에 render 에 반영이 되어 볼 수 있게 해야 합니다. - Leads.js에 해당 기능을 반영하는 코드를 작성합니다. import React, { Component, Fragment } from "react"; .. 더보기
(3.2) Implementing React_ Redux & HTTP. 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 Implement Redux 바로 시작해 볼까요? 이전 포스팅의 마지막엔 Axios를 설치했습니다. 이번 장에선 그 axios를 활용할 것 입니다. (14) /src/actions/leads.js 파일 작성 - axios를 활용하여 asynchronous request(비동기 요청)을 만들 것 입니다. // lead.js axios 활용예정 import axios from 'axios'; import { GET_LEADS } from './types'; // GET LEADS export const getLeads = () => { } - dispatch라는 것을 사용할 것 입니다. - lead.js 파일로 돌아가서 나머지를 작성해 줍니다. 이렇게 action 이 만들어 집니다. // lead.js ax.. 더보기
(3.1) Implementing React_ Redux & HTTP. 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (3.1) Implementing React_ Redux & HTTP. 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 안녕하세요? 웹개발 하는 영어쨈 죠니 입니다. 이번엔 지난 포스팅에서 마지막에 잠시 언급한 대로 Redux를 다룰 예정입니다. Implement Redux - Redux store 추가 - route reducer들 만들기 -- 에러 -- 메세지(react alert)(pop-up error message)(서버사이드 또는 클라이언트 사이드에서 만든 메세지가 뜨도록 하는 것) - But!!!!! Redux에 대해서는 너무 자세히 탐구하진 않습니다. 활용 및 응용을 통해 인증(Authentication)을 만드는 것이 목적입니다. Yeah, Let's Go! I.. 더보기
(2.4) Implementing React_ 서버 최신화 자동화(watch option 적용). 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (2.4) 2.3에 이어서 진행하는 implementing React_ 서버 최신화 자동화(watch option) 입니다. (24) package.json 에 코드 추가 - 이번 작업은 매우 간단합니다. (그런데 왜 페이지를 2.4 까지 끌고 왔나요???) - 너무 길어서 작성하다가 잠시 앉느라고 흐름이 끊겼어요... 모션데스크의 단점입니다 여러분! 자 어쨌든 package.json 에 간단히 --watch코드를 추가해 줍니다. 다음과 같이요. 서버 실행 $ npm run dev - 그리고 Header 파일의 UI에 수정사항을 적용해 주면 (--watch에 의해) 자동으로 갱신됩니다. (25) 대시보드 만들어주기 - 이제 Header는 완성했으니 그 아래에 lead 를 추가하는 Component를 만들.. 더보기
(2.3) Implementing React_ Redux 사용하기. 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (2.3) 2.2에 이어서 진행하는 implementing React_ Redux 사용하기 입니다. (20) /leadmanager/frontend/src/components/layout/Header.js 작성 components 폴더 내에 layout 폴더를 생성하고 layout 폴더 내에 Header.js 파일을 생성 및 작성해 줍니다. - 여기서 우리는 Redux를 사용할 필요가 있습니다. - VS(Visual Studio.비쥬얼 스튜디오.다운로드)와 같은 IDE(Integrated Development Environment.통합 개발 환경) 등을 사용중이라면 다음과 같이 IDE 내에서 설치가 가능합니다. 검색해 보시면 됩니다! - MS Link: https://marketplace.visualst.. 더보기

티스토리툴바