[2023.01.29] 개발자 교육 88일 차 : 강의-브라우저, 비동기처리, API 활용 학습 [구디 아카데미]

DaramGee·2024년 1월 29일

클라우드 활용 자바개발자 양성과정(구디)

목록 보기

87/95

복습

개념 이해

동적 & 정적
동적(jsp, servlet) & 정적(html, css, javascript)
동기 & 비동기(톰캣 처리 vs 브라우저 처리)
둘의 시간차 존재함. 왜? 브라우저 처리 vs 톰캣 처리 후 다운로드하여 화면 출력
XMLHttpRequest, {} 클로저, ajax, fetch

$.ajax({
	url:json, jsp, servlet,spring
	dataType:
	success:function(){
	}
	error:function(){
	}
})

비동기처리란?
✅ 사용자가 웹페이지를 보는 동안에도 백그라운드에서 데이터를 주고 받을 수 있는 기술

이를 통해 사용자 경험을 향상시키고 웹 애플리케이션의 성능을 개선할 수 있습니다.

Ajax (Asynchronous JavaScript and XML):
- 웹 페이지에서 서버와 비동기적으로 데이터를 주고 받을 수 있는 기술.
- JavaScript를 이용하여 웹 브라우저에서 서버로 요청을 보내고, 서버는 데이터를 반환하면 JavaScript를 이용하여 화면을 업데이트하는 기법.
Fetch API:
- 최신 웹 표준으로, JavaScript에서 제공하는 네트워크 요청을 위한 API.
- XMLHttpRequest 대신 사용되며, 간편하고 유연한 인터페이스를 제공하여 데이터를 가져오고 전송할 수 있음.
WebSockets:
- 실시간 양방향 통신을 제공하는 기술.
- 서버와 클라이언트 간 지속적인 연결을 통해 데이터를 양방향으로 주고 받을 수 있어 실시간 채팅 등에 유용하게 사용됨.
Server-Sent Events (SSE):
- 서버에서 클라이언트로 단방향으로 데이터를 전송하는 기술.
- 클라이언트는 서버에 연결된 상태로, 서버에서 실시간으로 업데이트되는 데이터를 받아 처리할 수 있음.

[!quote] 비동기처리는?
비동기 처리 방식들은 사용자 경험을 향상시키고, 웹 애플리케이션에서 데이터를 보다 빠르고 효율적으로 처리할 수 있도록 도와준다.
JSP 사용시 문제가 되는것은? => 동기화 이슈!! (처리주체 다름)
정적페이지는 브라우저에서 처리하고, 돔트리를 그려 준다. 동적페이지는 익스프레션(<%=%>)의 경우, 톰캣에서 처리하고 난 뒤 결과를 다운로드하는 것이다.(따라서 소스보기에서 자바코드를 볼 수 없다.)
동적페이지 처리 > 정적페이지 처리
s코드는 앞단에서 처리,
같이 사용하는 것은 가능하지만 그 둘은 절대 동기적이지 않다?! 그럼 어떻게 해결하지? => 비동기통신 처리

강의 내용

비동기 처리 실습

구글차트 활용
https://developers.google.com/chart/interactive/docs/gallery/barchart?hl=ko#bar-styles
step1
json 형식으로 직접 입력하여 표시

<%@ page contentType="text/html;charset=UTF-8" language="java" %>  
<html>  
<head>  
    <title>drawChart1</title>  
    <%--비동기처리--%>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
    <%--구글차트 라이브러리 지원--%>  
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  
    <script type="text/javascript">  
        /*막대그래프 요청*/  
        google.charts.load('current', {'packages':['bar']});  
        /*막대그래프 데이터 필요 - 함수호출*/  
        google.charts.setOnLoadCallback(drawChart);  
        function drawChart() {  
            /*데이터타입 배열 or json형식 사용 시 DataTable()*/            
            const jsonData = ([  
                ['Year', 'Sales', 'Expenses', 'Profit'],  
                ['2014', 1000, 400, 200],  
                ['2015', 1170, 460, 250],  
                ['2016', 660, 1120, 300],  
                ['2017', 1030, 540, 350]  
            ]);  
            var data = google.visualization.arrayToDataTable(jsonData);  
            var options = {  
                chart: {  
                    title: 'Company Performance',  
                    subtitle: 'Sales, Expenses, and Profit: 2014-2017',  
                },  
                // bars: 'horizontal' // Required for Material Bar Charts.  
            };  
            var chart = new google.charts.Bar(document.getElementById('barchart_material'));  
            chart.draw(data, google.charts.Bar.convertOptions(options));  
        }  
    </script>  
