파일 콘텐츠 / Intlayer에서 파일 임베딩하기

파일 임베딩 작동 방식

Intlayer에서 file 함수는 외부 파일 콘텐츠를 사전에 임베드할 수 있도록 합니다. 이 방법은 Intlayer가 소스 파일을 인식하게 하여 Intlayer 비주얼 에디터와 CMS와의 원활한 통합을 가능하게 합니다. 직접적인 import, require 또는 fs 파일 읽기 방식과 달리, file을 사용하면 파일이 사전에 연결되어 파일이 수정될 때 Intlayer가 콘텐츠를 동적으로 추적하고 업데이트할 수 있습니다.

파일 콘텐츠 설정하기

Intlayer 프로젝트에 파일 콘텐츠를 임베드하려면 콘텐츠 모듈에서 file 함수를 사용하세요. 아래는 다양한 구현 예시입니다.

import { file, type Dictionary } from "intlayer";

const myFileContent = {
  key: "my_key",
  content: {
    myFile: file("./path/to/file.txt"),
  },
} satisfies Dictionary;

export default myFileContent;

React Intlayer에서 파일 콘텐츠 사용하기

React 컴포넌트에서 내장된 파일 콘텐츠를 사용하려면, react-intlayer 패키지에서 useIntlayer 훅을 가져와 사용하세요. 이 훅은 지정된 키에서 콘텐츠를 가져와 동적으로 표시할 수 있게 합니다.

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const FileComponent: FC = () => {
  const { myFile } = useIntlayer("my_key");

  return (
    <div>
      <pre>{myFile}</pre>
    </div>
  );
};

export default FileComponent;

다국어 마크다운 예제

다국어 편집 가능한 마크다운 파일을 지원하기 위해, file을 t() 및 md()와 결합하여 마크다운 콘텐츠 파일의 다양한 언어 버전을 정의할 수 있습니다.

import { file, t, md, type Dictionary } from "intlayer";

const myMultilingualContent = {
  key: "my_multilingual_key",
  content: {
    myContent: md(
      t({
        en: file("src/components/test.en.md"),
        fr: file("src/components/test.fr.md"),
        es: file("src/components/test.es.md"),
      })
    ),
  },
} satisfies Dictionary;

export default myMultilingualContent;

이 설정은 사용자의 언어 선호도에 따라 콘텐츠를 동적으로 가져올 수 있도록 합니다. Intlayer 비주얼 에디터나 CMS에서 사용될 때, 시스템은 콘텐츠가 지정된 마크다운 파일에서 온 것임을 인식하고 해당 콘텐츠가 편집 가능하도록 보장합니다.

Intlayer가 파일 콘텐츠를 처리하는 방법

file 함수는 Node.js의 fs 모듈을 기반으로 지정된 파일의 내용을 읽어 사전에 삽입합니다. Intlayer 비주얼 에디터나 CMS와 함께 사용될 때, Intlayer는 사전과 파일 간의 관계를 추적할 수 있습니다. 이를 통해 Intlayer는 다음을 수행할 수 있습니다:

• 콘텐츠가 특정 파일에서 비롯되었음을 인식합니다.
• 연결된 파일이 편집될 때 사전 콘텐츠를 자동으로 업데이트합니다.
• 파일과 사전 간의 동기화를 보장하여 콘텐츠의 무결성을 유지합니다.

추가 자료

Intlayer에서 파일 임베딩을 구성하고 사용하는 방법에 대한 자세한 내용은 다음 자료를 참조하세요:

• Intlayer CLI 문서
• React Intlayer 문서
• Next Intlayer 문서
• Markdown 콘텐츠 문서
• 파일과 사전 간의 동기화를 보장하여 콘텐츠의 무결성을 유지합니다.

추가 자료

Intlayer에서 파일 임베딩을 구성하고 사용하는 방법에 대한 자세한 내용은 다음 자료를 참조하세요:

• Intlayer CLI 문서
• React Intlayer 문서
• Next Intlayer 문서
• 마크다운 콘텐츠 문서
• 번역 콘텐츠 문서

이 자료들은 파일 임베딩, 콘텐츠 관리 및 Intlayer가 다양한 프레임워크와 통합되는 방법에 대한 추가적인 통찰을 제공합니다.