프레임워크 블록의 최신 아이 중 하나인 Remix에 대해 많은 과대 광고를 들었을 것입니다. 2019년에 다시 시작했다는 사실이 놀라울 수도 있지만 원래는 구독 기반 프리미엄 프레임워크로만 사용할 수 있었습니다. 2021년에 설립자는 시드 자금을 조달하고 사용자가 무료로 Remix를 사용할 수 있도록 프레임워크를 오픈 소스로 공개했습니다. 수문이 열렸고 모두가 좋든 나쁘든 그것에 대해 이야기하는 것 같습니다. Remix의 몇 가지 기본 사항을 살펴보겠습니다.
Remix는 서버 "에지" 최초의 JavaScript 프레임워크입니다. 리액트를 사용하며, 적어도 현재로는, 프론트 엔드의 경우 서버 측 렌더링 우선 순위를 지정합니다. 가장자리에. 플랫폼은 서버 측 코드를 다음과 같이 실행할 수 있습니다. 서버리스 또는 에지 기능 기존 서버보다 저렴하게 만들고 사용자에게 더 가깝게 만듭니다. Remix 설립자는 서버와 클라이언트 간에 이루어진 요청과 응답을 실행 중인 플랫폼에 맞게 조정하기 때문에 "센터 스택" 프레임워크라고 부르기를 좋아합니다.
리믹스 배포
Remix에는 서버가 필요하므로 배포 방법에 대해 알아보겠습니다. Remix는 서버 자체를 제공하지 않습니다. 서버를 가져와서 모든 환경에서 실행할 수 있습니다. Node.js를 or Deno 를 포함한 환경 네틀리파이 에지 과 DigitalOcean의 앱 플랫폼. 리믹스 자체가 컴파일러, 실행 중인 플랫폼에 대한 요청을 번역하는 프로그램입니다. 이 프로세스는 다음을 사용합니다. 에스빌드 서버에 대한 요청에 대한 핸들러를 생성합니다. 사용하는 HTTP 핸들러는 웹 가져오기 API 에 의해 서버에서 실행됩니다. 적응 배포할 플랫폼용으로 제공됩니다.
스택 리믹스
Remix 스택은 미리 구성된 몇 가지 공통 도구가 있는 프로젝트입니다. 있다 공식 스택 XNUMX개 Remix 팀에서 관리하며 모두 음악 장르의 이름을 따서 명명되었습니다. 또한 다음을 포함한 여러 커뮤니티 Remix 스택이 있습니다. 케이팝 스택 Netlify의 템플릿 팀에서 만들었습니다. 이 스택은 강력하고 다음을 포함합니다. 수파베이스 데이터베이스 및 인증, 꼬리 날개 스타일링을 위해, 사이프러스 엔드 투 엔드 테스트, 예뻐 코드 서식, ESLint 보푸라기, 그리고 유형 스크립트 정적 타이핑. K-Pop 스택 배포에 대한 Tara Manicsic의 게시물을 확인하세요.
캐싱 경로
Remix에는 서버가 필요하지만 여전히 잼 스택 캐싱 경로를 통해 이점을 얻을 수 있습니다. 정적 사이트 또는 정적 사이트 생성(SSG)은 모든 콘텐츠가 빌드 시 렌더링되고 유지되는 경우입니다. 정적 인 또 다른 재건축까지. 콘텐츠는 미리 생성되어 CDN에 저장할 수 있습니다. 이는 최종 사용자에게 많은 이점과 신속한 사이트 로드를 제공합니다. 그러나 Remix는 Next.js 및 Gatsby를 비롯한 다른 인기 있는 React 프레임워크와 같은 일반적인 SSG를 수행하지 않습니다. SSG의 일부 이점을 얻으려면 기본 캐시 제어 HTTP 헤더 리믹스에서 헤더 기능 특정 경로를 캐시하거나 root.tsx 파일.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"그런 다음 귀하의 헤더 기능 원하는 곳. XNUMX시간 동안 캐시됩니다.
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};리믹스 라우팅
많은 프레임워크가 파일 시스템을 기반으로 하는 라우팅에 의존하고 있습니다. 이것은 지정된 폴더를 사용하여 애플리케이션의 경로를 정의하는 기술입니다. 일반적으로 동적 경로 및 끝점을 선언하기 위한 특수 구문이 있습니다. 현재 Remix와 다른 인기 있는 프레임워크 간의 가장 큰 차이점은 중첩 라우팅.
모든 Remix 앱은 root.tsx 파일. 여기에서 앱의 전체 기반이 렌더링됩니다. 여기에서 다음과 같은 일반적인 HTML 레이아웃을 찾을 수 있습니다. <html> 태그, <head> 태그를 클릭한 다음 <body> 앱을 렌더링하는 데 필요한 구성 요소가 포함된 태그입니다. 여기서 한 가지 짚고 넘어가야 할 것은 <Scripts> 구성 요소는 사이트에서 JavaScript를 활성화하는 것입니다. 일부는 그것 없이도 작동하지만 전부는 아닙니다. 그만큼 root.tsx 파일 내부의 모든 항목에 대한 상위 레이아웃 역할을 합니다. routes 디렉토리에서 경로의 모든 것이 다음 위치에서 렌더링됩니다. <Outlet/> 구성 요소가 있습니다 root.tsx. 이것은 Remix에서 중첩 라우팅의 기반입니다.
중첩 라우팅
Remix는 반응 라우터, 또한 사용 리액트 라우터. 사실, 그들은 Remix의 좋은 점 중 일부를 React Router로 다시 가져오기. Next.js와 SvelteKit의 관리자가 지금 해결하려고 하는 복잡한 문제는 중첩 라우팅입니다.
중첩 라우팅은 기존 라우팅과 다릅니다. 새 경로가 사용자를 새 페이지로 안내하는 경우 각 중첩 경로는 동일한 페이지의 별도 섹션입니다. 필요한 파일에만 연결된 비즈니스 논리를 유지하여 문제를 분리할 수 있습니다. Remix는 중첩 경로가 있는 페이지의 섹션에만 국한된 오류를 처리할 수 있습니다. 페이지의 다른 경로는 계속 사용할 수 있으며 끊어진 경로는 전체 페이지 충돌 없이 오류에 대한 관련 컨텍스트를 제공할 수 있습니다.
Remix는 루트 파일이 app/routes 기본 파일 내부에 로드될 파일의 디렉토리와 이름이 같습니다. 루트 파일은 레이아웃 를 사용하여 디렉토리의 파일에 대해 <Outlet /> 다른 경로를 로드할 위치를 Remix에 알려주는 구성 요소입니다.
콘센트 구성 요소
XNUMXD덴탈의 <Outlet /> 구성 요소는 중첩 경로에 대한 콘텐츠를 렌더링해야 하는 위치에 대한 Remix에 대한 신호입니다. 파일의 루트에 위치합니다. app/routes 중첩 경로와 동일한 이름을 가진 디렉토리. 다음 코드는 app/routes/about.tsx 파일 및 내부 파일용 콘센트 포함 app/routes/about 폴더 :
import { Outlet } from "@remix-run/react";
export default function About() {
return (
<>
<section>
I am the parent layout. I will be on any page inside of my named directory.
</section>
{ /* All of my children, the files in the named directory, will go here. */ }
<Outlet />
</>
)
}폴더 구조
모든 파일 app/routes/ 디렉토리는 해당 이름의 URL에서 경로가 됩니다. 다음을 사용하여 디렉토리를 추가할 수도 있습니다. index.tsx 파일.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsx라우트의 이름이 디렉토리와 같은 경우 명명된 파일은 디렉토리 내부의 파일에 대한 레이아웃 파일이 되며 레이아웃 파일에는 다음이 필요합니다. 콘센트 구성 요소 중첩 경로를 배치합니다.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsx레이아웃은 접두사에 이중 밑줄(__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about 여전히 렌더링합니다 app/routes/about.tsx 파일이지만 무엇이든 렌더링합니다. app/routes/about/index.tsx 어디 콘센트 구성 요소 의 마크업에 있습니다. app/routes/about.tsx.
동적 경로
동적 경로는 URL의 정보를 기반으로 변경되는 경로입니다. 그건 블로그 게시물의 이름일 수도 있고 고객 ID일 수도 있지만 그것이 무엇이든 상관없이 $ 경로 앞에 추가된 구문은 동적임을 Remix에 알립니다. 이름은 그 외에는 중요하지 않다. $ 접두사.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsx그 데이터를 가져와!
Remix는 서버에서 모든 데이터를 렌더링하기 때문에 React 앱의 표준이 된 많은 것들을 볼 수 없습니다. useState() 과 useEffect() 후크, 리믹스에서. 클라이언트 측 상태는 이미 서버에서 평가되었기 때문에 덜 필요합니다.
또한 데이터를 가져오는 데 사용하는 서버 유형은 중요하지 않습니다. Remix는 요청과 응답 사이에 위치하여 적절하게 번역하므로 표준을 사용할 수 있습니다. 웹 가져오기 API. 리믹스는 다음을 수행합니다. loader 기능 만 서버에서 실행되고 useLoaderData() 구성 요소의 데이터를 렌더링하는 후크. 다음은 서비스로서의 고양이 API 임의의 고양이 이미지를 렌더링합니다.
import { Outlet, useLoaderData } from '@remix-run/react'
export async function loader() {
const response = await fetch('<https://cataas.com/cat?json=true>')
const data = await response.json()
return {
data
}
}
export default function AboutLayout() {
const cat = useLoaderData<typeof loader>()
return (
<>
<img
src={`https://cataas.com/cat/${cat}`}
alt="A random cat."
/>
<Outlet />
</>
)
}경로 매개변수
동적 경로에서 접두사가 붙은 경로 $ 렌더링되어야 하는 데이터를 처리하기 위해 URL 매개변수에 액세스할 수 있어야 합니다. 그만큼 loader 함수는 다음을 통해 액세스할 수 있습니다. params 논의.
import { useLoaderData } from '@remix-run/react'
import type { LoaderArgs } from '@remix-run/node'
export async function loader({ params }: LoaderArgs) {
return {
params
}
}
export default function AboutLayout() {
const { params } = useLoaderData<typeof loader>()
return <p>The url parameter is {params.tag}.</p>
}기타 리믹스 기능
Remix에는 일반 HTML 요소 및 속성에 추가 기능을 추가하는 몇 가지 다른 도우미 기능이 있습니다. 경로 모듈 API. 각 경로는 이러한 유형의 기능을 고유하게 정의할 수 있습니다.
액션 기능
An action 기능을 사용하면 표준 웹을 사용하여 양식 작업에 추가 기능을 추가할 수 있습니다. 폼데이터 API.
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}헤더 기능
모든 품종 HTTP 표준 헤더 들어갈 수 있다 headers 기능. 각 경로에는 헤더가 있을 수 있으므로 중첩 경로, 가장 깊은 경로 또는 슬래시가 가장 많이 포함된 URL(/) — 승리. 헤더를 전달할 수도 있습니다. actionHeaders, loaderHeaders및 parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}메타 기능
이 함수는 HTML 문서에 대한 메타 태그를 설정합니다. 하나는 설정 root.tsx 기본적으로 파일이지만 각 경로에 대해 업데이트할 수 있습니다.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};링크 기능
HTML link 요소가 살고 있습니다. <head> HTML 문서의 태그이며 무엇보다도 CSS를 가져옵니다. 그만큼 links 기능과 혼동하지 마십시오. <Link /> 구성 요소를 사용하면 필요한 경로의 항목만 가져올 수 있습니다. 따라서 예를 들어 CSS 파일의 범위를 지정하고 해당 특정 파일이 필요한 경로에서만 가져올 수 있습니다. 그만큼 link 요소는 다음에서 반환됩니다. links() 객체의 배열로 기능하며 다음 중 하나가 될 수 있습니다. HtmlLinkDescriptor 인사말 link API 또는 PageLinkDescriptor 페이지의 데이터를 미리 가져올 수 있습니다.
export function links() {
return [
// add a favicon
{
rel: "icon",
href: "/favicon.png",
type: "image/png",
},
// add an external stylesheet
{
rel: "stylesheet",
href: "<https://example.com/some/styles.css>",
crossOrigin: "true",
},
// add a local stylesheet,
{ rel: "stylesheet", href: stylesHref },
// prefetch a page's data
{ page: "/about/community" }
]
}경로 간 연결
Remix는 앱의 다른 경로 사이를 이동할 수 있는 구성 요소를 제공합니다. <Link/>. 클라이언트 측 라우팅을 얻으려면 다음을 사용하십시오. <Link to="">Name</Link> 대신 구성 요소 <a href="">Name</a>. 그만큼 <Link /> 구성 요소는 prefetch 수락 none 기본적으로, intent Remix가 사용자가 링크를 가리키거나 초점을 맞추는 것을 감지하는 경우 데이터를 미리 가져오거나 render 링크가 렌더링되는 즉시 경로의 데이터를 가져옵니다.
import { Link } from "@remix-run/react";
export default function Nav() {
return (
<nav>
<Link to="/">Home</Link>{" "}
<Link to="/about">About</Link>{" "}
<Link to="/about/community" prefetch="intent">Community</Link>
</nav>
);
}다음 단계
이제 Remix의 기본 사항을 알았고 실제로 응용 프로그램 빌드를 시작할 준비가 되었습니까? 리믹스는 농담 앱 및 블로그 튜토리얼 이 기본 지식을 구현하기 시작합니다. 처음부터 시작하여 완전히 새로운 Remix 앱을 만들 수도 있습니다. 또는 다이빙할 준비가 되었다면 케이팝 스택 시도. 저는 Remix와 함께하는 시간을 정말 즐겼고 웹 표준에 초점을 맞추고 이를 기본으로 되돌리는 것을 좋아합니다. 이제 생성을 시작할 차례입니다!
