[웹 어플리케이션 작동원리] 브라우저에 URL 을 입력하면 일어나는 일

우리는 웹 브라우저를 통해서 쇼핑도 하게 되고, 게시글을 쓰기도 합니다.

이때  웹 브라우저에서 URL 를 입력하거나 링크 혹은 버튼을 클릭했을 때 일어나는 일에 대해서 이야기 하고자 합니다.  
(실제로는 더욱 더 많은 일들이 일어나지만, 기술 면접에서 5분 이내로 설명한다고 가정했을때 간단한 설명을 한 것입니다)

1. 클라이언트(Client) -> 웹 서버(Web Server)

• 클라이언트는 주로 웹브라우저와 같은 응용 프로그램을 통해 웹 서버에 HTTP 요청을 보냅니다.
• URL을 입력하거나 버튼을 클릭하면 HTTP 요청이 발생하며, 이때 GET이나 POST와 같은 메서드를 사용합니다.
• HTTP는 애플리케이션 계층의 프로토콜로, TCP/IP를 기반으로 동작합니다.
• TCP는 데이터가 안정적이고 정확하게 전송되도록 관리합니다.
• IP는 데이터가 올바른 경로를 통해 목적지에 도착하도록 합니다.

2. 웹 서버(Web Server) -> WAS

• 클라이언트의 요청이 먼저 웹 서버에 도착하며, 여기서 HTTP 요청이 처리됩니다.
• 웹 서버는 HTML, CSS, JavaScript 파일 등을 클라이언트에게 제공하거나 WAS로 요청을 전달합니다.
• Web Server 는 Request 처리의 주체가 아니며, 단순히 통신하는 역할을 해줄 뿐입니다.

3. WAS(Web Application Server) -> 데이터베이스(DB)

• WAS는 동적 서버 애플리케이션을 관리하며, 요청에 따라 서버 측에서 데이터를 처리합니다.
• 여기서 주요 흐름 중 하나는 "Rest API Server"로의 요청이며, RESTful API를 통해 데이터가 주고받아집니다. WAS는 보통 데이터베이스와도 연결되어 있습니다.
• 백엔드 개발자들이 스프링 프레임 워크나, 장고, 노드 프레임워크를 통해 작성하는 API 컨트롤러 역할을 담당합니다.
• WAS 에서는 클라이언트가 요청한 데이터 요구값에 따라서 정상적인 데이터를 반환 해주기도 하며, 에러 메시지와 함께 검증을 할 수도 있습니다. 

RESTful API

• Web Server 에서는 요청을 안전하고 정확하게 전달해주며, Web Application Server 에서는 요청받은 API 데이터를 클라이언트에게 전달 해줘야 합니다. 
• 이때 API 서버는 클라이언트로부터 받은 입력에 따라 데이터를 읽기(Read), 쓰기(Write), 수정(Update), 삭제(Delete) 등의 작업을 수행합니다. 
• 일반적으로 WAS 와 "Rest API Server" 는 일치합니다. Web Server 에서는 정적인 처리를 , WAS 에서는 동적인 처리를 담당합니다. 
• 주로 JSON, XML 등의 형식으로 데이터를 주고받습니다. (REST 아키텍처 스타일을 따르기 때문에 RESTFUL API 라고 불린다.)

4. 데이터베이스(DB) -> WAS

• 데이터베이스는 JDBC, ODBC와 같은 기술을 통해 WAS와 연결되어 클라이언트의 요청에 따라 데이터를 조회하거나 저장합니다.
• SQL 평서문이 실행되어 클라이언트가 요청한 데이터를 조회하고, 그 결과를 다시 WAS에 전달합니다.

5. WAS -> Web Server

• WAS 로부터 받은 response 를 바탕으로, 동적인 문서를 전달 받습니다. 
• Data 가 핵심 이며, WAS 로 부터 받은 Data 를 바탕으로 클라이언트 단에서 View (모바일, 데스크탑, 태블릿 등등) 에 따른 의존성을 가지지 않도록 Data 를 보내주는 것이 핵심입니다. 
• Json , XML 과 같은 형식으로 보내줍니다. 

6. Web Server -> Client 

• WAS 로부터 View 에 따른 의존성이 없도록 받은 Data 를 기반으로, 각 클라이언트에서 기기에 따른 클라이언트 페이지를 생성합니다. 
• 리액트, Vue.js, 플러터 등등의프레임워크나 라이브러리로 클라이언트를 따로 관리해주는 이유 입니다. 클라이언트는 환경에 따른 변화가 심하기 때문에, response 에 Data 형식으로 받아줍니다. 
  1. 이때 html, css 에 대한 구문 분석이 먼저 이루어 지며
  2. 클라이언트 애플리케이션에서 rendering 이 진행됩니다. 
  3. JavaScript 를 해석하고 구동하기 위해서 JS 엔진이 가동됩니다. 

애플리케이션 성능 모니터링(APM)

 

• 백엔드 개발자는 위와같은 웹의 흐름에 대한 다이어그램을 이해하고, 운영을 고려 할 수 있어야 합니다.
• APM(Application Performance Manager)은 시스템의 전체적인 성능을 관리하고 모니터링하는 역할을 합니다.
• APM 소프트웨어로는 제니어, Scouter Xlog 등이 존재합니다. 
• 시스템에서 발생하는 오류나 성능 저하를 감지하고 분석하여 서버의 상태를 모니터링할 수 있습니다. WAS 단에서 응답 시간이나 적절한 로그 메시지를 모니터링해서 "장애를 대응"하는 APM 시스템을 이해하고 있어야 합니다. 


위 내용은 널널한 개발자님의 "면접 전에 알고 가면 좋을 것들 - 신입 Java 백엔드 개발자편" 강의를 듣고 
복습을 위해 정리한 내용이며 , 이 수업을 듣고 네트워크에 대해 점점 알고싶어지는 계기가 되었습니다.
https://www.inflearn.com/course/%EB%A9%B4%EC%A0%91-%EC%8B%A0%EC%9E%85-java-%EB%B0%B1%EC%95%A4%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90/dashboard

면접 전에 알고 가면 좋을 것들 - 신입 Java 백엔드 개발자편 강의 | 널널한 개발자 - 인프런