불쾌한 버그 수정(모달 이해) - 1부

Next.js 프로젝트의 성가신 버그 디버깅

지난 주쯤에 저는 주로 Next.js로 구축되고 Shadcn 구성 요소 라이브러리를 사용하여 스타일이 지정된 새 프로젝트 작업을 시작했습니다. 구축하는 동안 속도가 느려졌을 뿐만 아니라 작업 도구를 디버깅하고 이해하는 방법을 다시 생각하게 만드는 특히 짜증나는 버그에 직면했습니다.

왜 이것에 대해 쓰는가?

이 글을 쓰는 목적은 구성 요소와 프레임워크의 내부 작동 방식을 더 깊이 이해하도록 하는 것입니다. 과거에는 잘 작동하는 코드를 작성했지만 작성한 내용을 깊이 이해할 시간이 없었습니다. 이번에는 체계적인 접근 방식을 채택하여 사물의 내부 작동 방식을 배우고 버그를 코딩할 때 속도를 늦추지 않도록 하고 싶습니다. 그것에 대해 글을 쓰면 내 여정을 되돌아보고, 배우고, 공유하는 데 도움이 될 것입니다.

디버깅에 대한 체계적인 접근 방식

이 문제를 해결하기 위해 디버깅 프로세스를 세 가지 체계적인 단계로 나누었습니다.

1. 버그 복제: 문제가 발생한 특정 커밋으로 돌아가서 코드를 검토하고 오류를 안정적으로 재현합니다.
2. 버그가 발생하는 이유 이해: 문제를 일으킨 구성 요소 간의 근본 원인과 상호 작용을 분석합니다.
3. 버그 수정: 솔루션을 구현하고 검증합니다.

이 글에서는 첫 번째 단계를 자세히 다루겠습니다.

---

버그 복제

저에게 많은 문제를 일으킨 문제가 있는 구성 요소는 다음과 같습니다.

코드 조각: OrganizationDetailsModal

"use client";
import { motion } from "framer-motion";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogClose, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import { useState } from "react";

const OrganizationDetailsModal: React.FC<OrganizationDetailsModalProps> = ({ hideModal, organization }) => {
  const [open, setOpen] = useState(true);
  const handleClose = () => {
    hideModal();
    setOpen(false);
  };

  return (
    <Dialog
      open={open}
      onOpenChange={(isOpen) => {
        if (!isOpen) {
          handleClose();
        }
      }}
    >
      <DialogContent
        onCloseAutoFocus={(e) => {
          e.preventDefault();
          const safeElement = document.getElementById("safe-focus-element");
          if (safeElement) safeElement.focus();
        }}
        className="flex max-h-[80vh] w-[400px] flex-col rounded-xl bg-white px-5 py-4 overflow-y-auto"
      >
        <DialogHeader>
          <div className="flex justify-between items-center">
            <DialogTitle>Organisation Details</DialogTitle>
            <DialogClose asChild>
              <button onClick={handleClose} className="text-gray-700 hover:text-gray-900">X</button>
            </DialogClose>
          </div>
        </DialogHeader>

        <div className="space-y-4">
          <div className="flex justify-between">
            <span className="text-sm font-semibold">Organization Name</span>
            <span className="text-sm">{organization.organizationName}</span>
          </div>
        </div>

        <DialogFooter>
          <button onClick={handleClose} className="bg-primary-green text-white px-4 py-2 rounded-md">
            Back
          </button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default OrganizationDetailsModal;

코드 조각: 드롭다운 메뉴

<DropdownMenu>
  <DropdownMenuTrigger className="focus:outline-none">
    <MoreHorizontal className="h-5 w-5 cursor-pointer" />
  </DropdownMenuTrigger>
  <DropdownMenuContent align="start" sideOffset={4} className="rounded-md p-1 shadow-md">
    {rowMenuItems.map((menuItem, menuIndex) => (
      <DropdownMenuItem
        key={menuIndex}
        onClick={() => menuItem.onClick(row)}
        className="flex justify-start gap-2 px-3 py-2 hover:bg-gray-100"
      >
        {menuItem.icon && <Image src={menuItem.icon} alt={menuItem.label} />}
        <span>{menuItem.label}</span>
      </DropdownMenuItem>
    ))}
  </DropdownMenuContent>
</DropdownMenu>

이 구성 요소의 기능

1. 드롭다운 메뉴: 이 구성요소를 클릭하면 작업 드롭다운 목록이 표시됩니다.

1. 대화 상자 구성 요소: 이 모달 대화 상자는 드롭다운에서 작업을 선택하면 실행됩니다. 자세한 정보를 표시하며 닫을 수 있는 닫기 버튼이 있습니다.

버그

드롭다운을 클릭하면 예상대로 열립니다. 드롭다운 안에는 대화 상자 구성 요소가 나타나도록 트리거하는 세부 정보를 볼 수 있는 옵션이 있습니다. 대화 상자가 닫힐 때 문제가 발생합니다. 이후에는 페이지의 다른 항목을 클릭할 수 없습니다. 두 구성 요소가 분리되어도 완벽하게 작동하는 것 같아서 당황스러웠습니다.

---

좌절감

몇 시간 동안 조사했지만 문제의 원인을 정확히 찾아낼 수 없었습니다. 드롭다운과 대화 상자 구성 요소 간의 상호 작용으로 인해 일종의 상태 불일치 또는 DOM 문제가 발생하는 것으로 나타났습니다.

결국 구성 요소 중 하나를 완전히 교체하기로 결정하여 문제가 일시적으로 해결되었습니다. 하지만 근본적인 원인을 파악하지 못한 채 불만족스러웠는데, 이에 대해 좀 더 알아보고자 합니다.

결론

이것으로 버그를 복제하고 문제를 문서화하는 디버깅 여정의 첫 번째 부분을 마칩니다. 다음 부분에서는 이러한 비정상적인 동작의 원인이 무엇인지 이해하기 위해 이러한 구성 요소의 내부 작동 방식을 자세히 살펴보겠습니다. 이를 통해 앞으로 비슷한 버그를 수정하고 개발자로서 성장하는데 도움이 되는 인사이트를 얻을 수 있기를 바랍니다.

2부: 버그가 발생하는 이유 이해

를 계속 지켜봐 주시기 바랍니다.

위 내용은 불쾌한 버그 수정(모달 이해) - 1부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!