장고와 리액트, 백엔드와 프론트

프론트 엔드와 백엔드란

프론트엔드란

브라우저 위에서 돌아가는것들이다.(= 사용자가 직접적으로 접하는 부분이다.)

2018년에 유행하는 개발방식은 SIngle-Page-App(이하 SPA)을 제작하는것이며, 이는 개발의 난이도와 유지보수의 용이성 때문이다. (이해가 안간다면 그냥 그런게 있구나 하고 넘겨라)

기존에는 jQuery라는 라이브러리를 활용하여 직접 자바스크립트 코드를 전부 짰고, HTML을 작성하는것이 전통적인 방법이었다. jQuery는 서버와 통신하는 여러 코드를 짜고, 화면 안의 내용을 바꾸는 것들을 좀 더 쉽게 할 수 있도록 여러 함수들을 모아둔 라이브러리 이다.

그러나, '유지보수의 어려움'과 '개발의 불편함'이라는 커다란 문제에 부딫히게 되었고,

ReactJS, Vue.JS, Angular 같은 프레임워크가 등장하게되었다.
이들은 최신 문법의 JS(ES2015, ES6, ES6+ 등...)를 사용해서 프론트 엔드의 개발을 조금 더 편하게 도와주는 것들이다. Html 코드를 직접 작성할 필요가 없게 해준다!

이렇게 만들어진 앱을 SPA(Single Page App)라고 부른다. 페이지는 하나지만, 보여주는 내용은 하나가 아니다. 무슨 말이냐면, Instagram 을 생각하면 쉽다.
Instagram 은 Django 와 ReactJS 를 활용한 가장 유명한 사이트다. 페이지 자체는 하나지만, 안의 화면을 js코드를 이용해 화면의 구성을 바꾸는것이라 이해하면 쉽다.
Instagram의 버튼을 누르고 자세히 관찰하면, 페이지의 주소는 바뀌지만 새로고침이 되지는 않는다.
이것이 SPA이다.

백엔드란

서버단에서 도는 코드들을 말한다.
단순히 웹서버 뿐만 아니라, 서버에서 도는 앱이 필요한데, Django, Ruby On Rails, NodeJS 등이 그것.

예를 들어, 프론트엔드에서 "exlock의 정보 보기"를 누르면 프론트엔드에서는 백엔드를 향해 요청을 보내고, 백엔드는 자신의 DB안에서 exlock의 정보를 반환하는 기능을 담당하는것이다. 이후 프론트엔드는 받은 내용을 유저에게 브라우저를 통해 보여주는것이고 말이다.

백엔드의 웹 서버로는 nginx 나 apache 가 제일 유명하다.
그러니까, 웹서버에서 요청을 받으면, 그 웹서버가 백엔드쪽으로 요청을 넘겨서 어떻게 처리할지를 백엔드가 정하는것이다.
Django도 자체 웹서버가 있다. (python3 manage.py runserver)
그러나 이는 개발단계에서만 권장된다. 밑의 '배포' 참고.

프론트엔드로 reactJS 나 Vue.JS, Angular 등으로 짠 코드를 배포 하려면 *번들러와 *트랜스파일러가 필요하다.

reactJS 에서는 create-react-app 이라는게 있는데, 프론트엔드 코드를 생성하고 개발을 위한 환경을 구성하는것을 도와준다. 하지만 배포를 할때에는 보통 번들러와 트랜스파일러를 별도로 사용한다. 프로그래머가 직접 조절 가능한 부분이 더 많기 때문이다.

번들러는 webpack 이 가장 유명하다. 설정해야 할 것이 많다.
설정이 거의 필요없는 parcel 이라는 모듈도 뜨고 있다.
트랜스파일러는 babel 이 가장 유명하다.

*번들러 : 정적파일(css, js, html, media)들을 하나로 바꾸어, http request를 최소화하게 도와준다.(=속도 상승)
*트랜스파일러 : ES2015이후의 자바스크립트문법을 현재 대부분의 브라우저에서 동작 할 수 있도록 코드를 바꿔준다.

배포

번들러를 통해 빌드된 정적 파일(css, js, media)들을 Django의 동적파일 기능을 이용해 서비스 하는 방법은 다음과 같다.

1. Django 의 웹 서버 기능을 이용한다.
2. wsgi(Web Server Gateway Interface)를 이용해 apache 나 nginx 를 쓴다.

"당연히 1번이 설정이나 구동면에서 훨씬 편하지 않을까?"

맞다. 하지만,
Django는 파이썬으로 짜여졌다.
apache 나 nginx 는 C와 C++로 짜여졌다.

간단히 말해 전자의 방법이 apache 나 nginx 를 써서 서버를 돌리는것보다 성능이 떨어진다는 소리다. 많이 불안정하다.

그렇기 때문에, python3 manage.py runserver로 배포하면 안된다.
(이 블로그를 참고 했다.)

gunicorn+nginx조합을 사용하려한다면. 이에 대한 링크는 여기.

이상 내가 큰 그림을 보지 못해 이해하는데 어려움을 겪었던 웹 개발 컨셉에 대한 정리를 마무리 하도록 하겠다.