Post

웹 어플리케이션 개요

Posted Updated
By
15 min read
웹 어플리케이션 개요

웹 어플리케이션 개요

웹 어플리케이션은 인터넷 브라우저를 통해 실행되는 소프트웨어 프로그램 서버에서 데이터를 처리하고, 사용자는 웹사이트나 특정 URL을 통해 접근해 기능을 이용 예를 들어, 구글 드라이브, 네이버 메일, 트rello 같은 것들이 웹 어플리케이션 HTML, CSS, JavaScript 같은 기술로 만들어지고, 사용자와 서버 간 상호작용을 통해 동적인 콘텐츠를 제공 데스크톱 앱과 달리 설치가 필요 없고, 기기나 운영체제에 상관없이 브라우저만 있으면 사용 가능

웹 어플리케이션 동작 과정

  1. URL 입력: 사용자가 브라우저에 웹사이트 주소를 입력합니다 (예: www.example.com).
  2. IP 주소 변환: DNS 서버가 입력된 URL을 해당 웹서버의 IP 주소로 변환합니다.
  3. HTML 페이지 요청: 브라우저가 웹서버에 HTML 페이지를 요청합니다.
  4. HTML 페이지 전송: 웹서버가 요청에 따라 HTML 파일을 브라우저로 보냅니다.
  5. HTML 파일 전송: 브라우저가 받은 HTML 파일을 렌더링하여 표시합니다.
  6. HTML 태그 분석: 브라우저가 HTML 태그를 분석해 페이지를 구성합니다.
  7. 요청 내용 분석: 웹서버가 요청 내용을 분석합니다.
  8. 요청 내용 전송: 웹서버가 요청에 맞는 파일 (예: index.html)을 보냅니다.

웹 서블릿 동작 과정

  1. HTTP 요청: 클라이언트(사용자 컴퓨터)가 웹서버에 HTTP 프로토콜을 통해 요청을 보냅니다.
  2. 배포 대상: 웹서버가 요청을 받아 웹 애플리케이션 파일 (예: web.xml)을 처리합니다.
  3. 서블릿 클래스: 서버는 서블릿 클래스 (예: Hello.class)를 호출해 요청을 처리합니다.
  4. HTTP 응답: 서버가 생성한 HTML 데이터를 HTTP로 클라이언트에 보냅니다.
  5. 가공된 HTML 문서: 클라이언트는 받은 HTML을 렌더링해 사용자가 볼 수 있는 페이지를 표시합니다.

HTML REQUEST

  1. GET: 서버로부터 데이터를 가져올 때 사용됩니다. URL에 파라미터를 쿼리 문자열로 붙여 전송하며, 주로 읽기 작업에 활용돼요. 예: GET /search?q=keyword.
  2. POST: 서버에 데이터를 전송할 때 사용됩니다. 주로 폼 제출이나 파일 업로드처럼 민감한 데이터를 보낼 때 적합하며, 본문에 데이터를 포함해요. 예: 로그인 폼 데이터 전송.
  3. PUT: 특정 리소스를 업데이트하거나 새로 생성할 때 사용됩니다. 전체 리소스를 대체하는 데 주로 쓰여요.
  4. DELETE: 서버에서 특정 리소스를 삭제할 때 사용됩니다. 예: 데이터베이스에서 항목 제거.
  5. PATCH: 기존 리소스의 일부만 수정할 때 사용됩니다. PUT과 달리 전체를 갱신하지 않고 변경 부분만 업데이트해요.
  6. HEAD: GET과 비슷하지만, 본문 데이터를 반환하지 않고 헤더 정보만 요청합니다. 리소스 상태 확인에 유용해요.
  7. OPTIONS: 서버가 지원하는 HTTP 메서드를 확인할 때 사용됩니다. 주로 CORS 설정에서 활용돼요.

이 메서드들은 웹 애플리케이션의 다양한 상호작용을 지원하며, RESTful API에서 특히 많이 사용됩니다.

