[WEB_MVC] 웹 프로그래밍 개요 및 기본 개념

in Study on backend

1. 월드와이드웹

1) WWW의 탄생

  • 영국의 팀 버너스리가 ‘하이퍼텍스트(hypertext)’ 개념을 고안
  • 인터넷 공간에서 문서를 쉽게 연결하는 기술을 발표
  • 이것이 월드와이드웹(WWW, World Wide Web)의 시초가 됨

2) 초창기 웹: 정적 페이지(Static Page)

  • 서버가 클라이언트 요청에 대해 항상 같은 페이지를 반환
    (예: 회사소개, 로고, 약도 등의 정보 제공)
  • 단점: 검색, 로그인, 결제 등 사용자 상호작용 불가능

3) 동적 웹(Dynamic Web)의 등장

  • 사용자 입력에 따라 서버가 다른 정보를 반환
    (예: 로그인 시 개인정보 제공, 검색 결과 반환)
  • ASP, PHP, JSP 등의 웹 프로그래밍 언어 등장

정적 웹에서 동적 웹으로 발전하면서 사용자 맞춤형 서비스가 가능해짐

2. 웹서버와 웹어플리케이션서버

1) 웹서버 (Web Server)

  • 클라이언트 요청을 가장 먼저 받는 서버
  • 정적 콘텐츠 제공 (HTML, CSS, JS, 이미지 등)
  • 요청이 동적 처리가 필요하면 WAS에 위임

2) 웹애플리케이션서버 (WAS)

  • 동적 콘텐츠 처리 (로그인, 검색, 결제 등)
  • 데이터베이스(DB) 또는 외부 시스템과 연동
  • 비즈니스 로직을 실행하고 웹서버에 결과 반환

3) 클라이언트의 종류

  • 서버에 서비스를 요청하고 제공받는 쪽을 클라이언트라고 함
  • 대표적으로 브라우저가 있음
  • 일반적으로 브라우저를 이용해 서버에 정보를 요청하고 서비스를 제공받기 때문에 클라이언트를 브라우저라고 함
  • 브라우저 외에 명령 프롬프트, 스마트폰 앱, FTP 프로그램 등도 모두 클라이언트에 해당
  • 서버에 특정 요청을 보내고 결과를 받는다면 모두 클라이언트라고 볼 수 있음

1. 도메인 (Domain)

1) 도메인이란

  • 도메인(Domain) 이란 인터넷에서 웹사이트의 주소 역할을 하는 문자열을 의미함.
  • 사용자가 브라우저에 입력하면 해당 사이트로 연결됨.

2) 도메인의 구성요소

예시: https://www.naver.com/news

▪ 프로토콜 (Protocol)

  • 예: https://
  • 웹사이트가 어떤 프로토콜을 사용하는지를 나타냄.
    • HTTP (HyperText Transfer Protocol) → 일반 통신
    • HTTPS (HyperText Transfer Protocol Secure) → 보안이 강화된 HTTP로, 데이터를 암호화하여 주고받음.

▪ 서브도메인 (Subdomain)

  • 예: www.
  • World Wide Web을 의미하며, 기술적으로 서브도메인(Subdomain)에 해당함.
  • 서브도메인은 메인 도메인의 하위 주소로, 특정 서비스나 영역을 구분하는 데 사용됨.
    예:
    • blog.naver.com → 블로그 서비스
    • mail.google.com → 메일 서비스

▪ 도메인 이름 (SLD, Second-Level Domain)

  • 예: naver
  • 사용자가 등록한 고유한 이름으로, 브랜드나 조직의 정체성을 나타냄.

▪ 최상위 도메인 (TLD, Top-Level Domain)

  • 예: .com
  • 도메인의 최상위 계층을 의미함.
  • 주요 TLD 예시:
    • .com → 상업용
    • .org → 비영리 단체
    • .net → 네트워크 기관
    • .kr → 대한민국 국가 도메인

▪ 포트 (Port, 선택사항)

  • 웹사이트 주소에서 포트를 명시하지 않으면 기본적으로 80번 포트(HTTP) 를 의미함.
    • 예: http://example.com:8080 → 8080 포트 사용

▪ 경로 (Path, 선택사항)

  • 예: /news
  • 특정 페이지나 리소스의 위치를 나타냄.

▪ 쿼리 스트링 (Query String, 선택사항)

  • 예: https://www.naver.com/search?q=날씨

  • ?q=날씨 부분이 쿼리 스트링(Query String) 이며, 추가적인 요청 정보를 포함함.
  • q 라는 키에 날씨 라는 값을 전달한다는 의미.
  • 여러 개의 데이터를 전달할 경우 & 로 구분함.
    예:
    ?q=날씨&lang=ko

2. IP 주소와 도메인

1) IP 주소란?

  • IP (Internet Protocol) 주소는 인터넷에서 각 기기를 식별하는 숫자 형태의 주소임.

▪ IPv4

  • 예: 192.168.1.1, 223.130.195.200
  • 숫자 4개로 구성, 각 숫자는 0~255 범위.

▪ IPv6

  • 예: 2001:0db8:85a3::8a2e:0370:7334
  • IPv4보다 더 긴 형태로 확장되어, 더 많은 주소를 표현 가능.

