tailwind config와 남의 코드 갖다 쓰기

상황

진행중인 프로젝트에서 기존에 사용하던 module css가 아닌 tailwind를 사용하기로 결정되었다. 작업 빨리 쳐내야 할 때 클래스 검색하는 거로 시간을 쓰는 게 싫어서 공식문서도 읽고 카카오FE의 사용 후기도 읽어보면서 이것저것 테스트해보는 시간을 가지고 있었다. tailwind.config.ts 파일을 원하는 수준으로 개조하는 데 ─ 솔직히 tailwind의 크기 체계 좀 구린 듯 ─ 특히 도움을 많이 받았다.

spacing: {
  ...range(1, 100).reduce((acc, px) => {
    acc[`${px}`] = pxToRem(px);
    return acc;
  }, {}),
}

 

문제

여러 테스트 과정에서 '버튼을 누르면 튀어나오고, 또 버튼 누르면 도로 들어가는' 사이드바를 만들어보려 했다. 머릿속으로 미리 구상해본 구조가 있었고, 크게 어렵지 않게 뚝딱 만들어낼 수 있을 거라 생각했다. 그런데 내가 만든 코드는 동작하지 않았다. 로직이 크게 복잡하지 않아서 더 충격적이었다.

export default function Home() {
  const [menuOn, setMenuOn] = useState(false);

  return (
    <div className="flex align-start">
      <div
        className={`${
          menuOn ? "ml-0" : ""
        } bg-blue-400 h-screen w-120 -ml-120 transition-all`}
      >
        일단 메뉴 같은 거
      </div>

      <button type="button" onClick={() => setMenuOn((prev) => !prev)}>
        버튼이다 애송이
      </button>
    </div>
  );
}

너비가 120px인 메뉴를 일단 margin-left로 옆에 숨겨두고, 버튼을 누르면 margin-left: 0으로 만들어서 transition에 의해 '부드럽게' 튀어나와야 했다. setMenuOn 함수가 오동작하는 건가 싶어서 콘솔에도 찍어보았지만, menuOn state는 정직하게 false와 true를 오가고 있었다. 상태는 정상적으로 변경되고 있으니 문제는 다른 곳에 있다는 소리였다.

 

해결

문제의 원인은 아주 간단했는데, tailwind에는 ml-0이라는 클래스가 존재하지 않았기 때문이다. 물론 공식 문서에는 ml-0이라는 클래스가 존재한다. 그저 내 tailwind에는 존재하지 않았을 뿐이다.

빌어먹을 tailwind의 구린 크기 체계를 튜닝하기 위해 내가 카카오FE 블로그에서 별 생각 없이 긁어온 코드가 문제였다. tailwind에서는 1이 4px이고 0.25rem이다. 카카오FE 블로그에서 긁어온 코드는 이 ─ 직관적으로 받아들이기에는 너무나도 난해한 ─ 부분을 해결하고자 tailwind의 1을 1px이고 1/16rem이도록 튜닝한 것이다.

이제 다시 카카오FE 코드를 살펴보면, spacing을 튜닝하기 위해서 range(1, 100) 배열에 reduce 함수를 사용하고 있다. 그렇다. 1부터 100까지인 것이다. 0이 없으니 당연히 ml-0도 동작하지 않을 수 밖에.

 

결론

머릿속으로는 늘 남의 코드를 갖다 쓸 때는 의심 또 의심해야 한다고 생각하고 있지만, 카카오FE와 같이 권위(?)있는 블로그를 읽을 때면 이런 의심이 작동하지 않는 것 같다. 사실 남의 코드를 그대로 갖다 박으면 내가 성장하는 게 아니니까 이런 부분에 대해서도 주의할 필요가 있겠다.