1. Django, React 소개와 기본 설정, 셋팅

1. Django, React 소개와 기본 설정, 셋팅

남기면 좋잖아

Beautiful Hugo 2020. 3. 19. 19:13

A

A

A

A

A

A

Django

MVC 방식 Model, Template, View

React

SPA

원래 웹 문서의 기본 동작 방식 요청마다 모든 전체화면에 대하여 HTML/CSS/JavaScript 를 가져와 로딩함 웹 문서에 적합한 방식

SPA 방식의 화면 전환 JavaScript를 통해 화면 변경 > 화면 전환 느낌이 남 필요 시 백그라운드에서 JavaScript로 서버와 통신 웹 애플리케이션에 적합한 방식

자바스크립트 버전

ES6 (2015) class 와 같은 기능 지원 ES3, ES5 문법은 잊어라

Python, Django 설치

$ pyenv install 3.7.4 $ pyenv global 3.7.4 $ python -m venv drflib $ source drflib/bin/activate $ pip install "django~=3.0.0" $ django-admin --version

pyenv 로 시스템 python 버전을 python 3.7.4 버전으로 바꾼다.

workspace에 파이썬 가상환경을 설치하고 적용한다.

django 3.0 버전의 최신버전 설치

Django 프로젝트 생성

django-admin startproject [프로젝트명]

$ django-admin startproject drf_react # 프로젝트 생성 $ python manage.py migrate # 초기 DB 테이블 만들기 $ python manage.py createsuperuser # 수퍼유저 생성 $ python manage.py runserver 0.0.0.0:8000 # 서버 구동

manage.py 명령행을 통해 각종 장고 명령 수행

drf_react 프로젝트명으로 생성된 디렉터리. 함부로 수정하면 안됨 _init_.py : 모든 파이썬 패키지에 있다. 패키지를 임포트할 때의 임포트 대상 settings.py : 현재 프로젝트의 기본설정(django/conf/global_settings.py)을 덮어쓸 설정들. wsgi.py : 실서비스에서의 웹서비스 진입점 등 프로젝트 이름을 참조하고 있음

3.0 버전이상에서는 asgi.py 가 추가되었음 비동기통신 지원

Django 주요 구성요소

주요 기능

FBV : 함수로 HTTP 요청 처리

Models : 데이터베이스와의 인터페이스

Templates : 복잡한 문자열 조합을 보다 용이하게. 주로 HTML 문자열 조합 목적으로 사용하고 푸쉬 메세지나 이메일 내용을 만들때에도 편리

Admin 기초 : 심플한 데이터베이스 레코드 관리 UI

Logging : 다양한 경로 메세지 로깅

Static files : 개발 목적 정적파일 관리

Messages framework : 유저에게 1회성 메세지 노출

CBV : 클래스로 함수 기반 뷰 만들기

Forms : 입력폼, 입력값 유효성 검사 및 DB로의 저장

테스팅

국제화 & 지역화

캐싱

Geographic : DB의 Geo 기능 활용 (PostgreSQL 중심)

Sending Emails

Syndication Feeds (RSS/Atom)

Sitemaps

Djnaog 앱

재사용성을 목적으로 한 파이썬 패키지

settings.INSTALLED_APPS 에 등록해줘야 함

from http://dbza.tistory.com/28 by ccl(A) rewrite - 2020-03-19 19:20:18

댓글

댓글 쓰기

이 블로그의 인기 게시물

단위 테스트 환경 구축

