교육 계획 작성기 작성: 소개

안녕하세요! 그래서 새로운 미니 사이드 프로젝트를 시작했습니다. 이 앱은 훈련 계획을 작성하고 PDF 형식으로 내보내는 데 도움이 됩니다. 이번 글에서는 프로젝트 설정과 인증 및 DB 스키마 구축에 대해 이야기 하려고 합니다.

프로젝트 설정

나는 this tutorial의 도움으로 설정을했습니다. Sabin Adams는 Remix, Tailwind, MongoDB 및 Prisma로 개발 환경을 설정하는 데 도움을 드립니다. 나는 그것에 대한 공로를 인정하고 싶지 않으므로 간단한 프로젝트를 설정하려면 해당 기사/튜토리얼을 살펴보십시오.

입증

이 부분은 꽤 짧을 것입니다. 주로 내가 이전 프로젝트에서 했던 것과 동일한 작업을 많이 수행했고 Remix with MongoDB의 인증에 대해 언급하는 훌륭한 기사가 이미 있기 때문에 제가 팔로우했습니다. 당신은 그것을 찾을 수 있습니다

앱의 사용자 정보

사용자 정보를 프런트엔드에 보관할 때 즉시 컨텍스트를 생성했습니다. 하지만 조금 게으른 느낌이 들었고 많은 곳에서 사용자 데이터가 필요하지 않았기 때문에 요청 헤더에 정보가 저장되어 있기 때문에 간단한 함수를 만들기로 했습니다.

export const authenticateUser = async (req: Request) => {
  const user = await getUser(req);

  if (!user) throw redirect("auth/login");

  return user;
};

, 로더에서 호출하고 구성 요소에서 결과를 얻습니다.

export const loader: LoaderFunction = async ({ request }) => {
  const user = await authenticateUser(request);

  return user;
};
...
// in Route component
const user = useLoaderData<Awaited<ReturnType<typeof authenticateUser>>>();

그런 다음 결과가 Layout 구성 요소로 전달되어 navbar에 사용자 이름이 표시됩니다.

const Navbar = (props: { user: { name: string; id: string } }) => {
  const { user } = props;

  return (
    <div className="navbar bg-base-100">
      <Link to="/" className="btn btn-ghost normal-case text-xl">
        Strongion
      </Link>
      <div className="ml-auto font-semibold text-lg">{user.name}</div>
      <form action="/auth/logout" method="POST">
        <button name="_action" value="delete" className="btn btn-nav-sm ml-2">
          Log out
        </button>
      </form>
    </div>
  );
};

const Layout: React.FC<{ user: { name: string; id: string } }> = (props) => {
  const { user, children } = props;

  return (
    <div className="h-screen bg-base-100">
      <Navbar user={user} />
      <div className="w-2/3 mx-auto">{children}</div>
    </div>
  );
};

DB 스키마

User, Plan, Phase, Exercise의 네 가지 주요 모델로 스키마를 만들었습니다. 각 사용자는 여러 계획을 만들 수 있으므로 일대다 관계를 얻습니다. 각 계획에는 여러 단계가 있으며 각 단계에는 여러 연습이 연결되어 있습니다. 모든 관계는 일대다 유형입니다. 속성이 있는 전체 스키마는 다음과 같습니다.

model User {
  id            String   @id @default(auto()) @map("_id") @db.ObjectId
  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt
  name          String   @unique
  password      String
  trainingPlans Plan[]
}

model Plan {
  id          String   @id @default(auto()) @map("_id") @db.ObjectId
  title       String   @unique
  description String?
  trainee     User     @relation(references: [id], fields: [traineeId], onDelete: Cascade)
  traineeId   String   @db.ObjectId
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  phases      Phase[]
}

model Phase {
  id          String     @id @default(auto()) @map("_id") @db.ObjectId
  title       String
  description String?
  exercises   Exercise[]
  plan        Plan       @relation(references: [id], fields: [planId], onDelete: Cascade)
  planId      String     @db.ObjectId

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Exercise {
  id           String       @id @default(auto()) @map("_id") @db.ObjectId
  name         String
  description  String?
  exerciseData ExerciseData
  phase        Phase        @relation(references: [id], fields: [phaseId], onDelete: Cascade)
  phaseId      String       @db.ObjectId

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

type ExerciseData {
  reps Int
  sets Int
}

결론

이번 장에서는 간단한 프로젝트 설정, 인증, DB 스키마 생성에 대해 알아보았습니다. 저에게 묻는다면 꽤 흥미롭지 않은 일이지만 완료해야합니다 😅 그래서 프로젝트를 더 흥미롭게 만들기 위해 다음 섹션에서 자동 완성 검색으로 드래그 앤 드롭 구성 요소를 빌드하는 방법을 설명하겠습니다. 거기서 만나요 😉

Github -> Strongion