Solid-Meta는 React head를 기반으로 한 패키지로,
DOM 구조에서 메타데이터를 쉽게 설정하고 호출하기 위해 설계된 패키지입니다.
이를 통해 설정한 메타데이터들은 프로젝트가 실행될 때 html 파일의 <head> 태그 안에 들어가게 됩니다.
Solid-Meta의 컴포넌트들은 아래와 같이 호출할 수 있습니다.
import { MetaProvider, Base, Title, Link, Meta, Style } from "@solidjs/meta";1. MetaProvider
다른 solid-meta 컴포넌트들을 포함할 wrapper의 역할을 합니다.
Router와 같이 메타데이터를 나타낼 수 있는 다른 컴포넌트들도 사용할 수 있습니다.
const App = () => (
<MetaProvider>
{/* 아래 요소는 <head> 태그 안에 포함됩니다 */}
<div class="Home">
<Title>Title of page</Title>
<Link rel="canonical" href="http://solidjs.com/" />
<Meta name="example" content="whatever" />
</div>
</MetaProvider>
);2. Base
문서 내에서 사용될 url(상대주소)들의 root 주소를 명시합니다.
<Base target="_blank" href="https://docs.solidjs.com/" />;3. Link
특정 경로를 참조할 때 사용합니다. 주로 favicon 위치를 지정할 때 사용합니다.
<Link rel="icon" href="/favicon.ico" />;4. Meta
HTML 요소로 표현할 수 없는 임의의 메타데이터 값을 직접 입력할 때 사용합니다.
문서에 대한 설명, 인코딩 방식 등이 포함됩니다.
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta name="description" content="Hacker News Clone built with Solid" />5. Style
CSS 스타일을 지정합니다. 공식 문서에서는 해당 태그보다 외부 파일의 위치를 나타내는 <Link> 태그를 사용하는 것을 추천하고 있습니다.
<Style>
{`
body {
background-color: #000;
}
`}
</Style>6. Title
브라우저 탭에 출력되는 페이지의 제목을 설정합니다.
<Title>Default Application Title</Title>
728x90
'Frontend > SolidJS' 카테고리의 다른 글
| [Solid] 페이지 라우팅 설정하기 (0) | 2025.02.08 |
|---|---|
| [Solid] Solid-Router: 페이지 라우팅 설정하기 (0) | 2025.02.08 |
| [Solid] Syntax | 13. Resource (0) | 2025.01.31 |
| [Solid] Solid Start에 대해서 (0) | 2024.07.09 |
| [Solid][CSS] SolidJS에서 macaron 사용하기 (0) | 2024.07.01 |