TIL 69일차

♣ 서버와 브라우저

◆ 브라우저에서 데이터 처리 과정

1. 요청 전송
   브라우저는 사용자가 입력한 URL 또는 클릭한 링크를 통해 웹 서버에 HTTP 요청을 전송합니다.
   이 때 사용되는 주요 HTTP 메서드는 GET, POST, PUT, DELETE 등이 있습니다.

2. 응답 수신
   브라우저는 서버로부터 HTTP 응답을 수신합니다.
   응답에는 상태 코드(Status Code), 헤더, 응답 본문(Body) 등이 포함됩니다.
   본문에는 HTML, CSS, JavaScript, 이미지 등의 리소스가 포함될 수 있습니다.

3. HTML 파싱
   브라우저는 응답 본문에 포함된 HTML을 파싱하여 DOM(Document Object Model) 트리를 구성합니다. DOM 트리는 웹 페이지의 구조와 내용을 표현하는 객체 모델입니다.

4. CSS 파싱
   브라우저는 외부 CSS 파일 또는 HTML 내의 인라인 스타일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다.
   CSSOM 트리는 스타일 규칙을 표현하는 객체 모델입니다.

5. 렌더 트리 생성
   브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리(Render Tree)를 생성합니다.
   렌더 트리는 페이지의 시각적 표현을 나타내며, 렌더링에 필요한 모든 노드와 스타일 정보를 포함합니다.

6. 레이아웃(Reflow)
   브라우저는 렌더 트리의 노드들에게 스크린 좌표를 할당하고, 각 요소의 크기와 위치를 계산하는 레이아웃 과정을 진행합니다.
   이를 'Reflow'라고도 합니다.

7. 그리기(Paint)
   레이아웃 과정이 완료되면, 브라우저는 렌더 트리의 각 노드를 화면에 그립니다.
   이 과정에서 요소의 테두리(Border), 배경색, 텍스트 등 시각적 스타일이 적용됩니다.

8. JavaScript 실행
   브라우저는 페이지에서 사용되는 JavaScript 코드를 실행합니다.
   JavaScript는 DOM 조작, 이벤트 처리, AJAX 통신 등을 통해 웹 페이지의 동적인 요소와 상호 작용을 처리합니다.

9. 이벤트 처리
   브라우저는 사용자와 웹 페이지간의 상호 작용을 위해 이벤트 처리를 수행합니다.
   이벤트는 클릭, 키 입력, 마우스 이동 등 다양한 형태로 발생할 수 있습니다.
   JavaScript를 통해 이벤트 리스너(Event Listener)를 등록하여 이벤트가 발생했을 때 실행되는 콜백 함수를 정의할 수 있습니다.

10. 리소스 로드
    브라우저는 웹 페이지에 필요한 추가 리소스(이미지, 비디오, 오디오 등)를 로드하고 렌더링합니다.
    이 과정은 병렬적으로 수행되며, 리소스 로드 완료 시점에 따라 레이아웃과 그리기 과정이 다시 일어날 수 있습니다.

11. 페이지 업데이트 및 애니메이션
    브라우저는 DOM 변경, CSS 스타일 변경, JavaScript 애니메이션 등으로 인해 페이지의 내용이 변경되거나 업데이트 될 때마다 렌더링 과정을 반복하여 최신 상태를 유지합니다.
    이를 통해 웹 페이지의 동적인 요소와 상호 작용을 지원합니다.

◆ 서버에서 데이터 처리 과정

1. 요청 수신
   서버는 클라이언트(브라우저)로부터 HTTP 요청을 수신합니다.
   요청에는 HTTP 메서드(GET, POST, PUT, DELETE 등), URL, 헤더 정보, 쿠키, 요청 본문(POST, PUT 등의 경우) 등이 포함됩니다.

2. 요청 분석
   서버는 수신된 요청을 분석하여 적절한 처리를 수행할 컨트롤러(Controller)와 메서드를 결정합니다.
   이 과정에서 경로 변수, 쿼리 파라미터, 요청 본문 등의 데이터를 추출합니다.

3. 컨트롤러 실행
   서버는 결정된 컨트롤러의 메서드를 실행합니다.
   컨트롤러는 일반적으로 비즈니스 로직을 처리하는 서비스(Service) 및 데이터 액세스 계층(Repository)과 상호 작용하여 요청을 처리합니다.

