프론트와 백 모두 하나의 목표를 달성하기 위해 함께 작동한다.
사용자가 브라우저를 웹 사이트 URL 중 하나에 연결하면 브라우저가 서버에 하나 이상의 요청을 보내고 브라우저가 서버로부터 응답을 받기 위해 대기한다.
모든 응답은 사이트의 일부를 렌더링하는 데 사용된다.
사용자는 브라우저가 페이지를 렌더링하기를 기다린다.
사용자는 페이지와 상호 작용한다.(더 많은 요청을 보내거나 더 많은 데이터를 얻고 새로운 정보를 표시)
이 모든것은 요청을 보내고 응답을 받음으로 가능하게 한다.
용어 정리
서버
브라우저 요청이 도착하는 주상적인 “사물”.
백엔드 요청은 서버에 도착하여 결국 백엔드 코드로 전달된다.
백엔드
웹 앱에서 사용자에게 직접 보이지 않는 부분.
요청을 받고 사용자의 브라우저로 다시 전송되는 데이터를 준비한다.
서버에서 실행되도록 작성되었으며 사용자 컴퓨터에서 실행되지 않는다.
프론트엔드
웹 브라우저에서 사용자 브라우저가 직접 사용하도록하는 부분.
브라우저 내에서 실행되는 코드 또는 페이지를 렌더링하는 동안 해석되는 마크 업이다.(javascript 포함)
브라우저
사용자의 장치에서 실행되는 응용 프로그램.
HTTP 요청을 보내고 응답을 받고, 받은 데이터를 처리 한 후 이를 사용하여 볼 수 있는 페이지를 렌더링한다.
사용자 측의 모든 통신은 브라우저를 통해 이루어진다.
브라우저는 백엔드와 언제 통신할까?
백엔드에 브라우저에서 보낸 HTTP 요청이 도작할때.
요청에는 HTTP 헤더 또는 본문에 데이터가 포함될 수 있다.
새로운 데이터를 요청하거나 사용자가 만든 데이터를 백엔드로 전송하는 것이 목적일 수 있다.
HTTP 요청은 사용자 브라우저 내부에 구성되어 전송되고, 각 요청에 대한 응답이 있으며 이러한 응답은
백엔드에 다시 도착하고 사용자의 브라우저에 다시 도착한다.
서로 무엇을 보내고 받는가?
백엔드는 HTML 형식으로 응답, JSON 형식의 데이터, 상태 코드와 헤더
프론트엔드는 본문이 없는 간단한 HTTP 요청, JSON 형식의 데이터
통신 시나리오
정적 컨텐츠
브라우저가 http://www.google.com을 요청하면 백엔드의 웹 서버에서 처리한다.
요청은 해당 리소스에 대한 GET이며 백엔드는 파일 내용을 포함하는 응답으로 응답한다.
웹 서버는 이 작업을 통해 매우 빠르며 웹 응용 프로그램은 다소 어색하다.
django
브라우저 쪽에서는 정적 컨텐츠를 요청하는것과 같다.
브라우저는 백엔드의 어느 부분이 요청을 처리할짖 신경 쓰지 않고 응답을 원한다.
요청이 서버에 도착하고 웹 서버로 전달되고 웹 서버는 요청을 앱 서버로 전달한다.
웹 서버는 단순히 구성된 작업을 수행한다.
django는 요청을 받아 처리하고 데이터베이스에서 일부 데이터를 찾아 응답을 보낸다.
HTML은 응답으로 패키지되고 HTTP 본문 내부에 포함한다.
브라우저는 응답을 받고 HTML에서 DOM을 렌더링한다.
JS와 상호작용
브라우저가 페이지를 렌더링하고 JS 코드를 실행한다.
버튼을 누를 때 요소를 동적으로 숨기거나 표시하거나 백엔드 와 통신을 수행할 수 있다.
JS 코드는 백엔드로 더 많은 요청을 보내도록 요청할 수 있다.
최신 데이터를 요청할 수 있으며 JS 코드는 페이지를 완전히 다시 로드하지 않고 도착한 후에 처리한다.
JS 코드에 의해 트리거되는 HTTP 요청은 일반적으로 백그라운드에서 이루어진다.
이전과 동일한 페이지가 있지만 페이지를 다시 로드하지 않고도 브라우저 이벤트를 트리거 할 수 있다.
따라서 UX 흐름을 방해하지 않으면서 화면이 깜빡이지 않고 새 데이터가 매끄럽게 표시되므로 지속적인 사용자 경험이
가능하다.
SPA
단일 페이지 아키텍처를 사용하면 정적 페이지에 많은 JS가 로드된다.
초기 요청에는 백엔드 코드가 사용되지 않는다.
HTML과 JS가 브라우저에 도착하면 JS가 실행되고 서버에 DATA를 요청하기 시작한다.
일반적으로 JSON 응답 형식이다.
정적 페이지 내의 JS코드는 백엔드에서 데이터를 로드하고 DOM은 빈 페이지부터 시작하여 해당 데이터를 기반으로
동적 빌드되고 사용자에게 표시된다.
서버측 렌더링
SPA 경우 브라우저는 처음에 일부 JS가 링크된 빈 페이지를 수신했다.
결과적으로 이것은 검색 엔진이 싫어한다.
초기 HTML, JS는 서버에 로드되어 HTML로 사전 렌더링 되었지만 프론트엔드 기술을 사용했다.
본질적으로 백엔드에는 한동안 브라우저인 것처럼 가장하는 부분이 있다.
프론트엔드 코드의 JS 부분을 실행하여 백엔드 코드를 요청하고 HTML 사이트를 빌드한다.
SPA 아키텍처를 원하지만 여전히 검색 엔진과 가까우려면 서버측 렌더링 작업을 수행해야한다.(SEO 이슈)