Django, React란 무엇일까???

출처 : https://www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EC%9E%A5%EA%B3%A0-%EC%9B%B9%EC%84%9C%EB%B9%84%EC%8A%A4/dashboard

 

장고(Django)를 배우기 시작한 입문자이시거나, 또는 배우고 싶은 생각이 있으신 분은 위 출처의 강의를 적극 추천드립니다!!!

 

 

현재 웹프론트엔드 개발과 스마트폰 애플리케이션 개발이 중점이 되면서 서버에 대한 API 서버가 필요해짐

이 API 서버를 개발할 때 바로 백엔드, 즉 Django가 필요해짐

 

웹서비스가 필요한 이유?

• 서버의 역할을 하기때문에
• 모든 서비스의 근간이기 때문에

 

 

웹서비스들을 만들때마다 반복되는 것들을 표준화 해서 묶어놓은 것 즉 반복을 줄여주는 것이 각 언어의 웹프레임워크이다. (Django, Flask)

• Django : 백엔드 개발에 필요한 거의 모든 기능을 제공(입문자에게 매우 적합)하고 중복된 작업을 최대한 줄여주는 프레임워크
• Flask : 백엔드 개발에 필요한 일부분의 기능을 제공 ORM으로서 SQLAlchemy를 주로 사용

 

 

Django의 장점

• 파이썬을 사용한다는 것 즉 언어 하나를 통해 여러 작업을 할 수 있기 때문에 가성비가 좋다는 것(웹서비스, 머신러닝, 웹크롤링등등)
• 커뮤니티가 활성화 되어있다는 것
• 풀스택 웹프레임워크라는 것
• 백엔드 개발에 필요한 거의 모든 것을 Django에서 직접 지원
• API 개발에 필요한 거의 모든 것을 django-rest-framework에서 지원

 

 

강사님이 추천해주신 조합

• Django + React + typescripts

 

 

장고는 MTV 프레임워크이다.

• Model -> 장고의 Model #데이터베이스 SQL 쿼리를 생성/수행
• View -> 장고의 Template #복잡한 문자열 조합을 도와준다.
• Controller -> 장고의 View #HTTP 클라이언트로부터의 요청을 처리하는 함수

 

 

강사님의 조언

• 백엔드는 서비스의 중심이다. 백엔드 / 서비스운영을 먼저 탄탄하게 하고나서, 그 후에 프론트/앱을 고민하는 것이 순서에 맞다.

 

 

강의에서 사용할 Skill

• 웹 서비스 및 API : 파이선 / Django
• 웹 프론트엔드 : 리액트와 jQuery
• 인프라 : Paas(Platform as a Service) 혹은 Serverless 플랫폼

 

 

Paas란? 

• 하드웨어 및 애플리케이션 소프트웨어 플랫폼이 제3사를 통해 제공되는 클라우드 컴퓨팅의 한 가지 형태입니다. 주로 개발자와 프로그래머가 사용하는 PaaS는 보통 해당 프로세스와 관련된 인프라 또는 플랫폼을 구축하고 유지관리할 필요 없이 자체 애플리케이션을 개발, 실행 및 관리 할 수 있도록 해줍니다.
• PaaS 제공업체는 자체 인프라에서 하드웨어와 소프트웨어를 호스팅하고 이러한 플랫폼을 사용자에게 통합 솔루션, 솔루션 스택 또는 인터넷을 통한 서비스로 제공합니다.

출처 : https://www.redhat.com/ko/topics/cloud-computing/what-is-paas

 

 

 

데코레이터 문법이란?

• 클래스에서 메서드를 만들 때 @staticmethod, @classmethod, @abstractmethod 등을 붙였는데, 이렇게 @로 시작하는 것들이 데코레이터입니다. 즉, 함수(메서드)를 장식한다고 해서 이런 이름이 붙었습니다.

출처 : https://dojang.io/mod/page/view.php?id=2427 

 

 

 

현재 시대는 웹 문서 시대에서 웹 애플리케이션의 시대 바뀌었다.

• 웹문서에서는 컴포넌트나 링크를 클릭할 때 페이지가 바뀌는 식으로 이벤트가 일어났지만, 웹 어플리케이션에서는 페이지가 바뀌지않고 UI적 변화만 일어난다.

 

 

웹문서의 기본 동작에서의 화면 전환시에는

1. 서버로부터 새로운 화면에 대한 HTML,CSS,JS를 받아옴
2. 전체 화면을 새로 그린다.

 

 

SPA 방식의 화면 전환

1. JS를 통해 화면을 부분적으로 변경한다.
2. 필요시에 백그라운드에서 JS로 서버와 통신을 한다.

 

 

SPA란?

• 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이 SPA이다. 뭔가를 클릭하거나 스크롤하면, 상호작용하기 위한 최소한의 요소만 변경이 일어나게 하는 것

출처 : https://www.huskyhoochu.com/what-is-spa/

 

 

 

최신 자바스크립트를 사용하고 싶은데 브라우저 호환성이 걱정된다면

• module bundler (webpack 등)을 사용해서 코드 변환 ( Transpiling )하면 된다.

 

 

트랜스파일링( Transpiling )이란?

• 코드를 변환하는 것인데, 최신 JS 버전을 사용하더라도 낮은 버전의 JS를 지원하는 브라우저 지원을 위해 낮은 버전의 JS코드로 변환하는 트랜스파일링이 필요 ex) babel

 

 

React에서 babel 사용을 통해 트랜스 파일링하기

• https://devdongbaek.tistory.com/35?category=1023659

 

 

React란?

• React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여주고, 데이터가 변경될 때 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.

 

 

React에 대해서 더 자세히 알아보고 싶으신 분들은 동백의 Tistory 글을 살펴보시는 것도 좋은 선택이 되실 것 같습니다!

• https://devdongbaek.tistory.com/category/%EC%A7%80%EC%8B%9D%20%EB%85%B8%ED%8A%B8/%EB%85%B8%EB%A7%88%EB%93%9C%EC%BD%94%EB%8D%94%28%20ReactJS%20%EA%B0%95%EC%9D%98%20%29

'지식 노트/노마드코더( ReactJS 강의 )' 카테고리의 글 목록