</head>  
<body>  
<div id="barchart_material" style="width: 900px; height: 500px;"></div>  
</body>  
</html>

step2
비동기처리로 Json 파일 가져와서 처리

<%@ page contentType="text/html;charset=UTF-8" language="java" %>  
<html>  
<head>  
    <title>drawChart2</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  
    <script type="text/javascript">  
        google.charts.load('current', {'packages':['bar']});  
        google.charts.setOnLoadCallback(drawChart);  
        function drawChart() {  
            let jsonData = ([])  
            $.ajax({  
                url: './drawChartJSON.jsp',  
                dataType: 'json',  
                /*res : Array(5)*/  
                success: function (res) {  
                    console.log(res);  
                    //res에 담긴 정보 jsonData에 담기  
                    jsonData=res;  
                    //data 변수 초기화  
                    var data = google.visualization.arrayToDataTable(jsonData);  
                    //막대그래프 옵션 초기화  
                    var chart = new google.charts.Bar(document.getElementById('barchart_material'));  
                    var options = {  
                        chart: {  
                            title: 'Company Performance',  
                            subtitle: 'Sales, Expenses, and Profit: 2014-2017',  
                        },  
                        // bars: 'horizontal' // Required for Material Bar Charts.  
                    };  
                    //DOM API 접근  
                    chart.draw(data, google.charts.Bar.convertOptions(options));  
                },  
                error: function (jqXHR, txtStatus, errorThrow) {  
                    console.log('error');  
                }  
            });  
        }  
    </script>  
</head>  
<body>  
<div id="barchart_material" style="width: 900px; height: 500px;"></div>  
</body>  
</html>

step3
Spring Controller 처리

<%@ page contentType="text/html;charset=UTF-8" language="java" %>  
<html>  
<head>  
    <title>drawChart2</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  
    <script type="text/javascript">  
        google.charts.load('current', {'packages':['bar']});  
        google.charts.setOnLoadCallback(drawChart);  
  
        function drawChart() {  
            let jsonData = ([])  
            $.ajax({  
                url: './drawChart3',  
                dataType: 'json',  
                /*res : Array(5)*/  
                success: function (res) {  
                    console.log(res);  
                    //data 변수 초기화  
                    for(let i=0;i<res.length; i++){  
                        jsonData.push(res[i]);  
                    }  
					//res에 담긴 정보 jsonData에 담기  
                    var data = google.visualization.arrayToDataTable(jsonData);  
  
                    //막대그래프 옵션 초기화  
                    var chart = new google.charts.Bar(document.getElementById('barchart_material'));  
                    var options = {  
                        chart: {  
                            title: 'Company Performance',  
                            subtitle: 'Sales, Expenses, and Profit: 2014-2017',  
                        },  
                        // bars: 'horizontal' // Required for Material Bar Charts.  
                    };  
                    //DOM API 접근  
                    chart.draw(data, google.charts.Bar.convertOptions(options));  
                },  
                error: function (jqXHR, txtStatus, errorThrow) {  
                    console.log('error');  
                }  
            });  
            /*바뀌는 값이니까!! */  
        }  
    </script>  
</head>  
<body>  
<div id="barchart_material" style="width: 900px; height: 500px;"></div>  
</body>  
</html>

비동기처리할 때, ajax의 어디로 코드를 넣어야할지 이해하기 위해 기존 라이브러리의 코드에 대한 전체적인 이해가 바탕이 되어야한다. 소스를 많이 보고, 많이 사용해봐야한다.

브라우저의 동작원리

