React, 특히 tailwind로 컴퍼넌트를 작성하다보면 정확히 어떤 코드가 어떤 부분을 그리는지 답답할 때가 있죠. 그래서 엘리먼트로(<div/>)부터 코드를 찾거나, 혹은 이 코드가 어떤 <div/>를 그리는지 실시간으로 확인할 수 있는 vs code extension을 만들었어요.

이제 열흘 쯤 되었는데, 세상에 Microsoft Marketplace에서 Visualization부문 Trending 1위가 됐어요! (링크) 며칠이나 버틸지는 모르겠지만 정말 기분이 좋네요 ㅎㅎ

주요 기능은 다음과 같아요:

• 컴포넌트별 격리된 렌더링(Strobook처럼 Component Drive Development를 위한 툴이에요. 근데 이 부분 때문에 초기 설정이 좀 필요해요)

• UI에서 우클릭, 혹은 layerTree 더블클릭으로 해당 코드 찾기

• text editor에서 커서가 움직임에 따라 해당하는 UI 실시간 하이라이트(보라색 음영)
  

사용해보고 싶으신 분은 여기를 클릭해주세요:
https://landing.visualwind.dev

날카롭고 잔인한 피드백 해주시면 감사드리겠습니다. 혹은 사용이 어려우시다면 꼭 연락주세요! 댓글도 좋고 메일도 좋습니다. ([email protected]) 감사합니다!

(** 여담이지만 사실은 react native용으로 비슷하지만 기능이 좀 더 많은 플러그인을 만들었었는데, 수요가 영 없어서 고민하다가 웹 용으로 더 간단한 걸 만들어 보게 되었어요. 그런데 이쪽이 훨씬 반응이 더 좋네요. 이런 걸 알아가는 것도 재미있는 것 같아요.)