[1차] 프리온보딩 챌린지(FE) - SPA의 원리와 사용자 경험을 향상시키는 방법

2월 챌린지에선 상황에 맞는 프론트엔드 개발 전략에 관한 주제로 진행된다고 한다.

React의 장점인 SPA, 렌더링이 서버측과 클라이언트 측 어디에서 되는지에 따른 SSR, CSR과 웹 앱/네이티브 앱의 장점을 모두 활용한 PWA가 있다.

 

그 중 첫 번째 주제로 SPA에 대해 알아보는 시간이 되었다.

 

[Week 1-1] SPA의 원리를 배우고, 사용자 경험을 향상하는 방법을 탐구합니다.

 

1-1) SPA의 기본적인 이해

SPA(Single Page Application)

웹 페이지가 하나의 애플리케이션으로 페이지의 리로드/리렌더링 없이 필요한 부분만 빠르게 업데이트하여 좋은 UX를 제공할 수 있다.

 

https://medium.com/@teamtechsis/single-page-applications-spa-48b1b845b446

SPA
- 페이지 전환 없이 동적 컨텐츠 업데이트
- CSR
- 초기 로딩 시간 길어짐
- 전통적인 SEO 최적화에 안좋음

MPA
- 페이지마다 HTML 파일 존재
- SSR
- 페이지 이동시 서버에 부하
- SEO 친화적

 

여기에서 React가 SPA에 장점인 이유가 나온다.

우선 React의 생명주기를 살펴보면 Props, State 등이 업데이트될 때 컴포넌트가 재렌더링 된다.

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

그 과정에서 새로운 가상 DOM 트리를 생성하고, 기존의 DOM 트리와 비교를 하게 된다.

이를 Diffing이라고 부르는데 두 트리의 차이점을 찾아내고 실제로 변경된 부분(업데이트가 필요한 부분)만 실제 DOM에 반영한다.

이러한 Reconsiliation을 통해 불필요한 DOM 조작을 최소화하고 렌더링 속도, 사용자 경험 향상을 이룰 수 있다.

 

https://callmedevmomo.medium.com/virtual-dom-react-%ED%95%B5%EC%8B%AC%EC%A0%95%EB%A6%AC-bfbfcecc4fbb

Virtual DOM (React) 핵심정리

 

맞는 말 처맞는 말

---

 

1-2) SPA의 장점과 한계

SPA 장점
- 사용자 경험 개선
- 개발 효율성

SPA 단점
- 초기 로딩 시간
- SEO 최적화
- 브라우저 호환성

 

장점
1. SPA는 페이지 전환 없이 업데이트하기 때문에 사용자의 요구에 빠르게 반응할 수 있다.
2. 초기 페이지 로드 이후엔 추가적인 페이지 로드가 없기 때문에 빠른 전환이 가능하다.
3. 프론트엔드와 백엔드를 분리하여 개발할 수 있기 때문에 개발 효율성을 높일 수 있다.
4. SPA는 컴포넌트 기반의 아키텍처를 사용하기 때문에 재사용 가능한 컴포넌트를 만들 수 있어 코드의 효율성을 높일 수 있다.

단점
1. 초기 페이지 로드 시 HTML, CSS, JavaScript 등 필요한 자원을 한 번에 다운로드하여야 하기 때문에 초기 로딩 시간이 길어진다.
2. SPA는 JavaScript를 사용해 동적으로 클라이언트에서 렌더링 하기 때문에 검색 엔진이 페이지의 콘텐츠를 제대로 인식하지 못하는 문제가 발생할 수 있다.
3. SPA는 일반적으로 최신 버전의 웹 기술을 사용하기 때문에 이전 버전의 브라우저에서 호환성 문제가 발생할 수 있다.

 

https://www.elancer.co.kr/blog/view?seq=214

SPA란? 웹 개발 트렌드 SPA의 특징부터 구현 방법까지 모두 알려드립니다! I 이랜서 블로그

 

---

 

1-3) SPA 개발 고려사항

 

SPA 개발 시 단점을 보완하기 위해 고려해야 할 것들 중 이번에 새로 알게 된 내용을 정리하려고 한다. 기본적으로 SPA는 CSR 방식이 많음으로 이를 이해하기 위해선 CSR과 SSR의 차이를 알아야 한다.

