Blazor 5를 사용하는 라디오 플레이어

저는 Blazor 5 설명서를 읽고 그 기능을 시험해 볼 수 있는 간단한 프로젝트를 만들기로 결정했습니다. 항상 그렇듯이 내 마음 속에는 수많은 아이디어가 있었지만 dev.to를 검색하는 동안 에서 게시물을 발견하여 Blazor 5를 사용하여 게시물을 만들기로 결정했습니다. Aleks와 동일한 서비스를 사용하여 라디오 방송국을 얻었습니다. Radio-Browser .

첫 번째 단계는 단순하고 라디오로 사용하기 쉬운 적합한 UI를 선택하는 것이었습니다. codepen.io sample for music player 에서 플레이어의 스타일을 빌렸습니다. UI 디자인이 끝나면 구성 요소를 만들고 코드를 연결하여 라디오 방송국을 가져와 재생해야 합니다.

간단하게 유지하기 위해 프로젝트는 현재 미리 정의된 장르 세트를 나열하고 선택한 장르에 대한 방송국을 가져와 목록으로 표시합니다. 사용자는 방송국을 선택하고 청취할 수 있습니다.

상태 지속성

장르 목록은 LeftNavMenu라는 자체 구성 요소에 포함되어 있습니다. 이 구성 요소는 플레이어 구성 요소를 렌더링하는 기본 레이아웃 페이지에 포함됩니다. 선택한 장르는 메모리 내 상태 컨테이너에 의해 유지됩니다. 상태 컨테이너는 LeftNavMenu 구성 요소와 Player 구성 요소 모두에서 선택한 장르를 공유하는 데 사용됩니다. 사용자가 LeftNavMenu에서 다른 장르를 선택하면 상태 컨테이너의 값이 업데이트되고 플레이어 구성 요소에 변경 사항을 알리는 작업이 트리거됩니다. 이 접근 방식은 중첩된 구성 요소 또는 독립 구성 요소 간에 상태를 공유하는 데 사용할 수 있습니다.

상태 컨테이너는 모든 Blazor 구성 요소에 주입되어 사용되는 서비스 컬렉션 종속성 컨테이너에서 싱글톤 인스턴스로 구성됩니다.

캐스케이드 값 및 매개변수

인덱스 구성 요소는 로드되는 첫 번째 구성 요소이며 라디오 플레이어 구성 요소를 포함합니다. 인덱스 구성 요소를 초기화하는 동안 라디오 서버 API가 트리거되어 선택한 장르의 모든 라디오 방송국을 가져옵니다. 가져온 라디오 방송국 목록은 라디오 플레이어 구성 요소에 매개변수로 전달되고 목록의 첫 번째 방송국은 계단식 값으로 라디오 플레이어에 전달됩니다. 둘의 차이점은 계단식 값이 CascadeValues ​​섹션 내의 모든 구성 요소에 전달될 수 있다는 것입니다. 여기서 매개변수의 경우 값은 개별 구성 요소에 전달되어야 합니다.

CSS 격리

CSS의 한 가지 문제는 동일한 페이지에서 렌더링되는 다른 구성 요소에 영향을 미치는 구성 요소 중 하나에 적용된 스타일의 블리딩입니다. 이것은 장르 LeftNavMenu 구성 요소의 문제였습니다. 이 문제를 해결하기 위해 blazor는 구성 요소 파일과 함께 CSS 파일을 만들고 CSS 파일 이름을 .razor.css로 지정하는 CSS 격리를 도입했습니다. 구성 요소 스타일은 구성 요소 UI의 HTML 요소와 CSS 속성에 고유 식별자를 추가하여 컴파일 시간에 다시 작성됩니다.

HTML
<li b-3xxtam6d07>

CSS
li[b-3xxtam6d07]{
    color:red;
}

그런 다음 모든 구성 요소 스타일이 번들되어 www\index.html 헤드 태그 내에 .styles.css로 포함됩니다.

이것들은 이 프로젝트에서 사용된 새로운 기능 중 3가지였으며 더 많은 기능이 있으며 초기 Blazor의 일부였던 프로젝트 내에서 사용된 이벤트 처리인 JS Interop과 같은 다른 기능도 있습니다.

프로젝트의 소스는 github project에서 사용할 수 있습니다. 자유롭게 살펴보고 제안하십시오.