프론트와 백엔드 서버가 함께 동작하면 풀스택 앱이라고 부른다.
- React 프런트엔드
- ASP.NET Core 백엔드
이 구조는 C#의 WPF에서 UI 코드와 Logic 코드가 분리되어 있는 구조와 유사하다.
- UI : XAML – 페이지 모양, 버튼 색상 등 디자인 정의
- Logic : .cs – 페이지 로딩, 버튼의 동작을 구현
설명을 위해 C# 프로그램에서 센서로부터 데이터를 받아오는 상황을 가정해보자.
(그림1 – WPF 앱의 EditBox에 값이
123.56이 들어가 있고, Label에Speed라고 적혀 있음)
UI는 Logic에서 Value를 가져온다.
Logic이 UI에 있는 Value를 가져올 수 있다.
즉, UI와 Logic은 데이터를 주고받는다.
프론트와 백엔드도 이와 유사한 관계다.
프론트가 백엔드의 데이터를 가져오고, 백엔드가 프론트의 요청을 받는다.
이렇게 풀스택 구조를 단순하게 말할 수 있다.
다음 글을 보기 전에 두 가지 키워드를 알고 넘어가면 좋다.
- HTTP
- JSON
검색 엔진은 구글, 네이버 등이 있다.
이 사이트들의 공통점은 주소창에 입력한 것에 따라 다른 페이지를 보여준다는 것이다.
| 서비스 | URL 예시 | 보여주는 페이지 |
|---|---|---|
| 구글 | https://mail.google.com | Gmail(이메일) |
| https://accounts.google.com/ServiceLogin | 구글 로그인 화면 | |
| https://www.google.com | 구글 메인 검색 페이지 |
웹 브라우저에 주소창이 있듯이, PC의 파일 탐색기에도 주소창이 있다.
클릭하여 폴더 구조를 탐색하는 대신 탐색기 주소창 입력을 통해 윈도우 파일 시스템을 다룰 수 있다.
반면에 웹 브라우저 주소창은 서버에 HTTP 요청을 보내는 기능이 있다.
HTTP 요청은 프론트에서 백엔드에 데이터를 달라고 요구하는 기능이다.
구글 이메일을 예로 들면, 내 메일함에 있는 메일을 요청해서 받아오는 상황에 비유할 수 있다.
모든 사람이 주소창에 요청하면 데이터를 주는 방식이라면,
다른 사람이 내 메일을 읽으면 곤란하기 때문에 인증 절차를 적용하는 것이다.
인증되지 않은 사용자가 주소창으로 메일을 요청한다면
서버는 401 Unauthorized를 반환하며 요청을 거부한다.
C
Contents