4. 비즈니스 로직 처리
   서비스 계층에서는 비즈니스 로직을 처리합니다.
   이는 데이터 유효성 검사, 계산, 변환 등의 작업을 포함할 수 있으며, 필요한 경우 데이터 액세스 계층(Repository)를 통해 데이터베이스와 상호 작용합니다.

   1) @Controller에서 @Service 호출
   @Controller 클래스 내에서, 요청 처리 메소드가 비즈니스 로직 처리를 위해 @Service 클래스의 메소드를 호출합니다.
   이 때, 요청에 필요한 데이터를 매개변수로 전달할 수 있습니다.
   @Autowired 어노테이션을 사용하여 의존성 주입(Dependency Injection)을 통해 @Service 클래스의 인스턴스를 가져올 수 있습니다.

   2) @Service에서 비즈니스 로직 처리
   @Service 클래스 내부에서는 비즈니스 로직을 처리하며, 필요한 경우 다양한 메소드와 클래스를 활용하여 데이터를 처리합니다.
   처리 과정에서 @Service 클래스 내에서 필요한 경우 @Repository를 호출하여 DB나 파일과 관련된 작업을 수행할 수 있습니다.

   3) @Service에서 @Repository 호출
   비즈니스 로직 처리 중 데이터 저장, 조회, 수정, 삭제 등의 DB 작업이 필요한 경우, @Service 클래스에서 @Repository 클래스의 메소드를 호출합니다.
   마찬가지로 @Autowired 어노테이션을 사용하여 의존성 주입을 통해 @Repository 클래스의 인스턴스를 가져올 수 있습니다.

   4) @Repository에서 데이터 액세스 작업 수행
   @Repository 클래스에서는 데이터베이스와의 연결 및 쿼리 실행, 파일 입출력 등의 데이터 액세스 작업을 수행합니다.
   이 과정에서 데이터 액세스 코드를 작성하거나, ORM(Object-Relational Mapping) 프레임워크를 사용하여 DB 작업을 처리할 수 있습니다.

   5) 결과 반환
   @Repository에서 데이터 액세스 작업이 완료되면 결과를 @Service 클래스로 반환합니다.
   그 후, @Service 클래스에서 추가적인 비즈니스 로직 처리가 필요한 경우 이를 수행한 후 최종 결과를 @Controller로 반환합니다.

   6) @Controller에서 응답 생성
   @Controller에서는 @Service로부터 반환받은 결과를 바탕으로 클라이언트에게 전달할 응답 데이터를 생성합니다.
   이 때, ModelAndView 객체를 사용하여 뷰 이름과 함께 데이터를 담거나, @ResponseBody 어노테이션을 사용하여 JSON 형태의 데이터를 직접 반환할 수 있습니다.

5. 데이터 액세스 처리
   데이터 액세스 계층(Repository)에서는 데이터베이스와의 연동 작업을 수행합니다.
   SQL 쿼리를 실행하여 데이터를 조회, 삽입, 수정, 삭제하는 작업을 수행하며, 결과를 서비스 계층에 반환합니다.

6. 응답 데이터 생성
   컨트롤러는 서비스 계층 및 데이터 액세스 계층에서 반환된 결과를 바탕으로 응답 데이터를 생성합니다.
   응답 데이터는 HTML, JSON, XML 등의 형식으로 생성될 수 있습니다.

   1) 데이터 변환
   @Controller에서 반환되는 객체를 중앙제어장치(DispatcherServlet)를 통해서 브라우저로 전달할 때, @ResponseBody 어노테이션을 사용하면 해당 객체가 JSON 또는 XML 형식으로 변환됩니다.
   이 과정에서 Jackson 라이브러리가 사용됩니다.
   변환된 JSON 또는 XML 데이터는 HTTP 응답 본문에 담겨져 브라우저로 전달됩니다.

   2) 클라이언트에서 데이터 처리
   브라우저 측에서는 전달받은 JSON 또는 XML 데이터를 JavaScript를 사용하여 처리합니다.
   일반적으로 JavaScript에서 JSON 데이터를 다루는 것이 편리하므로 주로 JSON 형식을 사용합니다.
   JSON 데이터를 JavaScript 객체로 변환하여 필요한 작업을 수행하고, 화면에 데이터를 표시하는 등의 처리를 할 수 있습니다.

7. 뷰 렌더링
   응답 데이터가 HTML인 경우, 서버는 템플릿 엔진(예: JSP, Thymeleaf)을 사용하여 뷰를 렌더링합니다.
   렌더링된 HTML은 클라이언트에 응답으로 전송됩니다.

   1) 컨트롤러에서 JSP를 사용하여 데이터를 브라우저로 전달하려면 ModelAndView 객체를 반환하거나, 컨트롤러 메소드의 반환 타입을 String으로 하여 뷰 이름을 반환할 수 있습니다.

   2) 이 경우, 컨트롤러에서 생성된 데이터는 JSP에 전달되어 JSP에서 HTML로 변환됩니다.

   3) JSP는 EL(Expression Language)과 JSTL(JSP Standard Tag Library) 등을 사용하여 데이터를 처리하고 HTML 코드에 동적인 값을 삽입할 수 있습니다.

   4) 변환된 HTML 코드는 HTTP 응답 본문에 담겨져 브라우저로 전달되며, 브라우저는 이를 렌더링하여 화면에 표시합니다.

8. 응답 전송
   서버는 처리 결과를 HTTP 응답(Response)으로 클라이언트(브라우저)에 전송합니다.
   응답에는 상태 코드(Status Code), 헤더, 응답 본문(Body) 등이 포함됩니다.

9. 에러 처리
   요청 처리 중 에러가 발생한 경우, 서버는 적절한 에러 처리를 수행합니다.
   이 과정에서 에러 페이지를 반환하거나, 클라이언트에게 오류 상태 코드(예: 404 Not Found, 500 Internal Server Error)와 함께 에러 메시지를 전달할 수 있습니다.

10. 로깅 및 모니터링
    서버는 처리 과정에서 발생한 이벤트를 로깅하고 모니터링합니다.
    로깅은 디버깅, 성능 최적화, 보안 이슈 해결 등에 도움이 되며, 모니터링은 서버의 상태와 성능을 지속적으로 추적하여 시스템 건강 상태를 확인하는 데 사용됩니다.