Remix.run에 대한 레거시 코드베이스

11월 27일에 유지 관리가 필요한 레거시 코드베이스를 얻었습니다. 나는 코드를 본 적이 없었지만, 코드베이스를 몇 번 훑어본 후에 유지 관리가 필요하다는 것이 분명해졌습니다.

Remix.run을 사용하여 방금 앱을 만들었습니다.

Remix.run - 기본으로 돌아가기

Mathias Nilsson · 12월 22일 · 3분 읽기

#react #programming #javascript #productivity

더 많은 것을 준비했습니다.





마티아스 닐슨


@edgesofts






이것은 매우 흥미로울 것입니다. 재작성이 필요한 C# 백엔드와 Angularjs 프런트엔드가 있는 꽤 큰 오래된 레거시 코드베이스를 방금 얻었습니다. 우리는 Remix로 가기로 결정했습니다. 프로세스에 대한 첫 번째 블로그 게시물을 작성할 수도 있습니다.


오후 14:22 - 2021년 11월 27일









이 앱은 C#, Angularjs, JQuery, FabricJS, chartjs 및 MySQL을 DB로 사용하여 빌드되었습니다. 앱이 하는 일의 짧은 버전은 NRC와 실내 재료의 흡수를 고려하여 실내/연결된 실내의 잔향 시간을 계산하는 것입니다. 그래프를 사용하고 방에 재료/흡수를 추가하면 앱을 사용하여 RT-60 목표에 가까워지거나 최소한 가능한 한 가까워질 수 있습니다.

나는 Remix.run, MongoDB(Prisma 포함), Fabricjs 및 chartjs 및 Tailwindcss를 사용하기로 결정했습니다. 앱은 원래 앱과 나란히 있어야 합니다. 배포를 위해 Fly.io를 사용할 계획이었습니다.

나는 말 그대로 이것으로 시작했습니다.

npx create-remix@latest

내 계획은 db 모델을 살펴보고 이전 웹사이트가 어떻게 생겼는지 살펴보고 기능을 모방하고 사용자 경험을 개선하는 것이었습니다.



이전에도 다시 작성했지만 솔직히 말해서 진행 상황이 이렇게 만족스러운 적은 없었습니다. 며칠 만에 재료 경로와 엔티티 경로를 다시 작성했습니다. 그래프는 클라이언트 측에 불과했지만 useEffect 후크를 사용하면 서버 렌더링이 아닌 그래프를 쉽게 얻을 수 있습니다.

내 mongodb는 Mongo Atlas를 사용하여 스웨덴에 있습니다. 이 앱은 프랑크푸르트에서 실행되는 Fly.io와 함께 배포되었습니다. 이것은 캐시가 비활성화된 초기 로드와 이러한 종류의 데이터베이스 로드입니다.

export const loader: LoaderFunction = async () => {
  const materials: MaterialPick[] = await db.material.findMany({
    select: {
      id: true,
      name: true,
      absorbtionLevels: true,
      attributes: true,
      absorberClass: true,
      description: true,
      physicalMaterial: {
        select: {
          name: true,
        },
      },
      materialType: {
        select: {
          name: true,
        },
      },
    },
    orderBy: [
      {
        name: "asc",
      },
    ],
  });
  return json(
    materials.map(
      (material) => {
        const jsonData = material.absorbtionLevels as Prisma.JsonArray;
        const attr = material.attributes as Prisma.JsonArray;
        return {
          ...material,
          absorbtionLevels: jsonData.map((a) => {
            const obj = a as Prisma.JsonObject;
            const absorbtion = obj["absorbtion"] as number;
            const frequency = obj["frequency"] as Frequency;
            return { absorbtion, frequency };
          }),
          attributes: attr,
        };
      }
    )
  );
};

꽤 빠른!!

이 모든 작업을 다시 수행하고 원하는 스택을 선택할 수 있다면 Remix.run에서 절대 벗어나지 않을 것입니다. Prisma가 포함된 MongoDB가 베타 버전이므로 대신 PostgreSQL을 사용할 수 있었을 것입니다. 앱은 진행 중인 작업이지만 기본 비트는 초고속 반복으로 제자리에 있습니다.

손을 아래로! 레거시 코드를 다시 작성해야 하고 스스로 선택할 수 있는 사치가 있다면. Remix.run을 사용해 보고 POC를 만들어 직접 확인하세요. 그것을 사용해야만 설명할 수 있다.

다시 프론트엔드/백엔드 코더가 되어 기쁩니다.