[AJAX와 JSP] AJAX 대신 JSP를 사용하는 이유 & JSP 대신 AJAX를 사용하는 이유

 

 

JSP를 공부하는데 문득 그런 생각이 들었다.
HTML대신 JSP를 사용하는 이유가 동적인 콘텐츠를 클라이언트에게 반환하기 위해서라고 하는데,
예전에 프론트엔드 개발을 잠시 했었을 때 HTML을 가지고도 동적으로 보이는(?) 페이지를 잘만 만들었던 기억이 있다.

그래서 둘이 뭔 차이였을지, 또한 굳이 JSP를 사용해야 할까 하는 생각이 들었다.

 

1. 클라이언트가 URL을 통해 요청을 보냄 →
2. 웹 서버가 요청을 받고 클라이언트에게 바로 응답하거나 웹 컨테이너로 전달 →
3. 웹 컨테이너가 URL에 맞는 Servlet이나 JSP를 실행 →
4. Servlet이 요청을 처리하고 필요한 데이터를 생성 →
5. JSP가 동적인 HTML 페이지를 생성하여 응답 준비 →
6. 웹 서버가 생성된 HTML 페이지를 클라이언트에 전달하여 응답 완료.

 

위의 클라이언트 - 서버 응답 로직을 보면, html 문서를 반환하면 2번 단계에서 바로 응답이 가능하다.

html을 동적으로 만들수만 있다면(예전에 만들었기에 가능하다고 생각) 3~6 단계를 바로 뛰어넘을 수 있다.

 

그럼 html은 정적이라고 하는데, 예전에 어떻게 만들었던 건지 조금 더 검색을 했었는데,

그 당시 AJAX를 이용하여 웹페이지를 개발했었다.

JSP는 동기적인데, 그럼 AJAX는 동기적이 아닌걸까 하고 알아보았다.

 

 

 

 

AJAX와 다른 도구들

AJAX, Fetch API, Axios 같은 도구를 사용하면 클라이언트가 서버의 API로부터 데이터를 비동기적으로 가져오고, 해당 데이터를 HTML 문서에 반영하는 방식을 사용하면 동기적인 것처럼? 보이게 구현할 수 있음

그래서 실제로 JSP보다는 AJAX 기술을 많이 이용

 

 

 

 

그럼 비동기란 무엇이고 동기와의 차이는 뭘까??

• 동기 ⇒ JSP
  • 클라이언트가 서버로 데이터를 요청하면 응답이 올 때까지 다른 작업은 대기
  • 실시간 정보 업데이트, 맞춤형 사용자 경험 제공 가능

• 비동기 ⇒ AJAX
• 클라이언트가 서버로 데이터를 요청 후, 응답을 기다리지 않고 다른 작업 수행 가능. 추후에 요청에 대한 응답이 오면 응답에 관련된 작업 진행
• 요청을 보내고 기다리지 않고 다른 작업을 수행 가능

 

 

 

 

JSP VS AJAX

JSP (서버 측 기술)

• 위치: 서버
• 역할: 사용자가 웹 페이지를 요청하면, JSP는 서버에서 HTML을 동적으로 생성하고 이를 사용자(클라이언트)에게 반환
• 사용 방식: 서버가 클라이언트의 요청을 받아 필요한 데이터를 처리하고 그 결과를 HTML로 만들어 브라우저에 전달. JSP는 HTML 내에 Java 코드를 삽입할 수 있어 데이터베이스 쿼리나 비즈니스 로직을 쉽게 통합할 수 있음
• 장점: 초기 HTML을 서버에서 동적으로 생성해 반환하기 때문에 사용자에게 맞춤화된 페이지를 생성하기 좋음. 주로 서버 측 비즈니스 로직이나 데이터베이스 연동이 필요한 경우 많이 사용

AJAX (클라이언트 측 기술)

• 위치: 클라이언트 측(JavaScript를 통해 브라우저에서 실행).
• 역할: 클라이언트 측에서 서버와 비동기적으로 통신하여 필요한 데이터를 가져오고, 해당 데이터를 웹 페이지에 부분적으로 적용하여 동적 화면을 구성
• 사용 방식: JavaScript로 서버에 요청을 보내고 서버에서 데이터(JSON, XML 등)를 받아, 받아온 데이터를 사용해 브라우저의 특정 부분을 업데이트
• 장점: 페이지 전체 새로고침 없이 서버와 통신이 가능하여 사용자 경험을 크게 개선할 수 있음. 페이지가 동적으로 변화해야 할 때 효율적으로 사용할 수 있음

 

 

 

 

⇒ JSP가 있는데 AJAX를 사용하는 이유?

• AJAX와 같은 클라이언트 측 기술을 사용하면 프런트엔드와 백엔드 역할을 명확히 분리할 수 있음
• 페이지의 일부분만 서버에서 받아와 새로고침 없이 필요한 부분만 업데이트할 수 있음
• 비동기 방식으로 서버와 통신하기 때문에 여러 요청을 동시에 처리할 수 있음
• SPA(Single Page Application) 개발에 유리
• 많은 웹 애플리케이션이 RESTful API를 기반으로 데이터를 가져오는 방식으로 개발되고 있는 상황, API는 AJAX와 함께 사용하면 페이지 전체를 새로고침할 필요 없이 데이터를 받아와 UI를 업데이트할 수 있음
• JSP는 RESTful API와 잘 맞지 않음 ⇒ JSP로 생성된 페이지는 API가 아닌 완성된 HTML을 반환하므로, API 중심 개발과 분리된 구조에서 적합하지 않음

 

⇒ AJAX가 있는데 JSP를 사용하는 이유?

• 초기 페이지 로드 시 데이터 제공 및 SSR 지원
• 비즈니스 로직을 서버에서 처리 (ex. 데이터베이스에서 데이터를 조회하고 이를 HTML에 반영해야 하는 경우, 클라이언트 측에서 직접 데이터베이스 접근을 할 수 없으므로, 서버에서 JSP가 이 역할을 수행)
• 서버 측에서 데이터를 처리함으로써, 데이터를 안전하게 보호
• JSP는 세션이나 쿠키를 사용하여 사용자 상태를 관리하며, 로그인된 사용자에 따라 다르게 페이지를 구성할 수 있음
• 민감한 데이터 처리가 필요한 웹 애플리케이션의 경우, 서버 측에서 데이터 처리를 마친 뒤 결과만 클라이언트에 전달하는 것이 보안에 유리
• AJAX만으로는 부족한 초기 페이지 로드, 보안 처리, 복잡한 데이터 접근 등의 서버 측 처리를 위해 JSP가 여전히 유용

 

 

 

AJAX와 JSP의 혼합 사용

사실, 많은 웹 애플리케이션은 JSP와 AJAX를 조합하여 사용한다고 한다. 초기 페이지는 JSP로 서버에서 렌더링하여 전달하고, 페이지 내에서 특정 데이터만 AJAX를 통해 비동기적으로 가져오는 방식이 일반적인데, 이 조합은 빠른 로드 속도와 유연한 데이터 갱신을 모두 가능하게 한다.