2계층 구조
과거 대부분의 웹사이트는 2계층 구조로 개발되어있다. 2계층 구조란, 화면이 보여지는 클라이언트(Client)와 데이터베이스(DB)가 물리적으로 분리되어 있는 것을 뜻하며 클라이언트에는 UI(User Interface)와 비지니스 로직이 함께있는 구조다.
비교적 쉽고 빠르게 개발할 수 있고, 애플리케이션 구조가 단순하여 초기 서비스나 웹사이트들이 많이 사용하는 구조다. 다만 클라이언트 속도 문제, 비즈니스가 복잡해지거나 비대해지면 관리하기가 어렵다.
3계층 구조
2계층 구조와 3계층 구조의 가장 큰 차이점은 클라이언트 안에 있는 비지니스 로직(애플리케이션)이 분리된다는 점이다. 3계층 구조로 설계하게 되면서 클라이언트는 프론트엔드 개발자, 비지니스 로직은 백엔드 개발자가 담당하게 되어 역할 분담이 이루어진다.
가장 큰 장점으로 UI와 비즈니스 로직이 분리되어 있어 애플리케이션을 배포할 때 UI와 비즈니스 로직을 각각 배포할 수 있다는 점이다.
웹 서비스 역사
1세대 웹 서비스
1세대 웹 서비스는 단순한 정보 제공 위주였다. 특별한 기능이 많이 않으며, 무엇보다 User Interaction이 많이 요구되지 않는다.(HTML,CSS 자체가 정적) 어떻게 보여지는가에 대한 것이기 때문에 로직(동적)이 없다.
2세대 웹 서비스
2세대 웹 서비스는 웹서비스들이 점점 발전함에 따라 단순한 정적 페이지가 아닌 다이나믹한 요소들이 요구었다. 웹 기반의 언어인 자바스크립트가 출현하게 됨으로서 서버와 필요한 데이터만 주고 받음으로 dynamic한 User Interaction을 구현하게 되었다.
그러나 아직 JavaScript는 일부에서만 사용되었고, 통용되는 API의 개념이 아직 널리 사용되지 않았다. -> 동일한 서버에서 HTML, JavaScript(프론트영역)/데이터(백엔드 영역)둘다 전송
3세대 웹 서비스(프론트와 백의 분리)
3세대 웹 서비스는 동적인 기능이 주가 되버렸다 -> 자바스크립트가 주가되고 그 안에 일부 HTML, CSS가 포함.
이게 바로 SPA -> 기존의 방식대로 서버가 페이지 구성에 필요한 모든 요소(HTML, JavaScript, Data)를 매번 전송하는 것이 아니라, 파일을 처음 한 번만 송수신 후 실시간 데이터만 주고 받는다. 제일 처음 전송된 단일 HTML 페이지에 포함되어 있는 JavaScript에서 필요한 데이터를 API 서버로부터 호출하여 필요한 화면을 dynamic 하게 새롭게 구성해주는 방식.
"어라라? 명확히 두 개로 나눌 수 있겠다!" -> 프론트 엔드와 벡엔드가 나뉘게 됨
Frontend 와 Backend가 구조적으로 분리가 되면서, Frontend 서버와 Backend API 서버도 분리가 되며 그에 따라 Frontend 개발과 Backend 개발 업무가 분리가 되는 구조로 발전된다.
참고 : 웹 서비스 발전과 역사
