반응형 Django9 [Django] 초급 React + Django 간단한 익명 블로그 만들기 9 pagination, response data useEffect 디펜던시 활용하여 테이블 맵핑 + 렌더링 테이블을 불러오는동안의 보여줄 로딩, 테이블의 데이터가 있을때와 없을때 다르게 보여줄 tbody등을 추가, 수정합니다. Home.js import React, { useState, useEffect } from 'react'; import axios from 'axios'; import '../pages_css/Home.css'; import BoardModal from './BoardModal'; import Paging from '../utils/Paging'; const Home = () => { // Modal const [modal_is_open, setModalIsOpen] = useSta.. 2021. 11. 27. [Django] 초급 React + Django 간단한 익명 블로그 만들기 8 react-modal 설치, ajax 응답 성공/실패 핸들링, 백엔드 새로운 model 생성하여 insert react에서 인서트 할 수 있는 모달화면을 정의하고 응답에 따라 핸들링 하겠습니다. 일단 npm install react-modal을 사용하여 패키지를 내려받습니다. Home.js import React, { useState } from 'react'; import '../pages_css/Home.css'; import BoardModal from './BoardModal'; const Home = () => { const [modal_is_open, setModalIsOpen] = useState(false); return ( Home setModalIsOpen(true)}> NEW ); }.. 2021. 11. 26. [Django] 초급 React + Django 간단한 익명 블로그 만들기 7 psycopg2 설치, postgresql DB 연동, core 앱 생성, migrations 관리, models 정의, model object의 query, 터미널에서 http 요청보내기 psycopg2 Psycopg는 Python 프로그래밍 언어용으로 가장 널리 사용되는 PostgreSQL 데이터베이스 어댑터입니다. 주요 기능은 Phyton DB API2.0 사양의 완전한 구현과 스레드 안전성(여러 스레드가 동일한 연결을 공유할 수 있음)입니다. 그것은 많은 커서를 생성 및 파괴하고 많은 수의 동시 "INSERT" 또는 "UPDATE"를 만드는 다중 스레드 응용 프로그램을 위해 설계되었습니다. 클라이언트 측 및 서버 측 커서, 비동기 통신 및 알림, "COPY TO/COPT FROM" 지원이 특징입니.. 2021. 11. 25. [Django] 초급 React + Django 간단한 익명 블로그 만들기 6 PostgresSql Database 생성, Sequence 생성, Table 생성 워크스페이스는 DBeaver을 사용하였습니다. DBeaver가 설치안되셔있는 분들은 설치하시면 되겠습니다. 구글링 하면 금방나옵니다. 맨왼쪽 위 상단의 새 데이터베이스 연결을 클릭하여줍니다. 포스트그레스에스큐엘을 클릭합니다. 패스워드는 postgres로 하시면 될것같습니다. 생성이 되었습니다. 저는 이미 1개가 이미 같은이름으로 있어서 postgres 2로 이름이 정해졌습니다. SQL 편집기를 열어줍니다. 쿼리문을 실행합니다. 커서를 문장위에 올려주고 ctrl + enter해서 실행할 수 있습니다. 시퀀스 생성, 테이블을 생성하기때문에 2번 질의해야 합니다. CREATE SEQUENCE seq_board START 1; .. 2021. 11. 24. [Django] 초급 React + Django 간단한 익명 블로그 만들기 5 djangorestframework 설치, REST API 호출, useState와 uesEffect 사용, CORS 이해, django-cors-headers 설치, 양단간의 통신 DjangoRestFramework 웹 API를 구중하기 위한 강력하고 유연한 툴킷 OAuth1a 및 OAuth2용 패키지를 포함한 인증 정책 ORM 및 비ORM 데이터소스를 모두 지원하는 직렬화 우선 pip install djangorestframework 명령어를 실행하여 패키지를 받아줍니다. pip freeze 명령어를 실행하여 패키지의 버전을 확인할 수 있습니다. python3 manage.py runserver 명령어 실행시 python manage.py migrate 명령어를 사용하여 적용이 안된 마이그레이션 항목.. 2021. 11. 23. [Django] 초급 React + Django 간단한 익명 블로그 만들기 4 React-router-dom 설치, root 태그 렌더, Route 지정, SPA구성, 사이드바 제작 SPA(Single Page Application) : 스파 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션 또는 웹사이트 동적으로 다시 작성함으로써 연속되는 페이지들 간의 사용자 경험의 간섭을 막아주고, 애플리케이션이 더 데스크톱 애플리케이션처럼 동작하도록 만들어줌 react-router-dom 웹 애플리케이션에서 React Router를 사용하기 위한 바인딩이 포함되어있음 React에 프로젝트에 기본 내장되어 있지 않음으로 react-router-dom를 추가해야합니다. 간단하게 SPA를 만들어보겠습니다. router가 들.. 2021. 11. 23. [Django] 초급 React + Django 간단한 익명 블로그 만들기 3 python venv 생성, pip로 django 설치, venv 활성화, Django server 구동 Django 파이썬으로 작성된 오픈 소스 웹 프레임워크 고도의 데이터베이스 기반 웹사이트를 작성하는 데 있어서 수고를 더는 것이 장고의 주된 목표이다. 장고는 컴포넌트의 재사용성과 플러그인화 가능성, 빠른 개발 등을 강조하고 있다. 우선적으로 파이썬을 버전을 확인합니다. 설치가 안되어 있는 경우 python.org(pip3 툴도 함께)에서 파이썬3를 쉽게 설치할 수 있습니다. 따로 분리하는것이 좋겠지만 anonymous_blog가 포함된 같은 워크스페이스에 만들도록 하겠습니다. python3 가상환경을 생성합니다. python3 -m venv [가상환경 이름] 생성된 가상환경 디렉터리 안으로 이동하면.. 2021. 11. 23. [Django] 초급 React + Django 간단한 익명 블로그 만들기 2 Node.js 설치, React Project 생성, Node.js의 Runtime에서 React Project 구동 Node.js Node.js를 설치하는 이유는 Javascript의 런타임 구동하기 위해서 입니다. V8(자바스크립트 엔진)으로 빌드된 이벤트 기반 자바스크립트 런타임이다. Node.js는 반응형 웹 React뿐 아니라 Vue, Angular 등 에서 활발하게 진행된다. V8 웹 브라우저를 만드는데 기반을 제공하는 오픈 소스 자바스크립트 엔진 구글 크롬 브라우저와 안드로이드 브라우저에 탑재되어 있다. V8은 자바스크립트를 바이트코드로 컴파일하고 실행하는 방식을 사용한다. 우선 VSCode에서 터미널을 볼 수 있도록 하겠습니다. VSCode 하단에 창이 생깁니다. 우측의 zsh을 사용합니다.. 2021. 11. 23. [Django] 초급 React + Django 간단한 익명 블로그 만들기 1 간단한 익명 블로그에 대하여 사용할 언어, 라이브러리 Javascript Runtime Environment : node.js Javascript Package Manager : npm Frontend Framework : React Forntend Language : Javascript Web Application configuration: SPA Backend Framework : Django Backend Language : python Database : PostgreSql Algorithm : SHA256 프로젝트 기능 익명 글/댓글 쓰기, 수정, 삭제 조회 구축 Frontend Backend DB 블로그 순서 및 성과 Node.js 설치, React 프로젝트 생성, Node.js 런타임에서 R.. 2021. 11. 23. 이전 1 다음 반응형
