3) JSP + 서블릿을 이용한 MVC 패턴 : controller와 model은 servlet으로, view는 jsp로 작업
📍 단점 : 구조화된 프로그래밍은 가능한데, 규모가 더 커지니 코드가 복잡하고 성능 저하
💡 자바 서블릿 (Java Servlet)은 자바를 사용하여 웹페이지를 동적으로 생성하는 서버측 프로그램 혹은 그 사양을 말하며, 흔히 "서블릿"이라 불린다. 자바 서블릿은 웹 서버의 성능을 향상하기 위해 사용되는 자바 클래스의 일종이다. 서블릿은 JSP와 비슷한 점이 있지만, JSP가 HTML 문서 안에 Java 코드를 포함하고 있는 반면, 서블릿은 자바 코드 안에 HTML을 포함하고 있다는 차이점이 있다.
서버 측 실행 언어 : 서버에서 실행되는 언어. JSP, PHP, ASP, 파이썬, node.js
2. 스크립트 태그 Script Tag
태그
형식
설명
선언문declaration
<!% ... %>
자바 변수나 메소드를 작성
스크립틀릿 scriptlet
<% ... %>
자바 로직 코드 작성
표현문expression
<%= ... %>
선언문의 변수, 메소드, 계산식을 호출하여 문자열로 출력
1) 선언문 태그 declaration
<%! 자바 코드; %>
🚀 변수나 메소드 등을 선언하는 태그
🚀 선언문 태그에 선언된 변수와 메서드는 서블릿 프로그램으로 번역될 때 _jspService() 메소드 외부에 배치되므로 JSP 페이지 임의의 위치에서 선언할 수 있음
🚀 스크립틀릿 태그보다 나중에 선언해도 스크립틀릿 태그에서 사용할 수 있음
🚀 선언문 태그로 선언된 변수는 서블릿 프로그램으로 번역될 때 클래스 수준의 멤버 변수가 되므로 전역 변수로 사용
변수 선언
<body>
<%--선언문 태그 사용 예 : 전역변수 선언--%>
<%!
int count = 0; // 전역변수 count를 0으로 초기화
%>
Page Count is
<%
out.println(++count); // 전역변수 1 증가. 새로 고침을 하면 숫자가 증가.
%>
</body>
메소드 선언
<body>
<%-- 선언문 태그에 전역 메서드 사용하기 --%>
<%-- 전역 메서드 sum()을 선언하기 위해 선언문 태그를 작성 --%>
<%!
int sum(int a, int b) {
return a + b;
}
%>
<%-- 결과 값 출력을 위해 스크립틀릿 태그를 작성 --%>
<%
out.println("2 + 3 = " + sum(2, 3)); // 선언문 태그에 선언된 전역 메서드 sum() 호출.
%>
</body>
2) 스크립틀릿 태그 scriptlet
<% 자바 코드; %>
🚀 자바 코드로 이루어진 로직 부분을 표현
🚀 스크립틀릿 태그는 가장 일반적으로 사용되며 변수 또는 메소드 호출, 유효식 등을 포함할 수 있음
🚀 모든 텍스트, HTML 태그, 또는 JSP 요소는 스크립틀릿 태그 외부에 있어야 함
🚀 스크립틀릿 태그에 작성된 자바 코드는 서블릿 프로그램으로 변환될 때 _jspService() 메소드 내부에 복사
➡️ 각 클라이언트의 요청에 대해_jspService() 메소드가 호출되므로 이 메소드의 내부 코드가 클라이언트의 요청마다 실행
➡️ _jspService() 메소드 내부에 복사되므로 지역변수가 되어 이 태그에 선언된 변수는 스크립틀릿 태그 내에서만 사용
지역 변수 선언
<body>
<%
int count = 0; // 지역 변수 선언
%>
Page Count is
<%
out.println(++count); // 지역 변수 1 증가.
%>
</body>
자바스크립트를 사용하여 브라우저가 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식. (ex. 구글 지도)
👾 Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반을 동작 👾 XMLHttpRequest : HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공
👾 이전의 웹페이지는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작 ➡️ 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링
전통적 방식의 단점
a. 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터
매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생 b. 변경할 필요가 없는 부분까지 처음부터 다시 렌더링 한다. 이로 인해 화면 전환이 일어나면 화면이 순간적으로
깜빡이는 현상이 발생한다. c. 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처리는 블로킹 된다.
Ajax의 장점
a. 변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신 발생 x b. 변경할 필요가 없는 부분은 다시 렌더링하지 않는다. 따라서 화면이 순간적으로 깜빡이는 현상이 발생하지 않는다. c. 클라이언트와 서버와의 통신이 비동기 방식으로 동작하기 때문에 서버에게 요청을 보낸 이후 블로킹이 발생하지 않는다.
Ajax의 단점
a. 즐겨찾기나 검색엔진에 불리 b. 개발이 상대적으로 어려움
💡 '동기(synchronous)'란 - 직렬적으로 태스크를 수행 ▶️ 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식 (순차 진행) 💡 '비동기 (asynchronous)'란 - 병렬적으로 태스크를 수행 ▶️ 요청을 보낸 후 응답의 수락 여부와는 상관없이 다음 태스크가 동작 (멀티 진행)
<script>
document.addEventListener('DOMContentLoaded', function () {
// 1. XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();
// 2. HTTP 요청 초기화
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
// HTTP 요청 방식(GET, POST), 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
// 3. 이벤트 등록. XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때마다 자동으로 호출
xhr.onreadystatechange = () => {
// readyState 프로퍼티의 값이 DONE : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.
if(xhr.readyState !== XMLHttpRequest.DONE) return;
if(xhr.status === 200) { // 서버(url)에 문서가 존재함
console.log(JSON.parse(xhr.response));
/*
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}
*/
const obj = JSON.parse(xhr.response);
console.log(obj.title); // delectus aut autem
} else {
console.error('Error', xhr.status, xhr.statusText);
}
}
xhr.send(); // 4. url에 요청을 보냄.
});
</script>
💡onreadystatechange 서버로 부터 응답이 오게 되어 XMLHttpRequest 객체의 값이 변하게 되면 이를 감지해 자동으로 호출되는 함수를 설정한다. 함수를 등록하게 되면 서버에 요청한 데이터가 존재하고, 서버로부터 응답이 도착하는 순간을 특정할 수 있게 된다.
💡 status 서버의 문서 상태를 표현한다(200 : 존재 / 404 : 미존재)
💡 xhr.send()
send() 메서드를 통해 서버로 객체를 전달한다. 이때 send() 메서드 매개변수를 쓰냐 안쓰냐에 따라 GET / POST 방식으로 다르게 보내게 된다.
💡 readyState 프로퍼티
XMLHttpRequest 객체의 현재 상태를 나타낸다.이 프로퍼티의 값은 객체의 현재 상태에 따라 다음과 같은 주기로 순서대로 변화한다.
