프리온보딩 FE 챌린지 2월 사전과제
2024. 1.24.
Index
1. SSR과 CSR에서의 주요 차이점은 무엇인가요?
SSR
SSR은 서버 측에서 전체 페이지를 렌더링하고, 완성된 HTML을 클라이언트로 전송하는 방식입니다. SSR은 항상 최신 데이터를 기반으로 초기 화면을 그릴 수 있어, SEO에 대한 유효성을 기대할 수 있습니다. 하지만, 서버에서 어느 정도의 처리를 해야 하므로, 지연이 높아질 가능성이 있습니다.
CSR
CSR은 클라이언트 측에서 JavaScript를 이용해 페이지를 동적으로 렌더링하는 방식입니다. 서버는 HTML 골격과 JavaScript 파일을 전송하고, 페이지의 렌더링은 사용자의 브라우저에서 이루어집니다. CSR은 빌드 시에 데이터를 얻지 않고, 페이지를 화면에 그려 저장합니다. 또한 브라우저에서 초기 화면�그리기를 한 뒤, 비동기로 데이터를 얻어서 추가 데이터를 표시합니다.
2. React와 Next.js중 어떤 상황에서 각각을 선택해야 하나요?
React
React는 프로젝트의 구조를 제어하고 싶거나 커스터마이징이 필요한 프로젝트일 경우 적합합니다. 또한 클라이언트 측에서 동적인 상호작용이 많은 웹 애플리케이션일 경우 적합합니다.
Next.js
Next.js는 SEO 최적화가 중요하거나 초기 로딩 성능과 빠른 렌더링이 필요한 프로젝트일 경우에 적합합니다. 또한 구성이 사전에 설정되어 있어 개발 시작 시간을 단축하고 싶을 때에도 유용합니다.
3. PWA를 구현할 때 Service Worker의 역할은 무엇인가요?
방문한 웹 페이지나 앱의 자원을 캐시에 저장하여 네트워크 연결이 불안정하거나 오프라인 상태에서도 빠르게 콘텐츠를 로드할 수 있게 합니다. 또한 푸시 알림을 통해 사용자가 사용하지 않을 때도 중요한 정보나 업데이트를 알릴 수 있습니다.
4. SSR, CSR, SPA, PWA, Electron등 다양한 전략이 있는데, 각 전략들은 어떤 상황에 사용되는 것이 적합하며 비즈니스에 어떤 이점을 가져다줄까요?
SSR
SSR은 항상 최신 데이터를 기반으로 초기 화면을 그릴 수 있어, SEO에 대한 유효성을 기대할 수 있기 때문에 항상 최신 데이터를 표시하고자 하는 경우에 적합합니다. SSR을 통해 SEO 성능과 검색 엔진의 가시성이 향상되어 방문자 수가 증가하는 이점을 기대할 수 있습니다.
CSR
CSR은 서버 부하를 줄여주고, 사용자 인터페이스의 반응성을 높여줄 수 있기 때문에 사용자와의 상호작용이 많고 동적인 웹 애플리케이션에 적합합니다. CSR을 통해 사용자 인터페이스를 부드럽고 반응성 있게 만들어 사용자 경험을 향상시킬 수 있습니다.
SPA
SPA는 서버 요청이 감소하여 로딩 시간이 줄어들고, 사용자의 경험이 매끄러지기 때문에 사용자가 웹 애플리케이션과 지속적으로 상호작용해야 하는 경우에 적합합니다. SPA를 사용하면 사용자가 애플리케이션과 상호작용할 때 페이지를 새로 로드할 필요가 없어져 애플리케이션의 성능 개선을 기대할 수 있습니다.
PWA
PWA는 모바일 사용자를 대상으로 네이티브 앱과 유사한 사용자 경험을 제공하고자 할 때 적합합니다. 설치 없이 앱과 같은 경험을 제공하여 사용자 참여도를 높일 수 있으며, 오프라인 지원을 통해 접근성을 향상시킬 수 있습니다. 또한 네이티브 앱에 비해 낮은 개발 및 유지보수 비용을 기대할 수 있습니다.
Electron
Electron은 웹 기술을 사용하여 데스크톱 애플리케이션을 개발하고자 할 때 혹은 크로스 플랫폼 지원이 필요한 경우에 적합합니다. Electron 활용을 통해 개발 비용과 시간을 절약할 수 있고 웹 개발자가 쉽게 데스크톱 애플리케이션을 개발할 수 있게 됩니다.