> 배우는 목적
nextjs프레임워크는 버전업이 되면서 새로 배울게 많아지고, 무겁게 느껴진다. 가볍고 빠르게 프로젝트를 시작하기 위해서 remix프레임워크를 사용해본다. 참고로 remix는 react router팀에서 만든 것인데, react router의 프레임워크로 포함되었다.
> 기본 설치
- npx create-react-router@7.0.1 wemake 원하는 폴더에 해당 명령어 입력, 강의 내용에 따라 해당 버전으로 실행 했다.
- docker 파일은 삭제
> 파일 트리 분석
- app/routes.ts 파일에서 라우트를 관리 한다.
import { type RouteConfig, index, route } from "@react-router/dev/routes";
export default [
index("routes/home.tsx"),
route("about", "potato/test.tsx"),
] satisfies RouteConfig;
test.tsx파일, 반드시 export default function 대문자 형식을 지켜야 한다.
export default function AboutUs() {
return <h1>어바웃어스</h1>;
}
> Root.tsx파일 이해
import {
isRouteErrorResponse,
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "react-router";
import type { Route } from "./+types/root";
import "./app.css";
export const links: Route.LinksFunction = () => [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
crossOrigin: "anonymous",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
},
];
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export default function App() {
return <Outlet />;
}
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
let message = "Oops!";
let details = "An unexpected error occurred.";
let stack: string | undefined;
if (isRouteErrorResponse(error)) {
message = error.status === 404 ? "404" : "Error";
details =
error.status === 404
? "The requested page could not be found."
: error.statusText || details;
} else if (import.meta.env.DEV && error && error instanceof Error) {
details = error.message;
stack = error.stack;
}
return (
<main className="pt-16 p-4 container mx-auto">
<h1>{message}</h1>
<p>{details}</p>
{stack && (
<pre className="w-full p-4 overflow-x-auto">
<code>{stack}</code>
</pre>
)}
</main>
);
}outlet 부분에 각 페이지 파일들이 들어가게 된다. 그리고 문제 없을 경우 각 페이지의 함수가 호출되는 것이고, 에러가 생기면 ErrorBoundary 함수가 실행 된다.
> links와 meta
export default function Tomato() {
return <div>Tomato</div>;
}
export const links = () => [{ rel: "stylesheet", href: "potato.com" }];
export const meta = () => [
{ title: "Tomato" },
{ name: "description", content: "Tomato" },
];각 페이지 별로 link와 meta 데이터를 추가할 수 있다.
> shadcn 테마 적용 및 다크모드
- 원하는 shadcn에서 테마를 복사해서, app.css파일에 넣어보자.
- 이 때 주의할 점은, 아래와 같이 hsl로 감싸 주어야 한다.
- 참고로 tailwindcss 버전4부터는 별도 tailwindcss.config.ts 파일 생성 없이 app.css파일안에서 전부 다룬다.
- 다크 모드는 app.css에서 .dark부분에 정의했기 때문에, root.tsx파일의 아래와 같이 html태그의 className에 dark를 명시해주면 바로 적용 된다.
> 파일트리 구조
- common폴더를 생성해서 shadcn의 컴포넌트들은 이곳에 설치되게 세팅한다. (아래 components.json파일 수정)
- 위와 같이, 도메인 별(기능 별)로 폴더를 생성해서 관리하자.
'코딩강의 > Maker 마스터클래스(노마드코더)' 카테고리의 다른 글
| #6 Public Pages (0) | 2025.04.17 |
|---|---|
| #5 Data Loading Strategies (0) | 2025.04.17 |
| #4 Supabase & Drizzle Database (3) | 2025.04.08 |
| #3 UI with Cursor & Shadcn (0) | 2025.03.18 |
| #2 Using CursorAI (0) | 2025.03.17 |
