SPA란? 프론트엔드, 백엔드는 왜 분리되었을까?

SPA란

-SPA는 Single Page Application의 줄임말

-3세대 웹에서 등장

-​서버로부터 완전한 새로운 페이지를 불러오지 않고(기존 방식) 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트

-초기 페이지 로드 후 서버에서 더 이상 HTML을 보내지 않고, 처음에만 다운로드로드 하면 됨

 

장점

-화면 전체를 모두 바꿀필요가 없어짐으로서 사용자의 사용이 편해짐

-반응이 빠른 프론트엔트 구축을 빠른 시간안에 할 수 있게 됨. 분리된 설정을 통해 개발자는 기본 백엔드 기술과 완전히 독립적으로 프런트엔드를 구축, 배포 및 실험할 수 있게됨

 

대표적인 SPA 3대장: React, Vue, Angular

---

프론트엔드, 백엔드가 분리된 배경

-웹을 사용하는 사용자의 수가 급증 하면서 서버 과부하가 생기게 됨

-User interaction이 폭발적으로 증가하면서 인터페이스에 대한 사용자의 요구도 많아짐 

 

웹개발에서 프론트엔드 백엔드의 역할 예시

-둘 다 

• Git , Mercurial 또는 Subversion 과 같은 버전 제어 도구
• FTP 또는 rsync 와 같은 파일 전송 도구 및 프로토콜

-프론트엔드 중심 

• HTML , CSS , JavaScript 와 같은 마크업 및 웹 언어 및 Sass 또는 jQuery 와 같은 언어에서 일반적으로 사용되는 보조 라이브러리
• 비동기 요청 처리 및 AJAX
• 단일 페이지 애플리케이션 ( React , Angular 또는 Vue.js 와 같은 프레임워크 사용 )
• 웹 성능 (컨텐츠가 있는 가장 큰 페인트, 상호 작용 시간, 60FPS 애니메이션 및 상호 작용, 메모리 사용량 등)
• 반응형 웹디자인
• 브라우저 간 호환성 문제 및 해결 방법
• 헤드리스 브라우저 를 사용한 종단 간 테스트
• Webpack 또는 Gulp.js 와 같은 도구를 사용하여 JavaScript 파일을 변환 및 번들하고 이미지 크기를 줄이는 자동화 구축
• 검색 엔진 최적화
• 접근성 문제
• GIMP 나 Photoshop 과 같은 이미지 편집 도구의 기본 사용법
• 사용자 인터페이스

-백엔드 중심 

• PHP , Python , Ruby , Perl , Node.js 와 같은 스크립팅 언어 또는 C# , Java 또는 Go 와 같은 컴파일된 언어
• 사용 중인 언어에 대한 자동화된 테스트 프레임워크
• 애플리케이션 데이터 액세스
• 애플리케이션 비즈니스 로직
• 데이터베이스 관리
• 확장성
• 고가용성
• 보안 문제, 인증 및 권한 부여
• 소프트웨어 아키텍처
• 데이터 변환
• 백업 방법 및 소프트웨어

 

참조

싱글 페이지 애플리케이션 - 위키백과, 우리 모두의 백과사전

What is a Single Page Application? | Bloomreach

Frontend and backend - Wikipedia