현수쓰

React & Django 프로젝트input태그를 이용하여 직관적으로 한줄 노트를 작성할수 있는 앱 R&D Note - NewDnote (새글 쓰기)store/modules/notes.js 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889import { ajax } from "rxjs/observable/dom/ajax";import { of } from "rxjs";import { map, mergeMap, catchError, withLatestFrom } from "rxjs/operators";import & ...

React & Django 프로젝트input태그를 이용하여 직관적으로 한줄 노트를 작성할수 있는 앱 R&D Note - Structure (구조잡기)components/notes/InsertForm/InsertForm.js 12345678910111213141516import React from "react";import styles from "./InsertForm.scss";import classNames from "classnames/bind";const cx = classNames.bind(styles);const InsertForm = () => { return ( <div className={cx("form")}> <div className={cx("title")}>Insert You ...

React & Django 프로젝트input태그를 이용하여 직관적으로 한줄 노트를 작성할수 있는 앱 R&D Header (nav바 디자인하기)page routingProject : frontend src/ ├── styles/ | ├── utils.scss | └── index.scss ├── containers/ # 리액트 컨테이너 파일들 집합 ├── components/ # 리액트 컴포넌트 파일들 집합 | ├── /structure | ├── /Header | | ├── Header.js # header 관련 코드 파일 | | ├── Header.scss # header 관련 scss 파일 | | | └── index.js # header export ...

React & Django 프로젝트input태그를 이용하여 직관적으로 한줄 노트를 작성할수 있는 앱 R&D (Backend) - DRF API 구현하기장고 API 구현 URL METHOD Description Params Return /api/notes/ GET 글 목록 X [..{ Notes }] /api/notes/ POST 새로운 글 작성 (text) /api/notes/{id} GET 글 상세보기 (Notes_id) { Note } api/notes/{id} PATCH 글 수정 (Notes_id) api/notes/{id} DELETE 글 삭제 (Notes_id) notes app 생성123$ python manage.py startapp notes# restframework install$ pip install djangorestframework app 추가12345678910111213# settings.pyINSTALLED ...

참고 블로그 React & Django 프로젝트input태그를 이용하여 직관적으로 한줄 노트를 작성할수 있는 앱 R&D (Redux) - 리덕스 설정하기STEP2. Redux 설정Redux는 글로벌하게 상태관리를 할수있게 도와주는 도구 1npm install redux react-redux redux-observable rxjs rxjs-compat cf)redux-observable rxjs의 개념이 도입된 라이브러리 rxjs RxJS는 Observable를 사용하여 비동기 및 이벤트 기반 프로그램을 작성하기 위한 라이브러리이다. store/modules/ping.js12345678910111213141516const PING = "PING";const initialState = { ping: "ping"};export const ping = (state = initialState, action) =&g ...

참고 블로그 React & Django 프로젝트input태그를 이용하여 직관적으로 한줄 노트를 작성할수 있는 앱 R&D (Settings) 기초 설정 틀 만들기STEP1. 초기 설정Django 앱생성123456789101112# 가상환경 생성python –m venv venv# 가상환경 접속source venv/Scripts/activate# django 프로젝트 생성(venv) pip install django(venv) django-admin startproject dnote(venv) cd dnote(venv) python manage.py migrate(venv) python manage.py runserver # 실행확인 react 앱생성1234npm install -g create-react-appcreate-react-app frontendcd frontendnpm start # 실행확인 React - 개발 환경 설정 및 구조 잡기.(sass 설정)123 ...

Django CBV 프로젝트 3. 소셜 로그인 (간편로그인)참고 사이트 구조 변경(리팩토링)12345# static 파일설정STATIC_URL = '/static/'STATIC_ROOT = './static'# STATIC_URL: 이 경로로 시작되는 요청은 static 핸들러로 라우팅# STATIC_ROOT: collectstatic 커맨드로 static 파일들을 모을 때 저장될 디렉토리 경로 프로젝트 구성# Project static # python manage.py collectstatic 명령어 수행시 파일이 저장되는 디렉토리입니다. | minitutorial/ # 프로젝트의 루트 디렉토리입니다. 디렉토리이름은 변경하셔도 됩니다. ├── manage.py # CLI에서 장고 프로젝트의 다양한 기능들을 사용할 수 있게 해주는 유틸리티입니다. └── minitutorial/ # 실제 ...

Django CBV 프로젝트 3. 사용자 인증 (이메일 인증)참고 사이트 가입즉시 인증이메일 보내기 인증토큰 생성 사용자인증 페이지로 이동할 수 있는 링크를 포함한 인증이메일 발송 인증이메일에서 인증하기 링크 클릭 후 사용자인증 페이지로 이동 사용자인증 페이지에서 url에 포함된 사용자id와 인증토큰을 비교해서 인증 정상적인 사용자인 경우 is_active 를 True 로 변경 후 인증완료 화면 표시 비정상적인 사용자인 경우 인증실패 화면 표시하여 재인증 가능한 링크 제공 인증되지 않은 사용자의 경우 인증이메일 재발송 가능하도록 링크 제공 이메일 보내기12345EMAIL_HOST = 'smtp.gmail.com'EMAIL_PORT = 587EMAIL_HOST_USER = '이메일'EMAIL_HOST_PASSWORD = '비밀번호'EMAIL_USE_TLS = True 화면 회원가입시 이메일 보내는 형식 지정하는 page ( ...

Django CBV 프로젝트 3. 사용자 인증 (로그인)참고 사이트 Views.py1234567891011121314# 추가from django.contrib.auth import get_user_modelfrom django.contrib.auth.views import LoginViewfrom user.models import User # 모델 importfrom user.forms import UserRegistrationForm, LoginForm # form importfrom django.contrib import messages #메세지 framework사용class UserLoginView(LoginView): # 로그인 template_name = 'user/login_form.html' authentication_form = LoginForm def form_invalid(self, form): mes ...

Django CBV 프로젝트 3. 사용자 인증 (회원가입)참고 사이트 구조# APP user/ ├── __init__.py # 앱 패키지 초기화 스크립트입니다. ├── admin.py # 장고 어드민 설정파일입니다. 어드민에 등록된 모델은 장고에서 자동 생성하는 어드민 페이지에서 관리할 수 있습니다. ├── apps.py # 앱 설정 파일입니다. └── migrations/ # 데이터베이스 마이그레이션 디렉토리. 장고 ORM은 모델 스키마의 변화가 생길 때마다 migration 파일을 생성하고 이것을 통해 스키마를 업데이트 합니다. migration 파일을 통해 협업자들과 함께 데이터베이스의 스키마를 동기화할 수 있습니다. ├── __init__.py # 마이그레이션 패키지 초기화 스크립트입니다. ├── models.py # 앱 모델 파일입니다. 회원의 모든 데이터를 저장할 데이터베이스를 장고 ORM을 통해 ...