2024 원티드 프리온보딩 | FE 챌린지 상황에 맞는 프론트엔드 개발 전략 이해하기 사전과제
1. SSR과 CSR의 주요 차이점은 무엇인가?
어디서 렌더링 작업을 수행하는가에 따라 SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)으로 구분할 수 있습니다.
먼저 SSR(Server Side Rendering)은 서버에서 페이지를 렌더링하고 클라이언트로 내려주는 방식입니다.
사용자가 웹 페이지에 접속하면 브라우저는 서버에 리소스를 요청합니다. 서버는 브라우저의 요청에 따라 초기 페이지를 렌더링하여 제공합니다. 사용자는 페이지를 볼 수 있지만 조작할 수 없는 상태(정적인 페이지)가 됩니다. 브라우저가 자바스크립트를 다운로드하여 컴파일이 완료되면 사용자가 웹 페이지를 조작할 수 있습니다.
SSR은 FCP(First Contentful Paint), 즉 사용자가 웹 페이지를 로딩하고 나서 브라우저에 처음으로 그려지는 컨텐츠가 화면에 나타나기까지 걸리는 시간이 짧다는 것과 TBT(Total Blocking Time), FCP부터 사용자가 웹 페이지를 열었을 때 해당 페이지가 상호작용 가능한 상태로 전환되기까지 걸리는 시간이 길다는 특징을 가지고 있습니다.
따라서 SSR은 초기 로딩 속도가 빠르고 SEO(Search Engine Optimization)에 유리하다는 장점이 있으나 서버에 부담을 줄 수 있고 화면 전환간 반짝임으로 인해 사용자 경험이 저하될 수 있다는 단점이 존재합니다.
CSR(Client Side Rendering)은 클라이언트에서 렌더링하는 방식으로, 서버로부터 받은 빈 html에 필요한 번들파일(CSS, JS)을 모두 다운로드합니다.
사용자가 웹 페이지에 접속하면 브라우저는 서버에 리소스를 요청합니다. 서버는 브라우저에게 CSS, JS를 불러올 수 있는 빈 html을 제공하고 브라우저는 CSS와 자바스크립트를 다운로드합니다. 모든 다운로드가 끝나면 동적 DOM을 생성하고 사용자에게 상호작용이 가능한 페이지를 보여주게 됩니다.
CSR은 TTFB(Time To First Byte), 서버로 요청을 보내고 응답의 첫 번째 바이트가 도착하기까지 걸리는 시간이 빠르고 FCP가 느린 특징을 가지고 있습니다.
CSR의 장점으로는 화면 깜빡임이 없어 좋은 사용자 경험을 제공할 수 있다는 점과 초기 로딩 이후 구동 속도가 빠르다는 점이 있습니다. 하지만 초기 로딩 속도가 느리고 SEO에 불리하다는 단점을 가지고 있습니다.
2. React와 Next.js 중 어떤 상황에서 각각을 선택해야 하는가?
React와 Next.js는 자바스크립트 기반의 프론트엔드 라이브러리, 프레임워크라는 공통점을 가지고 있습니다. React의 경우 SPA(Single Page Application) 개발과 CSR 기반의 서비스를 개발하는데 강점을 가지고 있으며 Next.js는 SSR 또는 SSG(Static Site Generation) 서비스를 개발하는데 적합합니다. 따라서 제공하고자 하는 서비스가 SEO가 중요하며 사용자와의 상호작용이 적은 정적 페이지 위주인 서비스 경우 Next.js를 선택하는 것이 유리하며 사용자와의 상호작용이 많은 경우, 사용자 경험이 중요하거나 서버의 부담을 줄이고 싶은 경우 React가 더 좋은 선택지가 될 수 있습니다.
3. PWA를 구현할 때 Service Worker의 역할은 무엇인가?
PWA(Progressive Web App)이란 HTML, CSS, JavaScript와 같은 기술을 사용하여 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱입니다. PWA는 앱을 다운로드 하거나 업데이트를 할 필요없이 웹으로 앱 서비스를 사용할 수 있습니다. 네이티브 앱과 마찬가지로 푸시 알람(Push Notification) 기능, 카메라 등의 스마트폰 자체 기능도 사용할 수 있으며 캐시된 데이터를 활용하여 오프라인 환경에서도 사용할 수 있다는 장점을 가지고 있습니다.
PWA의 Service Worker는 백그라운드에서 동작하는 스크립트로 브라우저와 웹 페이지 사이에서 독립적으로 동작합니다. Service Worker의 첫 번째 역할은 PWA가 오프라인 환경에서도 작동할 수 있도록 합니다. 캐시를 활용하여 웹 앱에 필요한 리소스를 저장하고 오프라인 상태일 때 저장된 캐시를 활용하여 서비스를 제공합니다. 두 번째는 푸시 알람(Push Notification) 기능을 사용할 수 있도록 합니다. 백그라운드에서 푸시 알림을 처리하여 브라우저가 서버로부터 푸시 알림을 수신하고 백그라운드에서 알림을 표시할 수 있습니다. 세 번째로 백그라운드를 동기화하는 역할을 합니다. 사용자가 온라인 상태일 때 서버와 데이터를 동기화하고, 오프라인 상태에서는 동기화를 대기할 수 있습니다.
4. SSR, CSR, SPA, PWA, Electron 등 다양한 전략이 있는데, 각 전략들은 어떤 상황에 사용되는 것이 적합하며 비즈니스에 어떤 이점을 가져다주는가?
- SSR은 SEO 최적화가 필요한 경우, 초기 로딩 속도 개선이 필요한 경우에 유리하기 때문에 검색이나 공유 기능에 초점을 둔 서비스에 적합하며 빠른 속도를 기대할 수 있습니다.
- CSR은 사용자와의 상호작용이 많은 서비스나 실시간 업데이트가 필요한 서비스에 사용되는 것이 적합하며 서비스의 사용자 경험을 향상시키고 서버에 부담을 줄여줄 수 있습니다.
- SPA는 모바일 네이티브 앱과 같은 사용자 경험이 필요하거나 콘텐츠 서비스와 같이 부드러운 페이지 전환, 빠른 응답성이 필요한 서비스에 적합합니다. 모바일 사용자가 많은 서비스나 초기에 빠르게 프로토 타입 개발이 필요한 서비스에 좋은 사용자 경험과 개발 부담을 줄여주는 효과를 기대할 수 있습니다.
- PWA는 웹 기술을 사용하여 네이티브 앱과 같은 사용자 경험을 제공하고자 할 때 적합합니다. 네이티브 앱과 달리 다운로드나 업데이트가 필요하지 않기 때문에 사용자들이 쉽게 접근할 수 있으며 안드로이드, IOS와 같은 모바일 환경에 영향을 받지 않을 수 있습니다. 네이티브 앱을 구축하기에 시간, 비용적인 측면에 부담이 되는 서비스의 경우 네이티브 앱의 대안으로 선택할 수 있습니다.
- Electron는 웹 기술(HTML, CSS, JS)을 사용하여 Window, Mac 등 다양한 운영체제에서 동작하는 크로스 플랫폼 서비스를 제공할 수 있습니다. 웹 기술을 사용하여 여러 플랫폼에 적용 가능하기 때문에 개발 생산성을 향상시킬 수 있으며 자유도 높은 UI를 구성할 수 있습니다. 특히 비즈니스 측면에서 개발 비용과 시간 절약은 큰 이점이 될 수 있습니다.