2) IP 주소와 도메인의 관계

  • IP 주소 → 컴퓨터가 이해하는 주소
  • 도메인 → 사람이 이해하기 쉬운 주소

동작 과정

  1. 사용자가 브라우저에 www.naver.com 입력
  2. 브라우저가 DNS 서버를 통해 도메인을 IP 주소로 변환
  3. 예: www.naver.com → 223.130.195.200
  4. 해당 서버에 접속하여 웹페이지 표시

💡 일반적으로 IP 주소는 변경될 수 있지만, 도메인은 고정되어 있음.

1. 디자인 패턴 (Design Pattern)

1) 디자인 패턴이란?

  • 소프트웨어 설계 시 자주 발생하는 문제를 해결하기 위한 일반적인 해결 방법을 정리한 것.
  • 개발 과정에서 반복적으로 나타나는 문제들을 효과적으로 해결하기 위한 정형화된 설계 기법임.

2) 디자인 패턴의 필요성

구분설명
코드 재사용성 증가검증된 해결책을 재사용하여 효율적인 개발 가능
유지보수성 향상구조적으로 짜여 있어 수정 및 유지보수가 용이
가독성 및 협업 강화팀원 간 코드 이해가 쉬워지고 협업이 원활해짐
소프트웨어 품질 향상안정적이고 유연한 코드 설계 가능

💡 디자인패턴을 활용하면 코드 품질을 향상시키고, 유지보수를 쉽게 하며, 협업 효율을 높일 수 있습니다.

2. MVC 디자인 패턴 (MVC Design Pattern)

1) MVC 디자인 패턴이란?

  • Model - View - Controller 구조로 프로그래밍하는 설계 방법.
  • 흔히 ‘MVC 패턴’ 또는 ‘MVC 디자인 패턴’ 이라고 부름.
  • 웹 프로그래밍뿐만 아니라 다양한 소프트웨어 개발 분야에서도 활용됨.

▪ MVC 패턴의 흐름

Client (사용자/브라우저) ↓ ① 요청(Request)

Controller ↓ ② 비즈니스 로직 처리

Model (Database 등) ↓ ③ 결과 데이터 전달

View (화면/UI) ↑ ④ 응답(Response)

2) MVC 패턴의 구성요소

구성요소역할
Model (모델)데이터베이스와 연결 및 비즈니스 로직 처리
View (뷰)화면(UI)을 구성하고 사용자에게 결과를 출력
Controller (컨트롤러)사용자의 요청을 받아 Model과 View를 연결

3) MVC 패턴의 장점

  • 프레젠테이션 로직(View) 과 비즈니스 로직(Model) 의 분리
  • 모듈화되어 개발이 체계적이고 유지보수가 용이
  • 새로운 개발자도 전체 구조를 쉽게 이해 가능

🌱 스프링 MVC

1. 스프링 MVC

1) 스프링 MVC란?

  • 웹 애플리케이션 개발을 위한 프레임워크
  • MVC 패턴을 기반으로 체계적이고 쉽게 개발할 수 있도록 설계됨

2) Spring MVC의 흐름

  • 클라이언트가 요청을 보내면, DispatcherServlet이 요청을 받아 적절한 Controller로 전달
  • Controller는 Model을 처리하고, View를 선택
  • View는 클라이언트에게 결과를 출력

▪ MVC 패턴의 흐름

Client (사용자 / 브라우저) ↓ ① 요청(Request) Controller ↓ ② 비즈니스 로직 처리 Model (Database 등) ↓ ③ 결과 데이터 전달 View (화면 / UI) ↑ ④ 응답(Response)

3) Spring MVC 주요 구성 요소

  • DispatcherServlet
    클라이언트의 요청을 분석하여 가장 적합한 핸들러(Controller method)를 찾음
  • HandlerMapping
    요청에 맞는 핸들러(Controller method)를 반환
  • HandlerAdapter
    해당 핸들러(Controller method)를 실제로 호출
  • ViewResolver
    응답에 적합한 뷰(View)를 찾아 반환

💡 참고:
MVC 패턴에서 Model은 일반적으로 비즈니스 로직 계층을 의미하지만,
Spring에서는 Service 계층이 이 역할을 담당함.

2. 스프링 MVC 프레임워크를 사용하는 이유

1) 스프링 MVC의 장점

  • 복잡한 설정과 구조는 이미 Spring MVC가 내장하고 있음
  • 개발자는 Controller와 View 구현에만 집중 가능
  • DispatcherServlet, HandlerMapping, HandlerAdapter 등은 이미 포함되어 있음

2) 프레임워크를 사용하는 이유

  • 구조가 이미 마련되어 있으므로 개발자가 복잡한 기본 구조를 만들 필요 없음
  • 전체 구조를 이해하고, Controller와 View에 집중하여 개발 가능
  • 복잡한 웹 애플리케이션의 골격을 직접 구성할 필요가 없음

3) 구조를 이해하는 중요성

  • 전체적인 구조를 정확히 이해해야 개발 과정에서 문제를 최소화할 수 있음
  • Spring MVC 프레임워크의 구조를 파악하고 개발을 진행하는 것이 중요함



© 2021.03. by yacho

Powered by github