Angular Universal 와 Firebase로 더욱 강력하게!

콘텐츠 목차

1. Firebase와 Angular Universal을 결합하는 방법
2. Angular Fire의 최신 업데이트
3. 서버 사이드 렌더링이란 무엇인가?
4. 검색 엔진 최적화된 자바스크립트 앱 구축하기
5. 소셜 미디어 링크 봇에서 앱 콘텐츠 활용하기
6. Firebase와 Angular Universal을 이용한 앱 페이지 로드 성능 향상하기
7. Angular 앱에 메타 태그 설정하기
8. SEO 서비스를 이용한 메타 태그 설정 방법
9. 라우트별 메타 태그 설정하기
10. Universal 앱의 상태 전환 기능 이해하기

Firebase와 Angular Universal을 결합하는 방법

Angular Universal과 Firebase를 함께 사용하여 검색 엔진 최적화된 자바스크립트 앱을 구축하는 방법에 대해 알아보겠습니다. 최신 버전의 Angular Fire에서는 Universal을 지원하게 되어 앱의 콘텐츠가 검색 엔진에 이해되고 소셜 미디어 링크 봇에 활용될 수 있습니다. 이를 통해 페이지 로드 성능도 향상시킬 수 있습니다.

서버 사이드 렌더링이란 무엇인가?

일반적으로 우리는 JavaScript를 브라우저에서 실행하여 HTML로 렌더링합니다. 하지만 이 방법은 검색 엔진에 색인되거나 소셜 미디어에서 공유되어야 할 라우트가 있는 경우 문제가 됩니다. 대부분의 봇들은 HTML을 이해하고, JavaScript를 解析하는 시도를 하지 않기 때문입니다. 이러한 문제를 해결하기 위해서 우리의 Angular 앱을 전통적인 웹 애플리케이션과 유사하게 만들 수 있습니다. 첫 번째 페이지 방문 시, 서버에서 앱을 HTML로 렌더링한 다음, 이를 브라우저로 전송하여 일반 Angular 앱처럼 동작하도록 만들 수 있습니다.

검색 엔진 최적화된 자바스크립트 앱 구축하기

본 데모에서는 0부터 배포 가능한 Angular Universal 앱을 구축하고, Firestore 데이터베이스에 저장된 동물 컬렉션으로 모든 콘텐츠를 생성하는 방법을 안내합니다. 코드 양이 많지만, 대부분은 프로젝트에 그대로 복사하여 붙여넣을 수 있는 설정 관련 코드입니다. 자세한 코드 설명은 본문에서 단계별로 설명하고 있으니, 길을 잃어버려도 본 문서를 함께 따라가면 됩니다.

Angular 앱에 메타 태그 설정하기

소셜 미디어 봇들은 문서의 헤드에 있는 메타 태그를 찾기 때문에, 소셜 미디어 사이트에서 확인할 수 있는 요구 사항을 충족시켜야 합니다. 우리는 Angular의 브라우저 플랫폼에서 지원하는 메타 태그 및 문서 제목 설정 기능을 사용할 수 있습니다. 이를 위해 SEO 서비스를 만들어 앱 모듈에 추가하고, 메타 태그를 효율적으로 설정하는 방법을 알아보겠습니다.

SEO 서비스를 이용한 메타 태그 설정 방법

서로 다른 소셜 미디어 사이트들은 메타 태그에 대한 요구 사항이 약간씩 다르지만 상당히 유사한 경우가 많습니다. 이를 고려하여 기본 값을 설정하고, 인자로 전달된 값으로 기본 값을 덮어쓰는 방식으로 메타 태그를 설정하는 방법을 설명하겠습니다. 이 값을 우리는 Firestore에서 가져온 데이터를 담고 있는 객체로 사용합니다. 또한, 문서 제목은 Title 서비스를 이용하여 설정합니다.

라우트별 메타 태그 설정하기