CSR(Client Side Rendering) : 웹 페이지의 렌더링 방식 중 클라이언트 측(브라우저)에서 HTML, CSS, JavaScript 등을 렌더링 하는 방식

SSR(Server Side Rendering) : 서버에서 모든 HTML 생성 후 브라우저 렌더링하는 방식

 

https://tech.weperson.com/wedev/frontend/csr-ssr-spa-mpa-pwa/#csr-client-side-rendering

CSR/SSR, SPA/MPA, PWA | 위펄슨 기술 블로그

 

그다음으로 상황에 맞는 프레임워크/라이브러리를 선택해야 한다.

 

1. React

Facebook에서 개발한 라이브러리이며 컴포넌트 기반의 JSX를 사용해 컴포넌트 안에 비즈니스 로직과 HTML UI 로직을 같이 구성할 수 있다. 많이 사용되고 다양한 라이브러리 생태계를 갖고 있으므로 다양한 요구사항에 적응할 수 있다.

 

2. Angular

Google에서 개발한 프레임워크로 TypeScript를 기본 언어로 사용하며, MVC 패턴이 적용 가능하다.

 

3. Vue

React와 Angular의 장점을 적용했으며 가볍고 사용하기 쉬운 프레임워크다. 빠르고 유연한(애자일) 개발이 가능하므로 소/중규모 프로젝트에 적합하다.

 

세 가지 모두 공통적으로 SPA 개발에 장점이 있다. 현재 상황, 프로젝트의 규모, 호환성 등을 따져 그에 맞는 도구를 사용하면 되겠다. 아마 대부분은 기존에 사용하던 라이브러리 혹은 프레임워크를 사용하겠지만, 레거시 코드를 리펙터링 하거나 새로운 프로젝트를 시작할 때 기존의 단점을 보완하고자 새로운 방식을 도입할 수도 있을 것이다.

 

추가적으로 SPA 방식에서 성능 최적화를 위한 전략으로 몇 가지를 소개해 주셨는데, Code Splitting, Lazy-loading은 1월 챌린지중 최적화 부분에서 다루었던 내용이므로 새로 알게 된 브라우저 캐시을 알아보았다.

 

웹 캐시(web cache) 또는 HTTP 캐시(HTTP cache)는 서버 지연을 줄이기 위해 웹 페이지, 이미지, 기타 유형의 웹 멀티미디어 등의 웹 문서들을 임시 저장하기 위한 정보기술이다. 웹 캐시 시스템은 이를 통과하는 문서들의 사본을 저장하며 이후 요청들은 특정 조건을 충족하는 경우 캐시화가 가능하다.

- 위키백과

 

웹 캐시의 좀 더 좁은 의미로 사용되는 브라우저 캐시는 사용자(클라이언트)측의 브라우저에 저장되는 캐시인데, 웹 페이지를 방문할 때 필요한 파일(HTML, CSS, JavaScript, Image 등)을 로컬에 저장하는 것이다.

 

이렇게 저장해 둘 경우 다음에 같은 페이지에 접속했을 때 새로 다운로드할 필요 없이 재사용 가능하기 때문에 페이지 로딩 속도를 높일 수 있다. 특히 SPA에서 초기 로딩 시간이 단점이므로 캐싱을 통해 로딩 시간과 네트워크 사용을 크게 줄일 수 있다.

 

https://yozm.wishket.com/magazine/detail/2341/

프론트엔드 개발자가 알아야 할 ‘캐싱’ 개념 정리 | 요즘IT

https://toss.tech/article/smart-web-service-cache

웹 서비스 캐시 똑똑하게 다루기

 

---

 

1-4) 성공적인 SPA 구현 사례

Gmail
Facebook
Airbnb
Netflix

 

위의 웹 페이지는 SPA 방식을 적용하여 사용자들에게 필요한 부분만 추가/제거되어 로드되게 구현하였다. 이메일을 읽거나, SNS의 피드를 스크롤할 때, 그리고 선택한 숙소를 페이지 전환 없이 상태를 확인하고 예약-결제까지 이루어질 수 있도록 한다.

 

특히 과거와 달리 스마트폰과 태블릿으로 웹/앱 애플리케이션을 사용하는 경우가 많아진 만큼 더 빠르고 원활한 인터렉션을 제공하기 위해선 SPA의 발전이 필수적이다고 생각한다.

 

console.log("Hello World!")