아카이브

[Solid] Solid-Meta: 메타데이터 다루기 본문

Frontend/SolidJS

[Solid] Solid-Meta: 메타데이터 다루기

Rayi 2025. 2. 8. 01:00

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
'Frontend/SolidJS' Related Articles more
Comments