본문 바로가기

웹팩

(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.. 더보기
(2.2) Implementing React_ Front-end 문서 작성하기. 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (2.2) 2.1에 이어서 진행하는 implementing React_ Front-end 문서 작성하기 입니다. (10) /leadmanager/frontend/src/index.js (src 폴더 내에 index.js 파일 생성 및 작성) import App from './components/App'; (11)/leadmanager/frontend/src/components/App.js 작성 다음과 같은 위치에 App.js 파일을 생성한 후 작성해 주세요. // App.js import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends Component { render() { return React.. 더보기
(2.1) Implementing React_ 웹팩 설치, 적용하기. 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 (2.1) Implementing React(리액트에 적용하기!) 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고 안녕하세요? 웹개발을 하고 있는 영어선생 좌니 입니당! 이번엔 (2.1) Implementing React_웹팩 설치, 적용하기 시간이 되겠습니다. # 시작하기 전!!! 우리가 설치해야 할 것은!!! # install webpack $ npm i webpack webpack-cli --save-dev # install babel(takes care of transpiling the code so anything that you know newer # features of Javascript that react uses) # installreact preset $ n.. 더보기

티스토리툴바