본문 바로가기

개발

(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(호출)과 같은 것들을 할 수 있습니다. 결론은 토큰을 받는 인증 플로우를 만들어 주는 것 입니다. 그러면 바로 시작해 볼까.. 더보기
(4.2) 예외처리와 알림 서비스_예외처리 메세지 pop-up(팝업)_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (4.2) 예외처리와 알림 서비스_예외처리 메세지 pop-up(팝업)_ 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 이전 포스팅에선 예외처리하고 발생시킨 알림들을 Hard coding으로 넘겼습니다. 그랬을 시에 다음과 같은 문제가 있다고 마지막에 언급했습니다. 1. hard coding 되어 발생되는 메세지로는 한계가 있습니다. 2. 만약 이미 등록되어 있던 이메일과 동일한 이메일을 입력해 생성 시도할 경우 상태는 다르지만 같은 누락된 것과 동일한 메세지가 출력될 것 입니다. 그렇게 hard coding 된 코드들을 조금 더 정확하게 출력해 줄 수 있도록 수정해 줄 것 입니다. 그러면 이제 실제 발생되는 메세지들을 활용하여 좀 더 자세한 핸들링을 할 수 있도록 작업해 줍니.. 더보기
(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.. 더보기

티스토리툴바