어플리케이션 개발 구조와 흐름

1. 데이터 흐름: 3계층형 아키텍처

1) 클라이언트 (프리젠테이션 계층)

• 사용자가 직접 상호작용하는 인터페이스.
• 사용자가 브라우저(또는 모바일 앱)를 통해 웹 서버에 요청을 보냄. (HTTP/HTTPS 통신 프로토콜 사용)
• 브라우저는 요청을 보낼 때 필요한 데이터를 포함해 보냄(쿠키, 헤더 등).

2) 웹 서버와 애플리케이션 서버 (애플리케이션 계층)

클라이언트의 요청은 웹 서버로 전달된 뒤, 필요한 작업에 따라 애플리케이션 서버로 전달된다. 

• 웹 서버(Web Server)
  • 역할: HTTP 요청을 처리하고 정적 리소스(HTML, CSS, JS 파일 등)를 클라이언트에 바로 제공.
  • 정적 리소스 요청이라면 웹 서버가 자체적으로 처리하고 응답.
  • 예: 사용자가 이미지를 요청할 경우, 웹 서버가 이미지 파일을 찾아 응답.
• 애플리케이션 서버(Application Server)
  • 역할: 동적 요청을 처리하며, 비즈니스 로직을 실행.
  • 웹 서버로부터 동적 요청을 전달받아 데이터베이스와 통신.
  • 예: 사용자가 게시글을 요청하면, 게시글 데이터를 조회하는 로직 실행.

3) 데이터베이스 서버 (데이터 계층)

• 역할: 데이터를 저장하고 애플리케이션 서버의 요청을 처리.
• 애플리케이션 서버는 데이터베이스에 SQL 쿼리를 전송해 데이터를 가져오거나 업데이트.
  예: SELECT * FROM articles WHERE id = 123;
• 데이터베이스 서버는 요청받은 데이터를 반환하고, 애플리케이션 서버는 이 데이터를 가공 후 클라이언트에 전달.

4) 데이터 흐름 정리 

1️⃣ 브라우저(클라이언트): HTTP 요청을 생성하고 웹 서버에 전달.

→ 2️⃣ 웹 서버: 요청을 애플리케이션 서버로 전달.

→ 3️⃣ 애플리케이션 서버: 데이터베이스에 쿼리 요청을 전송.

→ 4️⃣ 데이터베이스 서버: 애플리케이션 서버로 결과 전달.

→ 5️⃣ 애플리케이션 서버: JSON, HTML 등의 형식으로 가공 후 웹 서버로 전달.

→ 6️⃣ 웹 서버: 클라이언트에 응답을 반환.

→ 7️⃣ 클라이언트: 요청한 데이터가 화면에 표시됨 

 

---

2. 어플리케이션 개발 구조

 

1) 어플리케이션 개발 

어플리케이션은 전체 시스템이다. 

• 정의: 특정 목적을 가진 소프트웨어를 개발하는 것. (웹 애플리케이션, 모바일 앱, 데스크탑 프로그램 등)
• 목적: 사용자에게 특정 서비스를 제공하는 완성된 시스템을 만드는 것. (쇼핑몰 웹사이트, 일정 관리 앱, SNS 등)
• 어플리케이션은 크게 프론트엔드와 백엔드로 나눠지며, 두 부분이 협력하여 동작한다.
  • 프론트엔드는 사용자가 직접 보거나 상호작용하는 부분으로, UI(User Interface)를 설계하고 구현한다. 예를 들어, 웹 페이지나 앱의 디자인, 버튼, 메뉴 등 화면에 보이는 요소들을 포함한다.
  • 백엔드는 서버, 데이터베이스, 그리고 비즈니스 로직을 처리하는 부분이다. 클라이언트(사용자)와 서버 간의 데이터 통신을 담당하고, 서버에서 클라이언트의 요청을 처리하며 데이터를 관리한다.

2) 프론트엔드 (UI: User Interface)

프론트엔드는 사용자와 직접 상호작용하는 부분이다. 즉, 화면에 보이는 모든 요소를 다룬다. 

• UI 디자인 및 구현: 사용자가 어플리케이션을 사용할 때 볼 수 있는 화면을 디자인하고 구현하는 부분
• 사용자 입력 처리: 사용자가 입력하는 데이터를 처리하고, 서버로 보내거나 화면에 반영하는 작업
  
• 클라이언트-서버 통신: 서버와 데이터를 주고받는 부분.
  
• 반응형 디자인: 다양한 디바이스와 화면 크기에 맞게 어플리케이션을 조정.
  
• 기술 스택: HTML, CSS, JavaScript (React, Vue, Angular 등) 
  React와 같은 라이브러리 또는 Vue, Angular 프레임워크를 사용해 사용자 인터페이스를 구현.

3) 백엔드 (서버)

백엔드 개발은 어플리케이션의 서버 측을 개발하는 것이다.

서버는 클라이언트의 요청을 받아 처리하고, 필요한 데이터를 제공하거나 저장한다.

• API 설계 및 구현: 클라이언트와 서버 간의 데이터 통신을 위한 API를 설계하고 구현.
• 데이터베이스 관리: 사용자 데이터, 상품 정보 등 어플리케이션 데이터를 저장하고 관리하는 부분.
• 서버 관리 및 배포: 어플리케이션이 동작할 서버 환경을 설정하고, 서버가 클라이언트의 요청을 처리할 수 있도록 관리.
• 비즈니스 로직 처리: 어플리케이션의 핵심 기능을 처리하는 부분. 예를 들어, 결제 처리, 주문 관리 등.
• 기술 스택: Java (Spring), Python (Django, Flask), Node.js, Ruby (Rails) 등

4) API 개발

API(Application Programming Interface) 개발은 백엔드 개발의 한 부분이다. 

