0️⃣ 들어가며
React와 SPA(단일 페이지 애플리케이션) 간의 관계는 꽤 밀접해요.
SPA는 전통적인 다중 페이지 애플리케이션(정적[Static] 웹페이지)과는 다르게
한 번에 하나의 HTML 페이지만 로드되고!
사용자가 페이지를 이동할 때마다 새로운 콘텐츠를 동적으로 불러오는 웹 애플리케이션이에요
1️⃣ 빠른 이해를 위한 질문타임
🙋🏻 : 페이지를 이동할 때마다 새로운 콘텐츠를 동적으로 불러온다는게 무슨 말이지?, 원래 페이지 이동할때마다 콘텐츠 동적으로 불러오는거 아니야?(동적? 정적?)
Static(정적) : 움직이거나 변하지 않는 Dynamic(동적) : 끊임 없이 변하거나 발달하는
정적 웹 페이지?
🐸 : 먼저 전통적인 다중 페이지 애플리케이션의 경우 부터 예를 들어볼게요
여러분이 쇼핑몰 웹사이트를 방문했습니다.
홈페이지에서 여러 페이지에 들어갈수있죠 홈, 제품목록 페이지, 로그인 페이지, 회원가입 페이지 등 여러 페이지로 이동할 수 있을거에요.
각각의 페이지로 이동하기위한 버튼을 눌러 각각의 페이지로 이동하려고 할때마다 브라우저는 그 페이지에 대한 HTML을 달라고 서버에 요청을 보내고 서버는 매번 새로운 HTML을 반환 해요.
( 위와 같은 브라우저의 동작에서 매번 이라는 단어가 정적[Static] 웹 페이지 동작의 키포인트라고 생각하면 될것같아요 )
💬 몰랐죠?? 지금은 어느덧 SPA가 적용된 웹사이트가 많아졌지만 아직도 간단한 광고페이지나 회사소개 페이지 같은 경우는 정적으로 동작하는 경우가 많답니다.
동적 웹 페이지(SPA)?
🐸 : 그러나! SPA는 달라요
SPA를 사용하면 한 번에 하나의 HTML 페이지만 로드됩니다. 이 페이지는 React, Angular, Vue와 같은 프론트엔드 프레임워크로 작성된답니다.
위의 전통적인 다중 페이지 어플리케이션 예시와 같이
페이지를 이동하기 위해 사용자가 클릭 이벤트를 일으킬 때 마다 그 페이지에 해당하는 HTML을 매번 새로받아오는 것이 아니라 변경되는 부분만 가져와서 현재 페이지의 일부분만 업데이트해요.
물론 이 과정에서 전체 페이지를 매번 다시 로드할 필요가 없습니다. 이것이 SPA의 핵심 이에요.
🙋🏻 : SPA에서 페이지를 이동할 때 모든 구성요소가 바뀐(
메인페이지 -> 로그인페이지로 이동할때 처럼) 전혀 새로운 페이지면 그것도 SPA 동작이니?
🐸 : 네!, SPA에서 페이지를 이동할 때 모든 구성 요소가 바뀌는 것도 여전히 SPA의 동작입니다. SPA에서는 페이지 간의 전환이 이루어지더라도 전체 페이지를 새로 로드하지 않고도 콘텐츠를 업데이트합니다.
2️⃣-1 SPA 장점
- 뛰어난 사용자 경험, 빠른 응답성 : SPA를 사용하면 HTML을 매번 다시 불러올 필요가 없기때문에 페이지 이동시 화면 깜빡임이나 딜레이가 거의 없는 것 처럼 느껴져 화면 전환이 부드럽고 빠릅니다
가장 핵심 ❗사용자 경험 증가❗
-
서버 부담 감소 : SPA는 한 번 로드된 후에는 필요한 데이터만 서버로부터 동적으로 가져오므로, 서버의 부담을 줄일 수 있습니다. 이는 서버의 대역폭과 자원 사용을 최적화하고 서버 비용을 절감할 수 있는 장점을 더해줍니다.
-
캐싱과 성능 최적화 : SPA는 클라이언트 측에서 데이터를 캐싱하여 성능을 최적화할 수 있습니다. 필요한 데이터를 미리 로드하거나 캐시하여 사용자가 애플리케이션을 더욱 빠르게 이용할 수 있습니다.
2️⃣-2 SPA 단점
-
초기 로딩 시간: SPA는 초기에 모든 자원을 한 번에 로드하므로 초기 로딩 시간이 길어질 수 있습니다. 특히 애플리케이션이 크고 복잡한 경우 사용자가 페이지를 처음 로드할 때 사용자 경험이 저하될 수 있습니다.
🙋🏻 : 그럼 예를 들어 SPA로 만든 웹페이지의 메인화면에 들어갔을때도 로그인페이지를 비롯한 웹에 존재하는 모든 html ,css, js 까지 전부 들고온다는 말인가요?
🐸 : 넵 일반적으로 SPA에서는 사용자가 웹 애플리케이션에 접속할 때 애플리케이션 전체에 필요한 HTML, CSS 및 JavaScript 파일을 한 번에 다운로드합니다. 따라서 메인 화면에 접속할 때에도, 로그인 페이지에 필요한 모든 리소스가 미리 다운로드됩니다. -
검색 엔진 최적화(SEO) 어려움: SPA는 클라이언트 측에서 동적으로 콘텐츠를 렌더링하므로, 초기에는 검색 엔진이 페이지의 콘텐츠를 인식하는 데 어려움을 겪을 수 있습니다. 이로 인해 SEO에 대한 최적화가 어려울 수 있습니다. 이러한 문제를 해결하기 위해 서버 사이드 렌더링(SSR)을 사용하는 방법도 있지만, 구현이 복잡할 수 있습니다.
🚩 다음 포스팅에서 만날 키워드 : SEO, SSR
-
메모리 관리 문제: SPA는 클라이언트 측에서 모든 페이지를 동적으로 로드하고 유지하기 때문에 메모리 관리가 중요합니다. 사용자가 페이지를 계속해서 이동하면서 많은 자원이 메모리에 쌓일 수 있으며, 이로 인해 메모리 누수와 성능 저하 문제가 발생할 수 있습니다.
3️⃣ 마무리 정리
🐸 : 글을 작성하면서 SPA와 정적페이지를 처음 이해하기 시작한 사람에게 어떻게
알잘딱하게 이해시킬 수 있을까 고민했는데요
음,, 이런 비유가 맞을지는 모르겠습니다 방금 그냥 생각해본 비유라
a4용지 두장이 있습니다. 나(브라우저), 친구(서버)
- 한장에는 크게 메인화면이라고 적혀있고, 두번째 장에는 로그인페이지라고 적혀있습니다.
- 두 종이 모두 앞에있는 친구가 가지고 있습니다.
- 친구에게 메인화면 종이를 달라고 요청 합니다. 메인화면 페이지를 받습니다.
- 그 후 로그인 페이지를 친구에게 달라고 요청(서버에 요청) 하면 로그인페이지 종이를 내가받고 메인화면 페이지는 친구가 가져갑니다
( 실제로는 서버에 반납 개념은 없음 ) - 마음이 바껴서 다시 친구에게 메인화면 요청을하여 메인화면 종이를 받아오고 로그인 페이지 종이는 손에서 놓습니다
👆🏻 위와같은 행동이 `정적페이지` : 변하지않는 HTML문서(종이)를 만들어놓고 호출하는 것
a4용지 한장이 있습니다. 나(브라우저), 친구(서버)
- 한장에 메인화면이라고 적혀있고 친구(서버)가 가지고 있습니다.
- 친구에게 메인화면 페이지 종이를 달라고 요청 합니다.
- 메인화면 페이지종이를 받고 난 뒤 로그인페이지 화면을 요청하면 친구는 로그인 페이지는 어떤 위치에 "로그인 페이지"라고 적혀있다고 내용(데이터),위치 만 알려주면 내가
처음받은 종이에 메인페이지라는 글자를 지우고 "로그인 페이지"라고 정해진 위치에 적습니다.🚩 다시그리는건 Reflow 라는 개념으로 다른 포스팅에서 다룰게요!
👆🏻 한 번에 하나의 HTML 페이지만(종이) 로드되고, 사용자가 페이지를 이동할 때마다 새로운 콘텐츠("로그인 페이지" 내용과 글이적힐 위치 정보)만 동적으로 불러오는.
🐸 : 이런 비유 어때요?!?! 태클걸어주세요 빨리
끝🙋🏻
🚩 아! 그리고 간혹 정적페이지랑 SSR의 개념을 헷갈리시는 분이 계시던데 다른 포스팅에서 다루겠습니다!
💬 : 위 내용에대해 더 궁금한점이 있거나,
틀린내용이 있거나
질문이 있다면 댓글로 달아주세요.!!
