+
+ );
+}
+```
+
+좋아요 버튼은 지금은 아무 작업도 하지 않습니다. 글 읽기 페이지를 만들고 좋아요 기능을 구현할 때 수정하겠습니다.
+
+이제 글을 가져와서 이러한 카드를 여러 개 렌더링할 수 있습니다. Remix에서 데이터 가져오기는 *로더* — 페이지가 필요로 하는 것을 정확히 가져오는 서버 측 함수 — 를 통해 수행됩니다. 로더는 페이지를 대신하여 API와 상호 작용하므로 페이지의 `api` 세그먼트에 넣을 것입니다:
+
+```tsx title="pages/feed/api/loader.ts"
+import { json } from "@remix-run/node";
+
+import { GET } from "shared/api";
+
+export const loader = async () => {
+ const { data: articles, error, response } = await GET("/articles");
+
+ if (error !== undefined) {
+ throw json(error, { status: response.status });
+ }
+
+ return json({ articles });
+};
+```
+
+페이지에 연결하려면 라우트 파일에서 `loader`라는 이름으로 내보내야 합니다.
+
+```tsx title="pages/feed/index.ts"
+export { FeedPage } from "./ui/FeedPage";
+export { loader } from "./api/loader";
+```
+
+```tsx title="app/routes/_index.tsx"
+import type { MetaFunction } from "@remix-run/node";
+import { FeedPage } from "pages/feed";
+
+export { loader } from "pages/feed";
+
+export const meta: MetaFunction = () => {
+ return [{ title: "Conduit" }];
+};
+
+export default FeedPage;
+```
+
+마지막 단계는 피드에 이러한 카드를 렌더링하는 것입니다. `FeedPage`를 다음 코드로 업데이트하세요.
+
+```tsx title="pages/feed/ui/FeedPage.tsx"
+import { useLoaderData } from "@remix-run/react";
+
+import type { loader } from "../api/loader";
+import { ArticlePreview } from "./ArticlePreview";
+
+export function FeedPage() {
+ const { articles } = useLoaderData
+
+ 
+
+
+
+
+
+ {article.author.username}
+
+
+ {new Date(article.createdAt).toLocaleDateString(undefined, {
+ dateStyle: "long",
+ })}
+
+
+
+ {article.title}
+{article.description}
+ Read more... +-
+ {article.tagList.map((tag) => (
+
- + {tag} + + ))} +
+
+ );
+}
+```
+
+### 태그로 필터링
+
+태그와 관련해서는 백엔드에서 태그를 가져오고 현재 선택된 태그를 저장해야 합니다. 가져오기 방법은 이미 알고 있습니다 — 로더에서 또 다른 요청을 하면 됩니다. `remix-utils` 패키지에서 `promiseHash`라는 편리한 함수를 사용할 것입니다. 이 패키지는 이미 설치되어 있습니다.
+
+로더 파일인 `pages/feed/api/loader.ts`를 다음 코드로 업데이트하세요.
+
+```tsx title="pages/feed/api/loader.ts"
+import { json } from "@remix-run/node";
+import type { FetchResponse } from "openapi-fetch";
+import { promiseHash } from "remix-utils/promise";
+
+import { GET } from "shared/api";
+
+async function throwAnyErrors
+
+
+
+
+ conduit
+A place to share your knowledge.
+
+
+
+
+
+ {articles.articles.map((article) => (
+
+
+
+ );
+}
+```
+
+그런 다음 로더에서 `tag` 검색 매개변수를 사용해야 합니다. `pages/feed/api/loader.ts`의 `loader` 함수를 다음과 같이 변경하세요.
+
+```tsx title="pages/feed/api/loader.ts"
+import { json, type LoaderFunctionArgs } from "@remix-run/node";
+import type { FetchResponse } from "openapi-fetch";
+import { promiseHash } from "remix-utils/promise";
+
+import { GET } from "shared/api";
+
+async function throwAnyErrors
+
+
+
+
+ conduit
+A place to share your knowledge.
+
+
+
+
+
+ {articles.articles.map((article) => (
+
+
+
+
+
+
+ Popular Tags
+ + +
+
+ );
+}
+```
+
+이것으로 완료되었습니다. 탭 목록도 비슷하게 구현할 수 있지만, 인증을 구현할 때까지 잠시 보류하겠습니다. 그런데 말이 나왔으니!
+
+### 인증
+
+인증에는 두 개의 페이지가 관련됩니다 - 로그인과 회원가입입니다. 이들은 대부분 동일하므로 필요한 경우 코드를 재사용할 수 있도록 `sign-in`이라는 동일한 슬라이스에 유지하는 것이 합리적입니다.
+
+`pages/sign-in`의 `ui` 세그먼트에 다음 내용으로 `RegisterPage.tsx`를 만드세요.
+
+```tsx title="pages/sign-in/ui/RegisterPage.tsx"
+import { Form, Link, useActionData } from "@remix-run/react";
+
+import type { register } from "../api/register";
+
+export function RegisterPage() {
+ const registerData = useActionData
+
+
+
+
+ conduit
+A place to share your knowledge.
+
+
+
+
+
+ {articles.articles.map((article) => (
+
+
+
+
+
+
+ Popular Tags
+ + +
+
+ );
+}
+```
+
+이제 고쳐야 할 깨진 import가 있습니다. 새로운 세그먼트가 필요하므로 다음과 같이 만드세요.
+
+```bash
+npx fsd pages sign-in -s api
+```
+
+그러나 등록의 백엔드 부분을 구현하기 전에 Remix가 세션을 처리할 수 있도록 일부 인프라 코드가 필요합니다. 다른 페이지에서도 필요할 수 있으므로 이는 Shared로 갑니다.
+
+다음 코드를 `shared/api/auth.server.ts`에 넣으세요. 이는 Remix에 매우 특화된 것이므로 너무 걱정하지 마세요. 그냥 복사-붙여넣기 하세요.
+
+```tsx title="shared/api/auth.server.ts"
+import { createCookieSessionStorage, redirect } from "@remix-run/node";
+import invariant from "tiny-invariant";
+
+import type { User } from "./models";
+
+invariant(
+ process.env.SESSION_SECRET,
+ "SESSION_SECRET must be set for authentication to work",
+);
+
+const sessionStorage = createCookieSessionStorage<{
+ user: User;
+}>({
+ cookie: {
+ name: "__session",
+ httpOnly: true,
+ path: "/",
+ sameSite: "lax",
+ secrets: [process.env.SESSION_SECRET],
+ secure: process.env.NODE_ENV === "production",
+ },
+});
+
+export async function createUserSession({
+ request,
+ user,
+ redirectTo,
+}: {
+ request: Request;
+ user: User;
+ redirectTo: string;
+}) {
+ const cookie = request.headers.get("Cookie");
+ const session = await sessionStorage.getSession(cookie);
+
+ session.set("user", user);
+
+ return redirect(redirectTo, {
+ headers: {
+ "Set-Cookie": await sessionStorage.commitSession(session, {
+ maxAge: 60 * 60 * 24 * 7, // 7 days
+ }),
+ },
+ });
+}
+
+export async function getUserFromSession(request: Request) {
+ const cookie = request.headers.get("Cookie");
+ const session = await sessionStorage.getSession(cookie);
+
+ return session.get("user") ?? null;
+}
+
+export async function requireUser(request: Request) {
+ const user = await getUserFromSession(request);
+
+ if (user === null) {
+ throw redirect("/login");
+ }
+
+ return user;
+}
+```
+
+그리고 바로 옆에 있는 `models.ts` 파일에서 `User` 모델도 내보내세요.
+
+```tsx title="shared/api/models.ts"
+import type { components } from "./v1";
+
+export type Article = components["schemas"]["Article"];
+export type User = components["schemas"]["User"];
+```
+
+이 코드가 작동하려면 `SESSION_SECRET` 환경 변수를 설정해야 합니다. 프로젝트 루트에 `.env` 파일을 만들고 `SESSION_SECRET=`을 작성한 다음 키보드에서 무작위로 키를 눌러 긴 무작위 문자열을 만드세요. 다음과 같은 결과가 나와야 합니다.
+
+
+```bash title=".env"
+SESSION_SECRET=dontyoudarecopypastethis
+```
+
+마지막으로 이 코드를 사용하기 위해 공개 API에 일부 내보내기를 추가하세요.
+
+```tsx title="shared/api/index.ts"
+export { GET, POST, PUT, DELETE } from "./client";
+
+export type { Article } from "./models";
+
+export { createUserSession, getUserFromSession, requireUser } from "./auth.server";
+```
+
+이제 RealWorld 백엔드와 실제로 통신하여 등록을 수행하는 코드를 작성할 수 있습니다. 그것을 `pages/sign-in/api`에 유지할 것입니다. `register.ts`라는 파일을 만들고 다음 코드를 넣으세요.
+
+
+```tsx title="pages/sign-in/api/register.ts"
+import { json, type ActionFunctionArgs } from "@remix-run/node";
+
+import { POST, createUserSession } from "shared/api";
+
+export const register = async ({ request }: ActionFunctionArgs) => {
+ const formData = await request.formData();
+ const username = formData.get("username")?.toString() ?? "";
+ const email = formData.get("email")?.toString() ?? "";
+ const password = formData.get("password")?.toString() ?? "";
+
+ const { data, error } = await POST("/users", {
+ body: { user: { email, password, username } },
+ });
+
+ if (error) {
+ return json({ error }, { status: 400 });
+ } else {
+ return createUserSession({
+ request: request,
+ user: data.user,
+ redirectTo: "/",
+ });
+ }
+};
+```
+
+```tsx title="pages/sign-in/index.ts"
+export { RegisterPage } from './ui/RegisterPage';
+export { register } from './api/register';
+```
+
+거의 다 왔습니다! 페이지와 액션을 `/register` 라우트에 연결하기만 하면 됩니다. `app/routes`에 `register.tsx`를 만드세요.
+
+```tsx title="app/routes/register.tsx"
+import { RegisterPage, register } from "pages/sign-in";
+
+export { register as action };
+
+export default RegisterPage;
+```
+
+이제 [http://localhost:3000/register](http://localhost:3000/register)로 가면 사용자를 생성할 수 있어야 합니다! 애플리케이션의 나머지 부분은 아직 이에 반응하지 않을 것입니다. 곧 그 문제를 해결하겠습니다.
+
+매우 유사한 방식으로 로그인 페이지를 구현할 수 있습니다. 직접 시도해 보거나 그냥 코드를 가져와서 계속 진행하세요.
+
+```tsx title="pages/sign-in/api/sign-in.ts"
+import { json, type ActionFunctionArgs } from "@remix-run/node";
+
+import { POST, createUserSession } from "shared/api";
+
+export const signIn = async ({ request }: ActionFunctionArgs) => {
+ const formData = await request.formData();
+ const email = formData.get("email")?.toString() ?? "";
+ const password = formData.get("password")?.toString() ?? "";
+
+ const { data, error } = await POST("/users/login", {
+ body: { user: { email, password } },
+ });
+
+ if (error) {
+ return json({ error }, { status: 400 });
+ } else {
+ return createUserSession({
+ request: request,
+ user: data.user,
+ redirectTo: "/",
+ });
+ }
+};
+```
+
+```tsx title="pages/sign-in/ui/SignInPage.tsx"
+import { Form, Link, useActionData } from "@remix-run/react";
+
+import type { signIn } from "../api/sign-in";
+
+export function SignInPage() {
+ const signInData = useActionData
+
+
+
+
+
+ Sign up
++ Have an account? +
+ + {registerData?.error && ( +-
+ {registerData.error.errors.body.map((error) => (
+
- {error} + ))} +
+
+ );
+}
+```
+
+```tsx title="pages/sign-in/index.ts"
+export { RegisterPage } from './ui/RegisterPage';
+export { register } from './api/register';
+export { SignInPage } from './ui/SignInPage';
+export { signIn } from './api/sign-in';
+```
+
+```tsx title="app/routes/login.tsx"
+import { SignInPage, signIn } from "pages/sign-in";
+
+export { signIn as action };
+
+export default SignInPage;
+```
+
+이제 사용자가 이 페이지에 실제로 접근할 수 있는 방법을 제공해 봅시다.
+
+### 헤더
+
+1부에서 논의했듯이, 앱 헤더는 일반적으로 Widgets나 Shared에 배치됩니다. 매우 간단하고 모든 비즈니스 로직을 외부에 유지할 수 있기 때문에 Shared에 넣을 것입니다. 이를 위한 장소를 만들어 봅시다.
+
+```bash
+npx fsd shared ui
+```
+
+이제 다음 내용으로 `shared/ui/Header.tsx`를 만드세요.
+
+```tsx title="shared/ui/Header.tsx"
+import { useContext } from "react";
+import { Link, useLocation } from "@remix-run/react";
+
+import { CurrentUser } from "../api/currentUser";
+
+export function Header() {
+ const currentUser = useContext(CurrentUser);
+ const { pathname } = useLocation();
+
+ return (
+
+ );
+}
+```
+
+이 컴포넌트를 `shared/ui`에서 내보내세요.
+
+```tsx title="shared/ui/index.ts"
+export { Header } from "./Header";
+```
+
+헤더에서는 `shared/api`에 유지되는 컨텍스트에 의존합니다. 그것도 만드세요.
+
+```tsx title="shared/api/currentUser.ts"
+import { createContext } from "react";
+
+import type { User } from "./models";
+
+export const CurrentUser = createContext
+
+
+
+
+
+ Sign in
++ Need an account? +
+ + {signInData?.error && ( +-
+ {signInData.error.errors.body.map((error) => (
+
- {error} + ))} +
+
+ );
+}
+```
+
+```tsx title="pages/feed/ui/Pagination.tsx"
+import { Form, useLoaderData, useSearchParams } from "@remix-run/react";
+import { ExistingSearchParams } from "remix-utils/existing-search-params";
+
+import { LIMIT, type loader } from "../api/loader";
+
+export function Pagination() {
+ const [searchParams] = useSearchParams();
+ const { articles } = useLoaderDataPopular Tags
+ + +
+
+ );
+}
+```
+
+마지막으로 로더를 업데이트하여 새로운 필터를 처리하세요.
+
+```tsx title="pages/feed/api/loader.ts"
+import { json, type LoaderFunctionArgs } from "@remix-run/node";
+import type { FetchResponse } from "openapi-fetch";
+import { promiseHash } from "remix-utils/promise";
+
+import { GET, requireUser } from "shared/api";
+
+async function throwAnyErrors
+
+
+
+
+ conduit
+A place to share your knowledge.
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+이 코드는 글에 좋아요를 표시하기 위해 `/article/:slug`로 `_action=favorite`과 함께 POST 요청을 보냅니다. 아직 작동하지 않겠지만, 글 읽기 페이지 작업을 시작하면서 이것도 구현할 것입니다.
+
+이것으로 피드가 공식적으로 완성되었습니다! 야호!
+
+### 글 읽기 페이지
+
+먼저 데이터가 필요합니다. 로더를 만들어 봅시다.
+
+```bash
+npx fsd pages article-read -s api
+```
+
+```tsx title="pages/article-read/api/loader.ts"
+import { json, type LoaderFunctionArgs } from "@remix-run/node";
+import invariant from "tiny-invariant";
+import type { FetchResponse } from "openapi-fetch";
+import { promiseHash } from "remix-utils/promise";
+
+import { GET, getUserFromSession } from "shared/api";
+
+async function throwAnyErrors
+
+
+
+
+
+
+
+ {article.author.username}
+
+
+ {new Date(article.createdAt).toLocaleDateString(undefined, {
+ dateStyle: "long",
+ })}
+
+
+
+ {article.title}
+{article.description}
+ Read more... +-
+ {article.tagList.map((tag) => (
+
- + {tag} + + ))} +
+
+ );
+}
+```
+
+더 흥미로운 것은 `ArticleMeta`와 `Comments`입니다. 이들은 글 좋아요, 댓글 작성 등과 같은 쓰기 작업을 포함합니다. 이들을 작동시키려면 먼저 백엔드 부분을 구현해야 합니다. 페이지의 `api` 세그먼트에 `action.ts`를 만드세요:
+
+```tsx title="pages/article-read/api/action.ts"
+import { redirect, type ActionFunctionArgs } from "@remix-run/node";
+import { namedAction } from "remix-utils/named-action";
+import { redirectBack } from "remix-utils/redirect-back";
+import invariant from "tiny-invariant";
+
+import { DELETE, POST, requireUser } from "shared/api";
+
+export const action = async ({ request, params }: ActionFunctionArgs) => {
+ const currentUser = await requireUser(request);
+
+ const authorization = { Authorization: `Token ${currentUser.token}` };
+
+ const formData = await request.formData();
+
+ return namedAction(formData, {
+ async delete() {
+ invariant(params.slug, "Expected a slug parameter");
+ await DELETE("/articles/{slug}", {
+ params: { path: { slug: params.slug } },
+ headers: authorization,
+ });
+ return redirect("/");
+ },
+ async favorite() {
+ invariant(params.slug, "Expected a slug parameter");
+ await POST("/articles/{slug}/favorite", {
+ params: { path: { slug: params.slug } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async unfavorite() {
+ invariant(params.slug, "Expected a slug parameter");
+ await DELETE("/articles/{slug}/favorite", {
+ params: { path: { slug: params.slug } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async createComment() {
+ invariant(params.slug, "Expected a slug parameter");
+ const comment = formData.get("comment");
+ invariant(typeof comment === "string", "Expected a comment parameter");
+ await POST("/articles/{slug}/comments", {
+ params: { path: { slug: params.slug } },
+ headers: { ...authorization, "Content-Type": "application/json" },
+ body: { comment: { body: comment } },
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async deleteComment() {
+ invariant(params.slug, "Expected a slug parameter");
+ const commentId = formData.get("id");
+ invariant(typeof commentId === "string", "Expected an id parameter");
+ const commentIdNumeric = parseInt(commentId, 10);
+ invariant(
+ !Number.isNaN(commentIdNumeric),
+ "Expected a numeric id parameter",
+ );
+ await DELETE("/articles/{slug}/comments/{id}", {
+ params: { path: { slug: params.slug, id: commentIdNumeric } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async followAuthor() {
+ const authorUsername = formData.get("username");
+ invariant(
+ typeof authorUsername === "string",
+ "Expected a username parameter",
+ );
+ await POST("/profiles/{username}/follow", {
+ params: { path: { username: authorUsername } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async unfollowAuthor() {
+ const authorUsername = formData.get("username");
+ invariant(
+ typeof authorUsername === "string",
+ "Expected a username parameter",
+ );
+ await DELETE("/profiles/{username}/follow", {
+ params: { path: { username: authorUsername } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ });
+};
+```
+
+그 슬라이스에서 이를 내보내고 라우트에서도 내보내세요. 그리고 페이지 자체도 연결하겠습니다.
+
+```tsx title="pages/article-read/index.ts"
+export { ArticleReadPage } from "./ui/ArticleReadPage";
+export { loader } from "./api/loader";
+export { action } from "./api/action";
+```
+
+```tsx title="app/routes/article.$slug.tsx"
+import { ArticleReadPage } from "pages/article-read";
+
+export { loader, action } from "pages/article-read";
+
+export default ArticleReadPage;
+```
+
+이제 독자 페이지에서 좋아요 버튼을 아직 구현하지 않았지만, 피드의 좋아요 버튼이 작동하기 시작할 것입니다! 이 라우트로 "좋아요" 요청을 보내고 있었기 때문입니다. 한번 시도해 보세요.
+
+`ArticleMeta`와 `Comments`는 다시 한번 폼들의 모음입니다. 이전에 이미 해봤으니, 코드를 가져와서 넘어가겠습니다.
+
+```tsx title="pages/article-read/ui/ArticleMeta.tsx"
+import { Form, Link, useLoaderData } from "@remix-run/react";
+import { useContext } from "react";
+
+import { CurrentUser } from "shared/api";
+import type { loader } from "../api/loader";
+
+export function ArticleMeta() {
+ const currentUser = useContext(CurrentUser);
+ const { article } = useLoaderData
+
+
+
+
+ {article.article.title}
+ +
+
+ +
+
+
+
+
+
+ {article.article.body}
+-
+ {article.article.tagList.map((tag) => (
+
- + {tag} + + ))} +
+ +
+
+
+
+
+
+ {currentUser !== null ? (
+
+ ) : (
+
+ );
+}
+```
+
+이것으로 우리의 글 읽기 페이지도 완성되었습니다! 이제 작성자를 팔로우하고, 글에 좋아요를 누르고, 댓글을 남기는 버튼들이 예상대로 작동해야 합니다.
+
+
+
+ )}
+
+ {comments.comments.map((comment) => (
+
+
+ + Sign in + or + Sign up + to add comments on this article. +
+
+
+ ))}
+
+
+
+ {comment.body}
+
+
+ 
+
+
+
+ {comment.author.username}
+
+ {comment.createdAt}
+ {comment.author.username === currentUser?.username && (
+
+
+
+ )}
+
+
+
+ );
+}
+```
+
+이 페이지는 현재 글(새로 작성하는 경우가 아니라면)을 가져와서 해당하는 폼 필드를 채웁니다. 이전에 본 적이 있습니다. 흥미로운 부분은 `FormErrors`인데, 이는 검증 결과를 받아 사용자에게 표시할 것입니다. 한번 살펴보겠습니다.
+
+```tsx title="pages/article-edit/ui/FormErrors.tsx"
+import { useActionData } from "@remix-run/react";
+import type { action } from "../api/action";
+
+export function FormErrors() {
+ const actionData = useActionData
+
+
+
+
+
+ -
+ {actionData.errors.map((error) => (
+
- {error} + ))} +
+ {tagListState.map((tag) => (
+
+
+ [" ", "Enter"].includes(e.key) && removeTag(tag)
+ }
+ onClick={() => removeTag(tag)}
+ >{" "}
+ {tag}
+
+ ))}
+
+
+ );
+}
+```
+
+이제 API 부분입니다. 로더는 URL을 살펴보고, 글 슬러그가 포함되어 있다면 기존 글을 수정하는 것이므로 해당 데이터를 로드해야 합니다. 그렇지 않으면 아무것도 반환하지 않습니다. 그 로더를 만들어 봅시다.
+
+```ts title="pages/article-edit/api/loader.ts"
+import { json, type LoaderFunctionArgs } from "@remix-run/node";
+import type { FetchResponse } from "openapi-fetch";
+
+import { GET, requireUser } from "shared/api";
+
+async function throwAnyErrors