단위 테스트 환경 구축 개발 노트/vue.js 단위 테스트 환경 구축 create-nuxt-app로 프로젝트를 설정할 때 단위 테스트 프레임워크를 선택할 수 있다. AVA, Jest 중에 선택할 수 있는데 React.js로 개발했을 때 사용한 Jest를 사용한 경험이 있었기 때문에 Jest로 선택했다. 참고로 Jest는 facebook에서 만들었다. 선택하지 않은 경우에는 테스트 관련 모듈을 수동으로 설치 및 설정해줘야 한다. 아래 모듈을 --save-dev로 추가하자. @vue/test-utils : vue 코드를 단위 테스트할 때 필요한 유틸을 제공한다. jest : 단위 테스트 작성에 필요한 matcher, teardown 등을 제공한다. mock, spy 방식도 안내하고 있으니 공식 사이트 를 방문해서 꼭 보도록 하자. vue-jest , babel-jest : vue, ES6 문법으로 작성된 코드를 jest 수행 시 변환해주는 플러그인 모듈입니다. 그리고 package.json에 scripts를 추가하자. "scripts": { ... "test": "jest" }, jest.config.js 파일을 생성한 후 아래 설정을 추가 하자. module.exports = { moduleNameMapper: { '^@/(.*)$': '/$1', '^~/(.*)$': '/$1', '^vue$': 'vue/dist/vue.common.js' }, moduleFileExtensions: ['js', 'vue', 'json'], transform: { '^.+\\.js$': 'babel-jest', '.*\\.(vue)$': 'vue-jest' }, collectCoverage: true, col
자세한 내용 보기

Coupang CS Systems 채용 정보: Front-end 개발자를 찾습니다!

Coupang CS Systems 채용 정보: Front-end 개발자를 찾습니다! PC/Mobile Web Front-end 개발 1997년, 초창기 아마존에 입사한다고 상상해보세요. 그 당시 누구도 e-commerce 산업이, 아마존이라는 회사가 지금처럼 성장하리라고는 생각하지 못했을 것입니다. 하지만, 그 당시 아마존을 선택한 사람들은 e-commerce 산업을 개척했고, 아마존을 세계적인 회사로 성장시켰습니다. 2016년 '아시아의 아마존'으로 성장하고 있는 쿠팡, 당신에게 매력적인 선택이 아닐까요? 1997년, 초창기 아마존에 입사한다고 상상해보세요. 그 당시 누구도 e-commerce 산업이, 아마존이라는 회사가 지금처럼 성장하리라고는 생각하지 못했을 것입니다. 하지만, 그 당시 아마존을 선택한 사람들은 e-commerce 산업을 개척했고, 아마존을 세계적인 회사로 성장시켰습니다. 2016년 '아시아의 아마존'으로 성장하고 있는 쿠팡, 당신에게 매력적인 선택이 아닐까요? Global Operation Technology: eCommerce에서 주문을 한 뒤 벌어지는 상황에 대해서 호기심을 가져보신 적이 있나요? Global Operation Technology는 상품을 고객에게 지연 없이 전달 될 수 있도록 하는 조직입니다. 매일 최첨단 소프트웨어 기술을 이용해 고객의 주문을 받고 상품을 어느 창고에서 출고 시킬지, 포장을 하나의 박스 또는 여러 개로 나눌 것인지, 어떤 배송 루트를 선택하고 어떻게 고객에게 배송 상태를 보여줄지 결정하는 시스템과 서비스를 개발 합니다. What Global Operations Technology does: CS and C-Returns System 적극적 고객서비스를 바탕으로 고객의 목소리를 통해 끊임없이 고객 에게 서비스를 제공하고 Andon 메커니즘을 통해 고객의 목소리를 회사 전체와 공유합니다. 그리고 고객 문제 해결과 구매 이후 벌어질 수 있는 고객
자세한 내용 보기

스토리북에서 스토리를 작성하는 방법

스토리북에서 스토리를 작성하는 방법 스토리북은 스토리의 집합이다. 각각의 스토리는 컴포넌트의 하나의 시각적 상태를 나타낸다. 기술적으로 얘기하면 스토리는 스크린에 렌더링될 수 있는 어떤것을 리턴하는 함수이다. 기본 스토리 버튼 컴포넌트의 스토리에 대한 기본 예제이다. import React from 'react'; import { action } from '@storybook/addon-actions'; import Button from './Button'; export default { component: Button, title: 'Button', }; export const text = () => Hello Button; export const emoji = () => ( 😀 😎 👍 💯 ); named export(text, emoji)를 하게 되면 스토리북에서 스토리로 정의된다. default export는 스토리 그룹(Button)에 대한 메타데이터를 정의한다. export default { component: Button, title: 'Button', }; 위에서 이런 메타데이터를 정의했는데 이러한 포맷을 CSF(Component Story Format)이라고 한다. 링크 타이틀은 유니크해야한다. 스토리북 5.2 버전 이전에는 스토리를 정의하기 위해서 storiesOf API를 사용했어야 했다. 하지만 이제는 리액트 네이티브를 제외하고 모든 프레임워크에서 CSF 포맷을 사용할 수 있게 되었다. 스토리의 위치 • └── src └── components └── button ├── button.js └── button.stories.js 유지보수를 쉽게 하려면 스토리북 파일 (.stories.js)을 컴포넌트의 위치와 동일하게 하는게 좋다. 다른 방법도 두개 더 소개하고 있는데 그냥 이렇게 하는게 젤 깔끔한것
자세한 내용 보기