데이터베이스에서 가져온 문서를 이용하여 메타 태그를 설정하려면 컴포넌트를 사용해야 합니다. 이를 위해 애니멀 디테일 컴포넌트를 만들고, 라우터에서 이를 사용하며, 동물 이름에 해당하는 라우트 파라미터를 설정해야 합니다. 컴포넌트 내에서는 SEO 서비스와 Firestore 데이터베이스를 사용합니다. 또한 ActivatedRoute를 이용하여 URL에서 동물의 이름을 가져올 수 있습니다. 여기서 주의해야 할 점은 서버와 브라우저에서 각각 데이터를 읽게 되므로, 서버에서는 한번, 브라우저에서는 두 번 데이터를 읽게 되어 페이지가 잠깐 깜빡일 수 있다는 것입니다. 하지만 이는 상당히 빠른 속도로 처리되며, 일반적인 페이지 로드 시 완전한 페이지 로드가 있을 때만 서버 사이드 렌더링이 이뤄지므로 대부분의 경우에는 문제 없습니다.

Universal 앱의 상태 전환 기능 이해하기

Angular Universal은 서버 사이드에서 클라이언트 사이드로 상태를 전환할 수 있는 기능을 제공합니다. 서버사이드에서 값을 설정하고, 브라우저에서 읽을 수 있는 키-값 쌍을 설정할 수 있습니다. 서버에서 데이터를 가져온 후, 브라우저로 전환되는 과정에서 이 값을 읽을 수 있습니다. rxjs의 startWith 연산자를 사용하여 기존 객체를 Observable의 값으로 사용할 수 있습니다. 이로써 우리는 서버에서 이미 존재하는 문서를 가져와서 브라우저에서 사용할 수 있습니다. 다만, Firestore에서 문서를 두 번 읽게 되므로 주의해야 합니다. 일반적으로 페이지 로드 시에만 서버 사이드 렌더링이 발생하므로 대부분의 경우 문제가 되지 않습니다.

Angular Universal의 추가 설정

Angular Universal을 설정하는 데에는 여러 단계가 필요합니다. 이 중 대부분은 복사하여 붙여넣기 방식으로 설정할 수 있으며, 앵귤러 CLI에 내장되어 있는 것이므로 따로 설정할 필요가 없습니다. 각 주요 단계는 다음과 같습니다.

1. 새로운 Angular 앱 생성 및 라우팅 모듈 설정
2. 최신 버전의 Angular Fire 2와 Firebase 설치
3. Angular에서 사용할 기본 서버 플랫폼 및 관련 모듈 설치
4. 소셜 미디어 봇을 위한 메타 태그 설정
5. Universal 앱에서 각 컴포넌트의 메타 태그 설정
6. Angular Universal 구성 파일과 바벨 환경 설정
7. Express.js와 함께 사용할 서버 코드 작성
8. 서버 빌드 및 웹팩 구성
9. 앵귤러 CLI 구성 파일 업데이트
10. 서버 앱 빌드 및 실행

검색 엔진 최적화와 성능 향상 확인하기

앱 링크를 트위터 카드 검증기에 붙여넣으면 Firestore에서 비동기로 가져온 데이터가 유효한 카드로 인식될 것입니다. 또한 SSR로 인한 성능 향상 여부도 확인할 수 있습니다. 이 데모에서는 Lighthouse를 사용하여 94점의 높은 점수를 달성했습니다. 이는 Firestore에서 데이터를 가져오는 Angular 앱에 대해서는 매우 우수한 점수입니다.

이상으로 설명을 마치도록 하겠습니다. 이 동영상이 도움이 되었다면 좋아요와 구독을 부탁드리며, 보다 고급 SSR 시나리오에 대해 더 이야기 하고 싶다면 angular firebase 닷컴의 프로 멤버가 되어주시기를 권장합니다. Angular Firebase 스택으로 앱을 성공적으로 출시하기 위한 다양한 독점 콘텐츠를 이용하실 수 있습니다. 감사합니다.