우리가 보는 특정 페이지들을 구성하는 WebApp은 크게 Front와 Back으로 나뉘어진다.

1. Front-End

Front-End는 사용자가 직접 보는 화면과 상호작용하는 부분을 담당한다. 주로 HTML, CSS, JavaScript를 기반으로 동작하며, 웹 페이지의 UI/UX를 구성하는 역할을 한다.

Front-End의 주요 구성 요소

HTML: 웹 페이지의 구조를 담당하는 마크업 언어
CSS: 디자인과 스타일을 적용하여 화면을 꾸며주는 역할
JavaScript: 동적인 기능을 추가하여 사용자와의 상호작용을 처리

Front-End의 동작 방식

사용자가 웹 브라우저를 통해 특정 URL에 접속
서버에서 HTML, CSS, JavaScript 등의 정적인 파일을 반환
브라우저가 받은 파일을 렌더링하여 화면을 구성
JavaScript를 활용해 동적인 요소를 추가하고 API 요청을 통해 데이터를 가져옴

2. Back-End

Back-End는 사용자의 요청을 처리하고 데이터베이스와 연결하여 필요한 데이터를 제공하는 역할을 한다. 주로 서버 애플리케이션과 데이터베이스로 구성되며, 보안과 비즈니스 로직을 담당한다.

Back-End의 주요 구성 요소

서버 어플리케이션: 사용자의 요청을 처리하고 응답을 반환하는 역할 (Spring Boot, Node.js 등)
데이터베이스: 사용자 정보, 게시글 등의 데이터를 저장하고 관리 (MariaDB, MySQL, OracleDB 등)
API: Front-End와 Back-End 간의 데이터 통신을 담당하는 인터페이스

Back-End의 동작 방식

1. 사용자가 특정 요청(예: 로그인, 데이터 조회)을 보냄
2. 서버 애플리케이션이 요청을 처리하고 데이터베이스에서 필요한 데이터를 조회
3. 비즈니스 로직을 수행한 후 결과 데이터를 반환
4. Front-End에서 받은 데이터를 화면에 표시

이처럼 WebApp은 Front-End와 Back-End가 상호작용하며 동작하여,
전체적인 웹 서비스의 기능을 제공한다.