Skip to content
GwiyeomGo Tech Blog
About GwiyeomGo

ETC SPA(single-page-application)

ETC, REACT, JAVASCRIPT, 20223 min read

배경

  1. 사용자의 브라우저를 확인하는 기능 추가를 위해 회의를 했었다.
  2. client 와 server 의 관해 설명을 듣다가 web server 도 있고 application server 도 존재한다는 것을 알게되었다.
  3. web server 랑 application server 랑 차이가 뭐냐고 질문했다.
  4. 그날 알려주셨던 내용을 정리해보려고 한다.

어떤 개념을 알기 위해서 역사를 알아야 한다는 조언을 듣고 역사부터 차례로 정리해 보자

과거의 브라우저와 서버

| - 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

© 2024 by GwiyeomGo Tech Blog. All rights reserved.