HTTP 요청 (Request)에 대한 요청 라인, 요청 헤더, 그리고 응답 본체를 정리하면 다음과 같습니다:

요청 라인 (Request Line)

  • 구성: 메서드 + 요청 URI + HTTP 버전
    • 예: GET /index.html HTTP/1.1
  • 설명: 요청의 기본 정보를 정의합니다.
    • 메서드: GET, POST 등 요청 유형 (예: 데이터 가져오기, 전송).
    • 요청 URI: 서버에서 접근하려는 리소스의 경로 (예: /index.html).
    • HTTP 버전: 사용된 프로토콜 버전 (예: HTTP/1.1).

요청 헤더 (Request Headers)

  • 구성: 키-값 쌍으로 이루어진 메타데이터
    • 예:
      1
2
3

      Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
  • 설명: 요청에 대한 추가 정보를 제공합니다.
    • Host: 요청 대상 서버 도메인.
    • User-Agent: 클라이언트(브라우저) 정보.
    • Accept: 서버가 보내야 할 콘텐츠 형식.
    • Content-Type (POST 등에서): 전송 데이터의 MIME 타입.
    • Cookie: 이전 세션 정보.

응답 본체 (Response Body)

  • 구성: 요청에 대한 실제 데이터 (선택 사항)
    • 예: HTML 문서, JSON 데이터, 텍스트 등
      1
2
3

      <html>
  <body><h1>Hello, World!</h1></body>
</html>
  • 설명: 서버가 요청을 처리한 결과로 반환되는 콘텐츠입니다.
    • GET 요청에서는 주로 HTML, 이미지 등 리소스가 포함.
    • POST 요청에서는 처리 결과나 에러 메시지 등이 포함될 수 있음.
    • 빈 경우도 있으며, 헤더만으로 충분할 때 (예: 204 No Content).

요청 라인과 헤더는 요청의 구조를 정의하고, 응답 본체는 실제 콘텐츠를 전달하는 역할을 합니다.

HTML RESPONSE

HTTP 응답(Response)은 서버가 클라이언트의 요청에 대해 보내는 메시지로, 여러 종류의 상태 코드를 포함합니다. 주요 응답 종류는 다음과 같이 분류됩니다:

  1. 1xx (정보): 요청이 수신되었으며, 처리가 진행 중임을 나타냅니다.
    • 예: 100 Continue (요청이 계속 진행됨).
  2. 2xx (성공): 요청이 성공적으로 처리되었음을 의미합니다.
    • 예: 200 OK (성공), 201 Created (새 리소스 생성), 204 No Content (응답 본문 없음).
  3. 3xx (리다이렉션): 추가 조치가 필요하거나 리소스가 다른 위치로 이동했음을 나타냅니다.
    • 예: 301 Moved Permanently (영구 이동), 302 Found (임시 이동), 304 Not Modified (캐시 사용).
  4. 4xx (클라이언트 오류): 클라이언트 측의 문제로 요청이 실패했음을 의미합니다.
    • 예: 400 Bad Request (잘못된 요청), 401 Unauthorized (인증 필요), 404 Not Found (리소스 없음), 403 Forbidden (접근 거부).
  5. 5xx (서버 오류): 서버 측의 문제로 요청을 처리하지 못했음을 나타냅니다.
    • 예: 500 Internal Server Error (서버 오류), 502 Bad Gateway (잘못된 게이트웨이), 503 Service Unavailable (서비스 이용 불가).

각 상태 코드는 응답 헤더와 함께 본문(예: HTML, JSON)을 포함할 수 있으며, 클라이언트가 다음 동작을 결정하는 데 도움을 줍니다.

JSP/Servlet