• 어플리케이션의 서버와 클라이언트 간 데이터 통신을 담당
• API는 클라이언트가 서버에 요청을 보내고, 서버가 이를 처리하여 응답을 보내는 방식으로 동작한다. 
• API는 서버와 클라이언트 간, 혹은 서로 다른 서비스 간의 데이터 교환을 가능하게 하는 중요한 역할을 한다. 예를 들어, 웹사이트에서 사용자가 로그인할 때, 로그인 API를 호출하여 서버가 사용자의 인증 정보를 확인하고, 그에 맞는 응답을 반환한다.
• API 설계: 클라이언트와 서버 간의 데이터 요청과 응답을 정의하는 작업.
• API 구현: 실제로 API가 동작하도록 코드를 작성하여 데이터를 주고받을 수 있게 한다.

5) 데이터베이스

어플리케이션에서 데이터를 저장하고 관리하는 곳. 백엔드와 밀접하게 연관되어 있으며, 데이터베이스를 통해 데이터를 CRUD(Create, Read, Update, Delete)하는 작업을 한다.

• 데이터 저장 및 조회(CRUD): 어플리케이션에서 필요한 정보를 저장하고, 이를 조회하여 클라이언트에게 제공.
  
• 데이터 모델링: 어플리케이션에 맞게 데이터를 구조화하는 작업.
  
• 쿼리 최적화: 데이터베이스에서 정보를 빠르게 처리할 수 있도록 쿼리를 최적화하는 작업.
• 기술 스택: MySQL, PostgreSQL, MongoDB, Redis 등.

 

즉, 프론트엔드 개발자는 사용자 인터페이스(UI)와 경험(UX)을 최적화하고, 서버와 통신하여 데이터를 표시.

백엔드 개발자는 서버, 데이터베이스, API 등을 관리, 서버와 클라이언트 간 데이터 통신을 처리.

이 두 부분이 잘 협력해서 어플리케이션을 완성한다. 

 

---

3. 어플리케이션 개발에서 사용되는 기술 

1) 클라이언트 ↔ 서버 요청/응답 처리 

• Servlet(서블릿)
  • Java의 기본 웹 요청 처리 방식
  • 브라우저에서 요청이 오면 서블릿이 이를 받아서 적절히 처리하고 응답을 보내는 역할
  • 하지만 서블릿을 직접 사용하면 코드가 너무 복잡해짐 → 더 쉽게 쓰라고 나온 게 Spring MVC
• Spring MVC (with Spring Boot)
  • 서블릿 기반 웹 애플리케이션 개발을 더 쉽게 하도록 도와줌
  • 컨트롤러(@Controller, @RestController)와 같은 개념을 제공하여 웹 요청을 더 직관적으로 처리 가능
  • Spring Boot를 사용하면 설정 없이 빠르게 개발할 수 있음

2) 서버 ↔ DB 연결 (데이터베이스 연동)

• JDBC (Java Database Connectivity)
  • Java에서 DB와 직접 연결하는 방법
  • 하지만 SQL을 직접 다뤄야 하고, 코드가 길어져서 유지보수가 어려움
    → 그래서 더 편리한 MyBatis, JPA 같은 기술이 등장
• MyBatis
  • SQL을 직접 작성하면서도, JDBC보다 편리하게 DB를 사용할 수 있도록 도와주는 프레임워크
  • XML 또는 어노테이션을 이용해서 SQL을 작성
  • SQL을 직접 컨트롤하고 싶을 때 사용
• JPA (Java Persistence API)
  • SQL을 직접 작성하지 않고도, 객체를 통해 데이터를 다룰 수 있도록 해주는 기술
  • MyBatis와 달리 ORM(Object-Relational Mapping) 방식 사용 → 객체와 DB 테이블을 매핑하여 SQL 대신 메서드 호출로 데이터 조작 가능
  • 대표적인 구현체로 Hibernate가 있음

3) 서버 → 클라이언트 응답 (화면 만들기) 

• SSR (Server Side Rendering) 방식
  • 서버(Spring)가 HTML을 만들어서 보내는 방식
  • JSP, Thymeleaf (뷰 템플릿 엔진 사용)
• CSR (Client Side Rendering) 방식
  • 서버가 JSON 데이터를 주고, 프론트가 화면을 그림
  • Vue.js, React (HTTP API 사용하여 통신)

	SSR	CSR
화면을 만드는 곳	백엔드 (서버)	프론트엔드 (브라우저)
백엔드가 하는 일	HTML 파일을 만들어서 클라이언트에 전송	JSON 데이터를 API로 전송
클라이언트가 하는 일	받은 HTML을 바로 브라우저에 띄움	받은 JSON 데이터를 해석해서 화면을 그림
초기 로딩 속도	빠름 (바로 HTML을 받아서 렌더링 가능)	느림 (JS가 HTML을 만들고 렌더링해야 함)
페이지 이동 방식	서버에서 새 HTML을 받아옴 (전체 새로고침)	브라우저에서 필요한 부분만 업데이트 (싱글 페이지 애플리케이션, SPA)

 4) 클라이언트 ↔ 서버 연결 

• 클라이언트(웹/앱)가 사용자 요청을 서버에 전달하고, 서버가 응답을 클라이언트에 보내는 역할.
• 네트워크 중심의 데이터 요청/응답.
• 주요 기술
  • HTTP/HTTPS: 통신 프로토콜 
  • REST API, GraphQL, gRPC: 클라이언트와 데이터를 주고받는 방식
    • API 통신은 정적인 파일이 아닌 데이터를 주고 받고, 클라이언트에서 화면을 완성하는 CSR에서 사용한다. 
    • 데이터 형식: JSON, XML
  • WebSocket: 실시간 양방향 통신