2월 챌린지에선 상황에 맞는 프론트엔드 개발 전략에 관한 주제로 진행된다고 한다.
React의 장점인 SPA, 렌더링이 서버측과 클라이언트 측 어디에서 되는지에 따른 SSR, CSR과 웹 앱/네이티브 앱의 장점을 모두 활용한 PWA가 있다.
그 중 첫 번째 주제로 SPA에 대해 알아보는 시간이 되었다.
[Week 1-1] SPA의 원리를 배우고, 사용자 경험을 향상하는 방법을 탐구합니다.
1-1) SPA의 기본적인 이해
SPA(Single Page Application)
웹 페이지가 하나의 애플리케이션으로 페이지의 리로드/리렌더링 없이 필요한 부분만 빠르게 업데이트하여 좋은 UX를 제공할 수 있다.
SPA
- 페이지 전환 없이 동적 컨텐츠 업데이트
- CSR
- 초기 로딩 시간 길어짐
- 전통적인 SEO 최적화에 안좋음
MPA
- 페이지마다 HTML 파일 존재
- SSR
- 페이지 이동시 서버에 부하
- SEO 친화적
여기에서 React가 SPA에 장점인 이유가 나온다.
우선 React의 생명주기를 살펴보면 Props, State 등이 업데이트될 때 컴포넌트가 재렌더링 된다.
그 과정에서 새로운 가상 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) 핵심정리
리액트가 수많은 개발자들 사이에서 엄청난 사랑을 받는 이유중 한가지는 바로 빠른 속도입니다.
callmedevmomo.medium.com
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 이랜서 블로그
웹 페이지 로딩 속도를 향상시키고 트래픽을 줄여 부드러운 페이지 전환과 함께 업데이트가 될 때까지 기다리는 시간을 단축시켜 사용자로 하여금 높은 몰입도와 생동감을 선사하는 웹 페이지
www.elancer.co.kr
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 | 위펄슨 기술 블로그
CSR/SSR, SPA/MPA, PWA 이번 주제는 렌더링(Rendering)방식과 웹아키텍처(Architecture)에 관한 얘기입니다. 렌더링/웹아키텍처라는 말보다는 SSR, SPA등 용어를 주로 사용하므로 주제에 용어를 나열 하였습니
tech.weperson.com
그다음으로 상황에 맞는 프레임워크/라이브러리를 선택해야 한다.
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
프론트엔드 개발자라면 아마 웹사이트 성능을 최적화하는 것에 관심이 있을 것이다. 웹사이트 로딩 시간을 줄이고, 물 흐르듯 자연스러운 사용자 경험을 만드는 것은 비즈니스에도 큰 영향을
yozm.wishket.com
https://toss.tech/article/smart-web-service-cache
웹 서비스 캐시 똑똑하게 다루기
웹 성능을 위해 꼭 필요한 캐시, 제대로 설정하기 쉽지 않습니다. 토스 프론트엔드 챕터에서 올바르게 캐시를 설정하기 위한 노하우를 공유합니다.
toss.tech
1-4) 성공적인 SPA 구현 사례
Gmail
Airbnb
Netflix
위의 웹 페이지는 SPA 방식을 적용하여 사용자들에게 필요한 부분만 추가/제거되어 로드되게 구현하였다. 이메일을 읽거나, SNS의 피드를 스크롤할 때, 그리고 선택한 숙소를 페이지 전환 없이 상태를 확인하고 예약-결제까지 이루어질 수 있도록 한다.
특히 과거와 달리 스마트폰과 태블릿으로 웹/앱 애플리케이션을 사용하는 경우가 많아진 만큼 더 빠르고 원활한 인터렉션을 제공하기 위해선 SPA의 발전이 필수적이다고 생각한다.