이 이미지는 JSP(JavaServer Pages)와 서블릿(Servlet)을 활용한 웹 애플리케이션의 동작 과정을 나타낸 다이어그램이에요. 아래는 각 부분의 설명입니다:

  1. User Workstation (브라우저): 사용자가 웹사이트에 접근하기 위해 브라우저를 통해 HTTP 요청을 보냅니다.
  2. HTTP Request: 브라우저에서 웹 서버로 HTTP 요청(예: 페이지 로딩 요청)이 전송됩니다.
  3. Web Server (웹 서버): HTTP 요청을 받아 처리하는 서버로, httpd(웹 서버 소프트웨어)가 작동합니다.
  4. Web Container (웹 컨테이너): 서블릿과 JSP를 실행하는 환경으로, 요청을 서블릿으로 전달합니다.
  5. Servlet (서블릿): Java로 작성된 서버 측 프로그램으로, 요청을 처리하고 동적 콘텐츠를 생성합니다. 필요 시 데이터베이스와 상호작용할 수 있어요.
  6. Database (데이터베이스): 서블릿이 데이터를 조회하거나 저장하기 위해 연결되는 저장소입니다.
  7. 서블릿이 생성한 동적 HTML 콘텐츠가 웹 컨테이너를 통해 웹 서버로 전달됩니다.
  8. HTTP Response: 웹 서버가 처리된 HTML 데이터를 HTTP 응답으로 브라우저에 돌려줍니다.
  9. HTTP Response: 브라우저가 응답을 받아 사용자가 볼 수 있는 웹 페이지를 렌더링합니다.

이 과정은 사용자가 동적인 웹 페이지를 요청할 때 JSP/서블릿이 서버 측에서 데이터를 처리하고, 이를 HTML로 변환해 브라우저에 표시하는 방식을 보여줍니다.

이 이미지는 JSP/Servlet 환경에서 서버가 HTTP 요청을 처리하는 과정을 멀티스레딩 관점에서 보여주는 다이어그램이에요. 두 가지 시나리오로 나뉘어 있으며, 아래는 각 부분의 설명입니다:

왼쪽 다이어그램 (단일 스레드)

  1. Request: 클라이언트(브라우저)에서 HTTP 요청이 발생합니다.
  2. httpd: 웹 서버(예: Apache httpd)가 요청을 수신합니다.
  3. JVM: Java Virtual Machine에서 서블릿이 실행됩니다.
  4. Thread: 단일 스레드가 요청을 처리하며, 서블릿이 동작합니다.
  5. Processor load: 프로세서 부하가 단일 스레드에 의해 집중적으로 발생합니다.
    • 특징: 요청이 순차적으로 처리되며, 동시에 여러 요청을 효율적으로 다루기 어렵습니다.

오른쪽 다이어그램 (멀티스레드)

  1. Request (여러 개): 여러 클라이언트로부터 동시에 HTTP 요청이 발생합니다.
  2. httpd: 웹 서버가 모든 요청을 수신합니다.
  3. JVM: Java Virtual Machine에서 서블릿이 실행됩니다.
  4. Thread (여러 개): 여러 스레드가 각 요청을 병렬로 처리합니다.
    • 각 스레드가 개별 서블릿 인스턴스를 통해 요청을 처리합니다.
  5. Processor load: 프로세서 부하가 여러 스레드에 분산되어 처리됩니다.
    • 특징: 멀티스레딩을 통해 동시 요청을 효율적으로 처리할 수 있어 성능이 향상됩니다.

전체 설명

이 다이어그램은 JSP/Servlet 환경에서 단일 스레드와 멀티스레드 처리 방식의 차이를 보여줍니다. 단일 스레드는 한 번에 하나의 요청만 처리하므로 부하가 크고 병목 현상이 발생할 수 있지만, 멀티스레드는 여러 요청을 동시에 처리해 서버의 응답성을 높이는 장점이 있어요. 웹 컨테이너는 JVM 내에서 스레드를 관리하며, 데이터베이스와의 상호작용도 포함될 수 있습니다.

This post is licensed under CC BY 4.0 by the author.