아크위드 스타터 템플리트를 이용한 새로운 기능 개발 방법 - arkwith7/arkwith-app-template GitHub Wiki

백엔드(Back-End)와 프런트엔드(Front-end)연계 방안

Python Django 백엔드와 React 프런트엔드를 연계하는 패턴은 크게 다음 두가지 방식을 고려해 볼 수 있다

  1. 백엔드 Django의 여러 App중의 한 형태로 프런트엔드 React가 존재 : 하나의 Django HTML 템플리트가 실행되고 여기에 프론트엔드 React App이 적재됨

  • 개발 난이도는 중간 정도로

  • 사이트나 제품의 디지털 마케팅을 위한 ‘검색 마케팅(SEM, Search Engine Marketing)’에서 사용되는 검색엔진 최적화(SEO, Search Engine Optimization)적용이 필요한 경우

  • 사용자 화면이 AJAX활용과 같은 서버와 인터페이스를 많이 필요로 하는 서버와 사용자 상호 작용 기능이 많을경우

  • 페이지들이 세션 기반 인증을 사용하여야 경우

  • 관련 Blog :

    • Django + React 로 첫 화면 띄워보기
    • Django REST with React
  1. 백엔드 Django가 Django REST로 독립 실행 형 API이며, 프런트엔드 React는 독립 실행 형 SPA(Single Page Application)

  • 개발 난이도는 높은 편이고 인증을 위해서는 JWT(Json Web Token)을 이용하여야 하며,

  • 백엔드와 프런트엔드가 독립적이므로 웹 어플릐케이션 뿐만 아니라 스마트폰용 앱도 개발 해야하는 경우,

  • 벡엔드 서버가 클라우드 서비스 API처럼 운영되고 프런트엔드가 응용 어플리케이션으로서 SEO가 적용 될 필요가 없을 경우

  • 관련 Blog :

    • Creating websites using React and Django REST Framework
    • Django Rest Framework with React Tutorial

현재 아크위드 스타터 템를리트는 첫번째 방식으로 구현되어 있으며 두번째 방식은 브랜치를 추가하여 개발 진행 할 계획입니다.

백엔드(Back-End) 개발

백엔드 개발은 데이타 모델을 중심으로 이루어 진다. 먼저 모델을 추가하고 이 모델을 이용 시리얼라이져를 작성하며, 모델을 위한 API를 작성하여 Django Rest Framework의 router에 등록해 준다.

프런트엔드 개발

React, 그리고 redux와 redux-thunk를 이용 하여 벡엔드에서 구현된 API를 프런트엔드로 연계하여 구현한다. 먼저 React Component 를 작성하고, Redux의 Action과 Reducer를 작성한다.