한 번쯤은 궁금해 해 봤을 것이다. 내가 django 개발부터 시작해서 궁금했던 것일지도 모르겠다. 프론트엔드와 백엔드가 어떻게 분리되어 동작하고, 그 원리는 무엇일까?
그동안 내가 해왔던 개발
나는 작년 django를 사용하여 프론트엔드와 백엔드가 분리되어 있지 않은 WebApplication을 개발했다.
html, css, js, jquery, django를 사용하여 개발했고, 서버쪽 templates 폴더와 static, css, image, js 폴더에 프론트엔드에서 사용하는 내용을 담았다.
프론트엔드 팀 친구들이 html에 css를 발라서 주면, django의 template 에 사용하는 문법에 맞추어 동적으로 데이터가 들어가도록 일일이 html을 수정했다.
뭐가 문제야 고생 좀 하면 되지
사실 이 방법은 백엔드와 프론트엔드의 분리가 힘들다는 점 외에도 다른 문제가 있다. 생각해보자.
위의 방식은 페이지를 이동할 때마다 서버에서 페이지를 전송한다. 이 페이지에서 저 페이지, 그 페이지, 저기 저 페이지로 이동할 때마다 완전히 새로운 페이지를 새롭게 만들어서 서버에서 보내준다는 소리다.
또한, 점차 기술이 좋아지며 한 페이지의 용량이 무거워지고 있다.
그래서 SPA가 뭔데이렇게질질질질끄세요
SPA Single Page Application 는 위와 같은 눈물나는 상황을 벗어나게 해준다.
SPA는 웹 사이트의 전체 페이지를 하나의 페이지에 담는다.
엥?
다음 그림을 주목! 해보자.
MPA는 Multiple Page Application을 뜻하며, 그동안 내가 해왔던 개발 방식이다.
이렇듯, SPA 방식의 웹 사이트에서는 전체 페이지를 하나의 페이지에 담아, client에게 요청이 오면 서버측 도움 없이 알아서 잘 만들어 보여준다.
SPA framework에는 React, Vue.js 등이 있다.
아무튼
SPA 방식의 framework를 사용하면 다음과 같은 장점이 있다.
- 처음 rendring할 때 모든 페이지를 다 들고 오기 때문에, 페이지를 이동할 때 빠르다
- 페이지를 이동할 때도, 사용자 입장에선 페이지를 이동하는 것처럼 느껴지겠지만 사실 하나의 페이지에서 내용만 바뀌는 것이기 때문에 화면의 깜빡임이 없다
즉, 자연스러운 UX를 제공한다.
프론트에 보여지는 데이터들은 어떻게 하는데요?
서버에서 프론트 리소스를 보내지 않아도 가지고 있는 걸로 알아서 잘 만들어 쓴다는 점은 이해했다.
그렇다면 프론트와 백엔드는 어떻게 소통하는지 의문이 생길 것이다.
그 열쇠는 바로
API 이다.
프론트가 데이터를 채워넣어야 하는 부분이 있을 때, Axios, Ajax, Fetch 같은 HTTP 통신을 이용해 백엔드 서버에다가 API 요청을 보내는 것이다.
그 response를 이용하여 백엔드와 프론트가 소통할 수 있는 것이다.
이러한 맥락으로 서버를 API 서버라고 부르기도 한다.
따라서 백엔드 개발을 하고 있는 내 입장에서는
SPA 의 장점은 다음과 같다.
- 프론트와 백엔드를 확실히 분리 해 개발할 수 있다.
- 웹과 앱에서 서버를 동시에 사용 할 수 있다.
마지막으로
그렇다고 SPA가 마냥 좋기만 한 것은 아니다.
프론트 리소스들을 처음 한 번만 가져오기 때문에 생기는 장점도 크지만, 그만큼 초기 로딩이 오래 걸리며 SEO(검색 엔진 최적화)도 힘들다고 한다.
와! 진짜 감사합니다.. 너무 유용한 정보가 될 것 같아요.. 굿입니다! 깔끔한 정리 감사해요