[2차 협업프로젝트 TIL] 1일차 회고

 

1일차 진행상황

 

이번 2차 협업프로젝트는 프로젝트 리더로 새로운 경험을 함께 하며 진행하게 되었다.

 

팀장이니만큼 사전에 프로젝트 전반에 대해 계획해야 할 것, 팀원들끼리 나눌 역할 계획 등을 미리 생각해야 해서 1일차부터 잠도 설치고 시작하게 되었다.

 

1일차에는 다음과 같은 사항을 공유했다.

• 레포지토리 생성 및 세팅상황 공유
• Tailwind 초기세팅에 관한 수정사항 공유
• 공용 컴포넌트 작업 시작 전 체크사항 확인

레포지토리 세팅이 약간 늦어질뻔 했지만 담당 팀원님과 함께 해결하며 다행히 제때 세팅을 마치고 다른 팀원분들과 공유할 수 있었다.

 

1일차에 배운 점

 

💡 개방적인 아이디어 공유 상황의 중요성 인지

행정업무에서는 팀 리더의 역할이 굉장히 중요했다. 리더가 삐끗하면 위에서부터 줄줄이 무너질 수 있어서 항상 고민하는 사람처럼 보였다. 그래서 분위기도 수직적이면서 폐쇄적인 경향이 강했다.

 

그러나 개발환경에서의 팀 리더는 팀원들을 존중하며 함께 해야하는 수평적 입장에서 프로젝트에 임해야 결과물이 잘 나온다는 것을 기초프로젝트, 여러 현업자분들의 멘토링에서 많이 느꼈었다.

 

그래서 나도 그러한 점을 중시하면서 개방적인 분위기로 만들고, 함께 만들어가되, 팀원이 챙기지 못할 수 있는 뒤도 챙겨주고, 교육생인만큼 서로 배우고 성장할 수 있는 환경을 조성하며 프로젝트를 진행해보고자 한다.

 

💡 UseRef를 통해 커스텀 드롭다운메뉴 일부기능 구현

현재 맡고 있는 드롭다운메뉴를 구현하면서 빈 공간을 눌렀을 때 메뉴가 닫히도록 하고 싶었다.

 

그래서 고민하면서 여러 시도를 해보다가 UseRef를 사용해서 이벤트리스너와 함께 구현하면 간단하게 구현된다는 글을 보게 되었고, 바로 시도해보았다.

// Ref와 관련된 코드는 제외된 코드
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);

const handleClickOutside = (e: MouseEvent) => {
    if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
      setIsOpen(false);
    }
  };
  
  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);
  
  return (
    <div className="flex w-[217px] flex-col space-y-[2px]" ref={dropdownRef}>
      // 생략
    </div>
  );

 

위 코드는 이를 구현한 부분만 따온 코드이다. 

 

UseRef는 직접 DOM을 건드리기 때문에 지금까지 거의 사용해보지 않았는데, 이런 기능에서 사용해보니 경우에 따라서는 사용해도 좋겠다는 생각이 들었다.

 

코드를 해석하면 다음과 같다.

 

우선 드롭다운메뉴를 감싸는 div 요소에 ref 속성을 할당하고, 이 div 요소에 직접적 접근이 가능하게 해주었다.

 

handleClickOutside 함수에서는 외부 클릭을 감지하기 위해 event 객체를 매개변수로 받도록 하고, dropdownRef.current로 현재 dropdownRef가 참조하는 DOM 요소를 나타냈다. 

 

또, current의 contains 메서드를 사용해서 클릭한 곳이 드롭다운 메뉴 내부인지를 감지하게 했다. 만약 내부가 아니면 setIsOpen 함수를 false로 바꿔서 메뉴가 닫히도록 했다. 여기서 e.target 타입을 Node로 강제하고 있는데, 이는 contains 메서드가 Node 타입의 객체를 인수로 받기 때문이다. 그리고 e.target이 DOM 요소라는 것이 확정적인 상황이기 때문이다.

 

그래서 e.target을 Node 타입으로 안전하게 사용하기 위해 사용했다.

 

useEffect 훅에서는 컴포넌트가 열리면 mousedown 이벤트를 시작하여 위에서 만든 handleClickOutside 함수를 실행하고, 컴포넌트가 언마운트되면 이벤트를 종료하도록 했다.

 

향후 프로젝트 계획 및 기대사항

 

1일차부터 배우고 느낀 것이 많았다.

 

앞으로 남은기간동안에도 팀이 원활하게 프로젝트를 끝낼 수 있도록 긍정적인 환경을 조성하는데 앞장서고, 팀원들을 믿고 함께 해야겠다는 계획을 지키려고 한다.

 

또, 개인적으로도 이러한 경험들을 쌓아서 개발자로의 직군변경을 성공적으로 할 수 있는 밑거름이 되었으면 좋겠다.