링크 태그로 리소스 추가 리믹스

11937 단어 react
링크 태그는 웹페이지에 특정 리소스를 추가하는 방법으로 가장 일반적으로 알려진 것은 스타일시트입니다.

다음과 같이 링크 태그를 사용하여 일반 HTML로 로드할 수 있습니다.

<link rel="stylesheet" href="assets/styles.css" />


또 다른 사용 사례는 이 링크 요소를 사용하여 파비콘과 같은 사이트 아이콘을 로드하는 것입니다.

마지막으로 중요한 것은 이것에 국한되지 않는다는 것입니다. 일부 자산을 미리 로드하는 데 사용할 수 있습니다!

예, link API은 꽤 아프고 강력합니다.

Remix에서 링크 요소 사용



my articles on Remix 을 따라했다면 root.tsx 파일이 이미 링크 요소를 사용하는 환상적인 스타터 중 하나를 사용한 것입니다.

Remix에서는 다음과 같이 배열에 링크를 추가할 수 있습니다.

import tailwindStylesheetUrl from './styles/tailwind.css';

export const links: LinksFunction = () => {
  return [{ rel: 'stylesheet', href: tailwindStylesheetUrl }];
};


이LinksFunctions는 생성한 모든 경로 파일에서 호출할 수 있으므로 매우 구체적인 스타일시트를 다른 페이지에 삽입할 수도 있습니다.

렌더링 내부에 다음과 같은 속성을 주입하기만 하면 됩니다.

export default function App() {
  return (
    <html>
    <head>
        ...
      <Links />
    </head>
    ...
  );
}


이것을 루트에서 가져오면 특별히 다른 페이지에서 가져올 필요가 없습니다.

다른 곳에서 특정 스타일시트 사용



다른 단일 페이지에는 CSS 스타일시트가 필요한 일부 차트가 있습니다.
예를 들어 이 페이지는 about.tsx 일 수 있습니다. 이를 열면 다음과 같이 링크 기능을 추가할 수 있습니다.

import chartStyles from '../styles/charts.css';

export const links: LinksFunction = () => {
  return [
    {
      rel: 'stylesheet',
      href: chartStyles,
    },
  ];
};


이제 about 페이지를 열면 원래 tailwind 스타일시트와 이 차트 스타일시트가 삽입된 것을 볼 수 있습니다.

링크 유형



언급한 바와 같이 다양한 유형의 링크를 추가할 수 있는 옵션이 있습니다.
몇 가지 예를 살펴보겠습니다.

파비콘 링크



먼저 파비콘입니다. 아이콘은 웹 브라우저에서 사용됩니다.

export const links: LinksFunction = () => {
  return [
    {
      rel: 'icon',
      href: '/favicon.png',
      type: 'image/png',
    },
  ];
};


로컬 링크



그런 다음 이미 로컬 스타일시트를 추가할 수 있음을 확인했습니다. 주목해야 할 좋은 점은 우리가 사용하는 가져오기입니다.
이 가져오기는 Remix가 프로덕션 캐싱을 위해 이 파일에 지문을 남기도록 하기 때문에 반드시 기억해야 합니다. (고유한 URL로 만들기)

import chartStyles from '../styles/charts.css';

export const links: LinksFunction = () => {
  return [
    {
      rel: 'stylesheet',
      href: chartStyles,
    },
  ];
};


외부 링크



전체 URL을 href 속성에 전달하기만 하면 외부 링크를 로드할 수도 있습니다.

export const links: LinksFunction = () => {
  return [
    {
      rel: 'stylesheet',
      href: 'https://example.com/some/styles.css',
      crossOrigin: 'true',
    },
  ];
};


이미지 미리 가져오기



언급했듯이 링크 API는 매우 강력하며 예를 들어 이미지를 미리 가져오는 데 사용할 수도 있습니다.

export const links: LinksFunction = () => {
  return [
    {
      rel: 'prefetch',
      as: 'image',
      href: '/img/bunny.jpg',
    },
  ];
};


조건부 프리페치



프리페치의 멋진 부분은 이 프리페치에 대한 미디어 쿼리를 지정할 수 있다는 것입니다.

더 큰 화면에서만 이 이미지를 미리 가져오고 싶다고 가정해 보겠습니다.

export const links: LinksFunction = () => {
  return [
    {
      rel: 'prefetch',
      as: 'image',
      href: '/img/bunny.jpg',
      media: '(min-width: 1000px)',
    },
  ];
};


조건부 추가 스타일시트



위의 미디어 기술을 사용하여 특정 쿼리에만 스타일시트를 추가할 수도 있습니다.

export const links: LinksFunction = () => {
  return [
    {
      rel: 'stylesheet',
      href: printStyles,
      media: 'print',
    },
    {
      rel: 'stylesheet',
      href: highResStyles,
      media: 'screen and (min-resolution: 300dpi)',
    },
  ];
};


그리고 그게 다야. Remix의 링크 요소는 기본 링크 API를 기반으로 구축되었기 때문에 매우 강력합니다.
나는 Remix가 이미 존재하는 것을 사용하고 브라우저 기능을 향상시킨다는 유망한 전제를 가지고 있다는 것을 좋아합니다.

읽어주셔서 감사합니다. 연결합시다!



제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
ConnectDome의 16주 스프린트
Linux 애플리케이션 개발 방법(2부)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage