[Web] Java 백엔드 개발자가 되기 위해 공부해야 할 것들 : JSP 모델, Ajax, jQuery, SPA(React, Vue.js, Angular)

728x90

Kevin Java 개발자 로드맵 강의를 보면서

[무료] Kevin의 알기 쉬운 Java 개발자 로드맵 이야기 - 인프런 | 강의

Kevin의 알기 쉬운 Java 개발자(웹 개발자) 로드맵 이야기, - 강의 소개 | 인프런...

www.inflearn.com

Java 웹 개발자로서 공부해야할 것들이 머리에 잘 들어온 것 같아

기억해두려고 정리하는 글입니다 🧐

JSP 모델 1 방식

- DB에서 조회한 Data를 View Page(HTML 조각코드)로 가공하여 응답으로 보낸다

JSP 모델 2 방식

- JSP는 View Page를 만드는 역할만을 분리하여 가지기 때문에 코드가 간단하고 깔끔하다

- Servlet에서 DB로 부터 얻은 Data를 JSP에 제공하고, View Page를 돌려받는다

AJAX

Asynchronous JavaScript And XML

XML 데이터를 JavaScript로 Asynchronous하게 전송한다!

Synchronous 통신

- 지금까지의 JSP 방식

- 사용자가 응답이 올 때까지 대기해야 한다

- 응답이 오면 페이지 전체가 refresh 된다

Asynchronous 통신

- A 컨텐츠에 대한 응답을 기다리면서 다른 작업이 가능하다

- 응답이 오면 A 컨텐츠 부분만 refresh되고 page가 refresh되지 않는다

💡 AJAX 사용의 장점

: 사용자가 서버 응답을 기다리지 않고 다른 작업이 가능하다 → UX (User eXperience; 사용자 경험) 개선

jQuery

- JavaScript 라이브러리, API

- HTML document 탐색, 조작, event handling, Ajax 통신을 더 단순한 code로 사용할 수 있게 한다

- Write less, Do more

Spring Framework와 Spring boot

따로 글로 정리해두었습니다 👉 Click to Go!

SPA (Single Page Application)

- 웹 브라우저에 보여지는 화면이 refresh 없이 변경된다

- Ajax 통신 기술을 이용해 전체/일부 화면의 데이터를 갱신

SPA 구현을 위한 프레임워크 또는 라이브러리

- React

- Vue.js

- Angular

Angular의 특징

- 유연성이 떨어진다(자유도 ↓)

(유연성 : React > Vue.js > Angular)

- 구조화가 잘 되어있어 생산성에 유리하다

- 모듈화를 통한 유지보수 용이

- 적절한 학습 난이도 (Angular = React > Vue.js)

Kevin's Java 개발자 로드맵

노란색으로 표시된 것들은 추가적으로 공부하면 좋을 것들입니다 🙌