동적, 정적페이지의 처리주체가 다름(톰캣, 브라우저)
스크립트 파일을 로드하면서 지연이 발생하여 defer 처리가 필요하기도 하다. 그 실행이 완료되어야 html파서로 제어권이 넘어가고, 브라우저가 중지되었던 시점에서 Dom 생성을 다시 재개한다.
이처럼 브라우저는 동기(Synchronous)적으로 HTML, CSS, Javascript을 처리한다. 이것은 script 태그의 위치에 따라 블로킹(데이터 변환, 요청에 따른 처리, 다운로드 후)이 발생하여 DOM의 생성이 지연될 수 있다는 것을 의미한다. 따라서 script 태그의 위치는 중요한 의미를 갖는다.

초보자는 body 요소의 가장 아래에 자바스크립트를 위치시키는 것은 좋은 아이디어이다. 그 이유는 아래와 같다.
HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.
DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다.

브라우저 작동원리

HTML 다운로드 및 파싱: 브라우저는 서버에서 HTML 문서를 다운로드하고, 이를 파싱하여 문서의 구조를 이해합니다.
CSS 다운로드 및 스타일링: 브라우저는 HTML을 파싱하면서 관련된 CSS 파일을 찾아 다운로드하고, 요소에 스타일을 적용하여 화면에 표시될 모습을 결정합니다.
렌더 트리 생성: HTML과 CSS를 조합하여 렌더 트리를 생성하고, 이를 통해 실제 화면에 어떻게 나타날지 결정됩니다.
레이아웃 및 페인팅: 브라우저는 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산하고, 이를 화면에 페인팅하여 사용자에게 시각적으로 표시됩니다.
자바스크립트 다운로드 및 실행: 페이지에 포함된 JavaScript 코드는 다운로드되어 실행되며, 이를 통해 동적인 기능이 추가됩니다.
이벤트 처리: 사용자의 상호작용에 대한 이벤트가 감지되고 처리되어, 적절한 동작이 수행됩니다.
페이지의 최적화: 브라우저는 페이지 로딩 및 렌더링 성능을 최적화하기 위해 여러 기술과 전략을 사용합니다.

참고1 : https://poiemaweb.com/js-browser
참고2 : https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work

DaramGee

이전 포스트

[2023.01.26] 개발자 교육 87일 차 : 강의-JPA&Spring Security, API 활용 학습 [구디 아카데미]

다음 포스트

[2023.01.29] 개발자 교육 88일 차 : 강의-브라우저, 비동기처리, API 활용 학습 [구디 아카데미]

클라우드 활용 자바개발자 양성과정(구디)

복습

개념 이해

동적 & 정적

동기 & 비동기(톰캣 처리 vs 브라우저 처리)

강의 내용

비동기 처리 실습

구글차트 활용

step1

step2

step3

브라우저의 동작원리

동적, 정적페이지의 처리주체가 다름(톰캣, 브라우저)

브라우저 작동원리

[2023.01.26] 개발자 교육 87일 차 : 강의-JPA&Spring Security, API 활용 학습 [구디 아카데미]

[2023.01.30] 개발자 교육 89일 차 : 강의-React 기초 학습(문서 참고) [구디 아카데미]

0개의 댓글

[2023.01.29] 개발자 교육 88일 차 : 강의-브라우저, 비동기처리, API 활용 학습 [구디 아카데미]

클라우드 활용 자바개발자 양성과정(구디)

복습

개념 이해

동적 & 정적

동기 & 비동기(톰캣 처리 vs 브라우저 처리)

강의 내용

비동기 처리 실습

구글차트 활용

step1

step2

step3

브라우저의 동작원리

동적, 정적페이지의 처리주체가 다름(톰캣, 브라우저)

브라우저 작동원리

[2023.01.26] 개발자 교육 87일 차 : 강의-JPA&Spring Security, API 활용 학습 [구디 아카데미]

[2023.01.30] 개발자 교육 89일 차 : 강의-React 기초 학습(문서 참고) [구디 아카데미]

0개의 댓글

[2023.01.29] 개발자 교육 88일 차 : 강의-브라우저, 비동기처리, API 활용 학습 [구디 아카데미]

[2023.01.26] 개발자 교육 87일 차 : 강의-JPA&Spring Security, API 활용 학습 [구디 아카데미]