웹 애플리케이션의 구성 방식: MPA와 SPA / 렌더링 방식: SSR과 CSR

웹 애플리케이션의 구성 방식: MPA와 SPA

MPA (Multi-Page Application):

• 여러 개의 페이지로 구성된 웹 애플리케이션입니다.
• 각 페이지는 별도의 HTML 파일로 존재하며, 사용자가 페이지를 요청할 때마다 서버로부터 새로운 HTML 파일을 받아옵니다.
• 예를 들어, 사용자가 다른 페이지로 이동할 때마다 전체 페이지가 새로 고침됩니다.

SPA (Single Page Application):

• 하나의 페이지로 구성된 웹 애플리케이션입니다.
• 초기 로딩 시 단일 HTML 파일이 로드되고, 이후 모든 페이지 전환 및 데이터 로딩은 JavaScript를 통해 동적으로 이루어집니다.
• 예를 들어, 사용자가 다른 "페이지"로 이동해도 실제로는 새로운 HTML 파일을 요청하는 것이 아니라, JavaScript가 DOM을 업데이트하여 페이지가 전환된 것처럼 보이게 합니다.
  
  

---

렌더링 방식: SSR과 CSR

* 렌더링(Rendering)은 컴퓨터 그래픽스와 웹 개발에서 주로 사용되는 용어로, 데이터나 코드로부터 화면에 보이는 시각적인 결과물을 생성하는 과정을 의미합니다. 웹 개발 문맥에서는 주로 HTML, CSS, JavaScript 등을 사용하여 브라우저가 웹 페이지를 표시하는 과정에 대해 이야기할 때 사용됩니다.

SSR (Server-Side Rendering):

• 서버에서 HTML을 렌더링하여 클라이언트에게 전달합니다.
• 사용자가 페이지를 요청하면, 서버는 해당 페이지의 HTML을 생성하여 클라이언트에게 반환합니다.
• 주로 초기 로딩 속도가 빠르고, SEO에 유리합니다.

CSR (Client-Side Rendering):

• 클라이언트(브라우저)에서 JavaScript를 사용하여 HTML을 렌더링합니다.
• 초기 로딩 시에는 최소한의 HTML과 JavaScript 파일을 로드하고, 이후 필요한 데이터를 API를 통해 서버에서 받아와 클라이언트 측에서 페이지를 동적으로 구성합니다.
• 사용자가 상호작용하는 동안 필요한 부분만 업데이트하여 빠른 사용자 경험을 제공합니다.
  
  

---

SPA (Single Page Application)와 CSR(Client-Side Rendering),
MPA(Multi-Page Application)와 SSR(Server-Side Rendering) 의 관계

• SPA가 반드시 CSR인 것은 아닙니다. SPA는 클라이언트 측에서 페이지를 동적으로 구성하지만, SSR을 활용할 수도 있습니다. 예를 들어, 초기 페이지 로딩 시에는 서버에서 HTML을 렌더링한 후 클라이언트에게 전달하고, 이후의 상호작용은 CSR 방식으로 처리하는 혼합형 방식(예: Next.js의 getServerSideProps)도 가능합니다.
• MPA가 반드시 SSR인 것도 아닙니다. MPA는 여러 페이지로 구성된 애플리케이션이지만, 각 페이지의 일부를 클라이언트 측에서 동적으로 구성할 수도 있습니다. 예를 들어, 각 페이지의 일부 데이터를 클라이언트 측에서 Ajax 요청을 통해 받아와 업데이트하는 방식도 사용할 수 있습니다.
  
  

---

요약

• MPA와 SPA는 웹 애플리케이션의 구조를 나타내며, 여러 페이지로 구성된 애플리케이션인지 하나의 페이지로 구성된 애플리케이션인지를 구분합니다.
• SSR과 CSR은 렌더링 방식을 나타내며, HTML을 서버에서 렌더링하는지 클라이언트에서 렌더링하는지를 구분합니다.
• SPA는 CSR 방식을 주로 사용하지만 SSR 방식과도 결합될 수 있습니다.
• MPA는 SSR 방식을 주로 사용하지만 CSR 방식의 요소를 포함할 수도 있습니다.
  
  
  

---

정보처리기사 필기, 시나공과 함께 시작하세요!
IT 자격증 시험 준비의 표준, 시나공은 믿을 수 있는 파트너입니다. 정보처리기사 필기를 대비하는 가장 효율적이고 효과적인 방법을 찾고 있다면, 시나공 시리즈가 최선의 선택입니다.
정보처리기사 필기 시나공으로 시작하세요!

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."