📶 네트워크 - WEB_SERVICE 2탄

유투브 널널한 개발자님 강의 복습 및 정리를 위한 글

• 초창기 웹 서비스 구조
• 웹 서비스 3대 요소

널널님 유투브

초창기 웹 서비스 구조 : 단방향적 구조

웹 클라이언트 (브라우저):

사용자는 브라우저에 URL을 입력
브라우저는 DNS를 통해 입력된 도메인 이름을 IP 주소로 변환

인터넷:

브라우저는 IP 주소를 사용해 웹 서버와 TCP/IP 연결을 설정
설정된 연결을 통해 HTTP 요청을 보냄

웹 서버:

HTTP 요청을 수신한 웹 서버는 요청된 리소스를 찾음
여기에는 HTML, CSS, 이미지 파일 등이 포함
웹 서버는 이 리소스들을 HTTP 응답 형태로 클라이언트에 전달

클라이언트 측:

브라우저는 받은 HTML, CSS, 이미지 등의 리소스를 구문 분석하여 DOM(Document Object Model)을 생성
이 DOM을 사용하여 화면에 내용을 렌더링

---

초창기 웹 서비스는 웹서버에 어떤 자료를 따로 넘겨서 저장하는 기능은 없었고 ,
단방향적으로 웹 서버에 있는 자료를 읽어오는 것만 가능했다. (GET 방식)

양방향적 구조로 진화

웹 클라이언트 (브라우저):

사용자는 로그인 폼에 사용자 ID와 비밀번호를 입력
브라우저는 HTTP POST 요청을 사용하여 이 정보를 서버에 보냄

인터넷:

사용자가 입력한 정보는 인터넷을 통해 웹 서버로 전달

웹 서버:

웹 서버는 이 요청을 WAS (웹 애플리케이션 서버)로 전달

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

WAS는 데이터베이스에 사용자 정보를 조회하기 위해 SQL 쿼리를 실행
예: select * from User where ID = tester
데이터베이스에서 해당 사용자의 정보를 찾음

데이터베이스 (DB):

DB는 WAS로 사용자 정보의 존재 여부를 반환

WAS :

WAS는 사용자에게 성공 또는 실패 응답을 HTML, CSS, 이미지와 함께 전송
성공 시: 로그인 성공 페이지 또는 사용자가 요청한 페이지를 반환
실패 시: 로그인 실패 메시지를 포함한 페이지를 반환

웹 클라이언트 :

브라우저는 받은 응답을 구문 분석하여 DOM을 생성하고 화면에 렌더링
성공 시: 사용자 이름(예: "tester")과 인사말(예: "Hi")을 표시
실패 시: "Unknown" 메시지를 표시

추가적으로 JAVA SCRIPT (클라이언트 단에서 연산이란?)

JavaScript는 웹 애플리케이션에서 다양한 역할을 합니다. 이 다이어그램에서 JavaScript의 주요 역할을 설명하겠습니다.

1. 폼 데이터 처리:

   • JavaScript는 사용자가 로그인 폼을 제출하기 전에 입력한 데이터를 검증할 수 있습니다. 예를 들어, 사용자가 필수 입력란을 모두 채웠는지 확인하거나, 비밀번호 형식을 검사할 수 있습니다.
   • 이렇게 클라이언트 측에서 검증을 수행하면 불필요한 서버 요청을 줄이고 사용자 경험을 향상시킬 수 있습니다.

   // 예제: 로그인 폼 검증
   document.getElementById('loginForm').addEventListener('submit', function(event) {
       var username = document.getElementById('username').value;
       var password = document.getElementById('password').value;
       
       if (!username || !password) {
           alert('모든 필드를 입력해주세요.');
           event.preventDefault();
       }
   });

2. 비동기 통신 (AJAX):

   • JavaScript를 사용하여 AJAX 요청을 보내면 페이지를 새로고침하지 않고도 서버와 통신할 수 있습니다. 이는 특히 로그인과 같은 작업에 유용합니다.
   • AJAX를 사용하면 로그인 시 페이지 전체를 다시 로드할 필요 없이 로그인 상태를 갱신할 수 있습니다.

   // 예제: AJAX를 통한 로그인 요청
   document.getElementById('loginForm').addEventListener('submit', function(event) {
       event.preventDefault();
       
       var xhr = new XMLHttpRequest();
       xhr.open('POST', '/login', true);
       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
       
       xhr.onload = function() {
           if (xhr.status === 200) {
               var response = JSON.parse(xhr.responseText);
               if (response.success) {
                   // 로그인 성공 처리
                   document.getElementById('message').textContent = '로그인 성공!';
               } else {
                   // 로그인 실패 처리
                   document.getElementById('message').textContent = '로그인 실패: ' + response.message;
               }
           }
       };
       
       var formData = 'username=' + encodeURIComponent(document.getElementById('username').value) +
                      '&password=' + encodeURIComponent(document.getElementById('password').value);
       xhr.send(formData);
   });

3. 동적 콘텐츠 업데이트:

   • JavaScript는 서버에서 받은 데이터를 사용하여 웹 페이지의 콘텐츠를 동적으로 업데이트할 수 있습니다. 예를 들어, 로그인 성공 시 사용자 이름과 인사말을 표시하는 HTML 요소를 업데이트할 수 있습니다.
   • 이렇게 하면 사용자는 페이지를 다시 로드하지 않고도 변경된 내용을 실시간으로 확인할 수 있습니다.

   // 예제: 로그인 후 페이지 업데이트
   function updateUserGreeting(username) {
       document.getElementById('greeting').textContent = username + '님, 환영합니다!';
   }
   
   // 위의 AJAX 예제에서 로그인 성공 시 이 함수를 호출
   xhr.onload = function() {
       if (xhr.status === 200) {
           var response = JSON.parse(xhr.responseText);
           if (response.success) {
               updateUserGreeting(response.username);
           } else {
               document.getElementById('message').textContent = '로그인 실패: ' + response.message;
           }
       }
   };

이처럼 JavaScript는 클라이언트 측에서 사용자 인터페이스를 개선하고, 비동기 요청을 통해 서버와 상호작용하며, 실시간으로 콘텐츠를 업데이트하는 역할을 합니다. 이를 통해 사용자 경험을 향상시키고, 웹 애플리케이션의 효율성을 높일 수 있습니다.