저는 이번에 8월 초부터 토스에서 프론트엔드 개발 어시스턴트로 일할 기회를 얻게 되었습니다! 🎉

새로운 직장에서 한달동안 일해보니, 모든 경험이 흥미로우면서 재밌고, 실무적인 부분에서 많이 배우고 있습니다.

이번 포스트에서는 제가 사소한 기능을 만들면서 피드백 받고 고민하던 과정에서 배운 점들을 공유하고자 합니다.

기술 스택

프론트엔드 개발자분들 뿐만 아니라 많은 개발자 분들이 기술 스택을 배우는데에 중요도를 최우선으로 하는 경우가 있는데요.

많은 경우에서는 기술을 얼마나 고차원적으로 잘 사용하는지가 그다지 중요하지 않을 수 있습니다.

실제 사례

이번엔 직접 사례를 보며 이야기 해보겠습니다.

아래 기능은 모달 안에 썸네일이 없을 때, 모달이 hover 되면 버튼이 보이는 방식으로 동작하는 것이었습니다.

• 리뷰 전 코드 (Worst Case)

function Modal() {
  const buttonRef = useRef(null);

  const handleMouseOver = () => {
    if (buttonRef.current == null) {
      return;
    }

    buttonRef.current.opacity = "1";
  };

  const handleMouseLeave = () => {
    if (buttonRef.current == null) {
      return;
    }

    buttonRef.current.opacity = "";
  };

  return (
    <ModalContainer
      onMouseOver={handleMouseOver}
      onMouseLeave={handleMouseLeave}
    >
      <Button ref={buttonRef}>썸네일이 없습니다.</Button>
      <Content>...</Content>
    </ModalContainer>
  );
}

저는 해당 코드를 처음 작성할 때 ref를 사용해 직접 DOM 요소의 스타일을 변경했습니다.

당시에는 opacity 스타일을 변경한다 라는 것에 초점이 맞춰져 아주 안좋은 방식으로 DOM에 접근하게 하였었습니다.

• 리뷰로 제안된 코드

function Modal() {
  const [showIcon, setShowIcon] = useState(false);

  const handleMouseOver = () => {
    setShowIcon(true);
  };
  const handleMouseLeave = () => {
    setShowIcon(false);
  };

  return (
    <ModalContainer
      onMouseOver={handleMouseOver}
      onMouseLeave={handleMouseLeave}
    >
      {showIcon && <Button>썸네일이 없습니다.</Button>}
      <Content>...</Content>
    </ModalContainer>
  );
}

리뷰를 통해 state를 사용해 동적으로 스타일링하는 방법을 제안받았습니다. 이 방법은 아주 일반적인 리액트 코드로 마우스 이벤트에 따라 상태를 변경하여 버튼을 보여주는 방식이였습니다.

이 방법도 좋지만, 저는 무언가 이 방법에 의문이 들었습니다.

버튼의 상태를 굳이 리액트에서 관리해야할까?

• 최종 반영된 코드 (Best Case)

function Modal() {
  return (
    <ModalContainer>
      <Button>썸네일이 없습니다.</Button>
      <Content>...</Content>
    </ModalContainer>
  );
}

const Button = styled.button({
  transition: "opacity 0.5s ease",
  opacity: 0,
  "&:hover": {
    opacity: 1,
  },
});

최종적으로는 CSS만으로 스타일 변경을 처리하는 방법을 사용했습니다.

이를 통해 해당 컴포넌트에서는 상태 관리가 필요 없도록 수정할 수 있었습니다.

느낀 점

저는 이번 경험을 통해서 다음과 같은 의문이 들었습니다.

정말 기술 스택을 늘리고 스택의 사용법만 배우는 것이 개발 실력일까?

어쩌면 특정 기술을 사용하는 것이 오버 엔지니어링 아닐까?

사실 이번 경험 뿐만 아니라 실무에서 경험하고 고민한 것을 토대로 답을 내자면, 결국에 중요한 것은 문제 정의와 해결 능력인 것 같습니다.

현재 내가 해결하려는 문제가 무엇인지 정확하게 이해하고, 현 상황에 맞게 문제를 해결할 수 있느냐가 제일 중요한 것 같습니다.

고차원적인 라이브러리나 프레임워크를 사용할 수 있지만, 사실은 그것들이 필요하지 않을 수 있습니다.

위 사례와 같이 굳이 리액트의 상태 관리 없이 스타일 속성만으로도 모달과 버튼을 구현할 수 있습니다.

저는 앞으로도 이러한 점을 인지하고 코드를 짜는 개발자가 아닌 문제 해결을 하는 개발자가 되도록 열심히 노력하려고 합니다.