ETC SPA(single-page-application)
— ETC, REACT, JAVASCRIPT, 2022 — 3 min read
배경
- 사용자의 브라우저를 확인하는 기능 추가를 위해 회의를 했었다.
- client 와 server 의 관해 설명을 듣다가 web server 도 있고 application server 도 존재한다는 것을 알게되었다.
- web server 랑 application server 랑 차이가 뭐냐고 질문했다.
- 그날 알려주셨던 내용을 정리해보려고 한다.
어떤 개념을 알기 위해서 역사를 알아야 한다는 조언을 듣고 역사부터 차례로 정리해 보자
과거의 브라우저와 서버
| - 1.요청---------> |(browser)| | (server) | | web server <=> application server --- > | DB | <-2.html,js,css - | web server: 결과를 만듬 | | application server : DB와 접속 가능
-
web 은?
-
서버사이드 렌더링
-
AJAX = 비동기 자바스크립트와 XML
- 일부 데이터만 요청 => 받아와서 그 부분만 변경
SPA(Single Page Application) 단일 페이지 애플리케이션
첫 페이지 로딩 이후(한 번 로딩된 후)에는 서버로부터 전체 페이지를 다시 불러오지 않고 필요한 데이터만 비동기적으로 받아와서 동적으로 페이지를 갱신
JavaScript와 AJAX를 사용하여 웹 페이지를 구성 SPA는 React,Vue 프론트엔드 프레임워크나 라이브러리와 함께 사용
SPA 사용이 점점 증가 이유
웹으로 뱅킹, 전자상거래 등 다양한 기능을 사용자가 원하고 PC 성능이 좋아지면서 사용자들이 더 많은 기능과 상호작용을 원했습니다. 그러나 기존의 다중 페이지 애플리케이션은 각각의 페이지를 로딩할 때마다 서버가 HTML을 생성하여 전달해야 했습니다. 서버 부담을 줄이기 위해 SPA는 데이터만 주고 받아서 동적으로 HTML을 바꿔서 사용자에게 더 빠르고 부드러운 경험을 제공하게 되었습니다
참고
https://byul91oh.tistory.com/77?category=991595 https://velog.io/@lucas/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%A9%B4%EC%A0%91-%EC%A4%80%EB%B9%84 https://bbangson.tistory.com/87 https://im-designloper.tistory.com/97 https://velog.io/@1nthek/React-Virtual-DOM%EA%B3%BC-%EB%A0%8C%EB%8D%94%EB%A7%81