LocatorJS 작동원리 및 사용법

camel·2024년 10월 21일

Locator LocatorJS google extension 파일 찾기

✅ LocatorJs란

LocatorJS는 google extension과 라이브러리입니다.

개발할 때, 수정할 요소를 검색이나 경로를 추적해서 찾았습니다.
이 도구를 사용한다면, 간단하게 클릭 한번으로 과정을 단축시켜 줍니다.

웹 화면에서 요소를 클릭하면, VSCode나 WebStorm에서 파일을 찾아서 보여줍니다.
찾는 과정을 단축시켜 업무 효율을 높여주는 도구입니다.

설치하는 방법도 정말 간단합니다.
extension을 설치하고, option or alt를 클릭하면 바로 사용할 수 있습니다.

✨ 작동 원리

그러던 중 저는 궁금했습니다.
어떻게 웹 화면에서 바로 파일로 갈 수 있는건지 궁금했습니다.

Github source를 찾아보던 중 Readme에서 요구사항을 알 수 있었습니다.

Requirements

Extension should work automatically dev mode in all modern stacks (NextJS, Create React App, Vite, etc). They automatically include babel-preset-react which includes babel-plugin-transform-react-jsx-source. Non-babel stacks use similar alternatives. If you don't have babel-plugin-transform-react-jsx-source, you should set it up manually.

내용을 요약하면, 위 스택들은 자동으로 @babel/preset-react를 포함하고 있습니다.
이 안에는 @babel/plugin-transform-react-jsx-source라는 플러그인이 있는데 이 플러그인을 통해 LocatorJS가 올바르게 작동할 수 있습니다.

라는 내용을 볼 수 있었습니다.
이 플러그인을 필요로 한다는 내용을 통해 작동원리를 유추할 수 있었습니다.

해당 babel plugin을 살펴보니 작동원리라고 확신하게 되었는데요.
이 내용을 @babel/preset-react부터 @babel/plugin-transform-react-jsx-source까지 간단하게 정리해보았습니다.
(자세한 내용은 다음 글에서 정리할 예정입니다.)

❗ @babel/preset-react

@babel/preset-react는 React 애플리케이션 개발에 필요한 Babel 플러그인들을 모아놓은 프리셋입니다.

이 프리셋은 3가지 플러그인을 포함합니다.

@babel/plugin-syntax-jsx(jsx 문법 파싱), @babel/plugin-transform-react-jsx(jsx 문법을 자바스크립트로 변환), @babel/plugin-transform-react-display-name(displayname 추가)를 포함합니다.

더불어 개발 환경에서는 2가지 플러그인을 추가하는데요.
위에서 언급한 @babel/plugin-transform-react-jsx-source가 이중 하나입니다.
(나머지 하나는 @babel/plugin-transform-react-jsx-self라는 클래스 컴포넌트 참조를 도와주는 플러그인입니다.)

✨ @babel/plugin-transform-react-jsx-source

이 플러그인은 각 JSX 요소에 source 속성을 추가해줍니다.
속성에는 소스 코드 위치(파일명과 줄 번호)를 포함하는데요 이를 통해 LocatorJS는 해당 파일을 찾을 수 있습니다.

플러그인이 실제 파일을 어떻게 변하게 하는지 살펴보겠습니다.
Babel에는 Babel REPL라고 변환 과정을 추적을 도와주는 사이트가 있는데요 이를 활용해서 확인해볼 수 있었습니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

플러그인 없이 JSX 문법을 사용하면 바벨은 아래와 같이 변환합니다.

import { jsxs as _jsxs } from "react/jsx-runtime";
function Welcome(props) {
  return /*#__PURE__*/_jsxs("h1", {
    children: ["Hello, ", props.name]
  });
}

여기서 babel/plugin-transform-react-jsx-source 플러그인을 추가합니다.
바벨은 단계별로 변환하는데요. 1단계 변환해서 아래와 같은 소스맵을 보여줍니다.

var _jsxFileName = "/repl.jsx";
function Welcome(props) {
  return <h1 __source={{
    fileName: _jsxFileName,
    lineNumber: 2,
    columnNumber: 10
  }}>Hello, {props.name}</h1>;
}

실제 파일 이름과 line, column까지 상세하게 적혀 있는 것을 볼 수 있습니다.
LocatorJS는 이를 참고하여 해당 파일과 위치를 찾을 수 있습니다.

그렇다면 babel을 사용하지 않는 상황에선 어떻게 될까요?
동적으로 합쳐지는 Module Federation이나
SWC를 사용하는 Next.js를 살펴보겠습니다.

⭕ Module federation에서는 어떻게 작동할까요?

Module federation을 사용하는 경우에는 host 파일 중심으로 잘 작동합니다.
remote한 파일의 dev server가 켜져있다면, babel이 활성화 되어있어서 올바르게 해당 파일을 찾아갑니다.
만약에 remote한 파일의 dev server가 꺼져있다면, babel이 활성화 되어있지 않아서 바로 찾아가지 않습니다.

대신에 remote한 컴포넌트를 작성한 곳으로 이동하게 됩니다.

import React18Button from "rsbuild_react_18_remote/button";
import "./App.css";
const App = () => {
  return (
    <div className="content">
      <React18Button />
      <h1>Rsbuild with React</h1>
      <p>Start building amazing things with Rsbuild.</p>
    </div>
  );
};

export default App;

이를 통해 Module Federation을 통해 올바르게 작동하는 것을 알 수 있습니다.
과연 next에서는 올바르게 작동할까요?

❌ Next.js

next.js에 관한 결론부터 말하자면 현재 버전에서는 지원하는 방법을 찾지 못했습니다.
Github Issue를 보면 14.2.2 version부터 작동하지 않는다는 내용을 확인해볼 수 있었습니다.

그래서 이전 버전에서는 어떻게 작동하나 찾아보았는데, RSC Issue가 있는 것을 확인할 수 있었습니다.
next가 app router에서는 swc를 사용하기 때문에 swc에도 이와 같은 플러그인이 필요하다는 내용입니다.

내용을 보면, app router에서 지원되지 않는다는 내용 같은데 이전 이슈에서는 어떻게 사용했는지 가늠되지 않습니다.

또한 devtools를 활용하는 방법도 있다던데 현재는 서버컴포넌트에서 잘작동하지 않아서 되지 않는 것 같습니다.

app router에서는 swc를 사용하기 때문에 바벨을 사용하기는 어려웠습니다.

만약에 next에서 사용한다면 15에서 가능하지 않을까 합니다.

LocatorJS 개발자인 infi-pc님은 Next15의 React Compiler에 해당 소스맵을 포함하기 때문에 15에서는 이러한 문제가 해결될 것을 예측한다고 하니 참고해주세요.

또한 next가 아니어도, react에서 작동하지 않는 경우가 있습니다.

React의 createPortal을 사용하면 올바르게 작동하지 않는 경우가 있었는데 위처럼 팝업을 보여주는 경우도 있었습니다.

👊 코드 베이스에 설치하는 방법 및 기타 설정

공홈을 살펴보면 추가적인 설정이 필요한 경우가 있습니다.

styled-component을 사용하는 경우에는 Locator 전용 바벨을 추가해주면 됩니다.

npm install -D @locator/babel-jsx

이후 Babel.config.js에 설정해줍니다.

module.exports = {
  presets: ["next/babel"],
  plugins: [
    ["@locator/babel-jsx/dist", {
      env: "development",
    }]
  ]
};

모든 팀원들이 사용할 수 있도록 설치도 해줄 수 있습니다.

npm install -D @locator/runtime

이후 진입점에서 아래 코드를 작성해주시면 됩니다.

import setupLocatorUI from "@locator/runtime";

if (process.env.NODE_ENV === "development") {
  setupLocatorUI();
}

이를 통해 extension 설치 없이도 사용할 수 있습니다.

😀 끝으로

LocatorJS는 흥미로운 라이브러리였습니다.
빠르게 파일을 찾아서 열어주는 것은 제가 필요로 했던 도구입니다.

또한 이 원리가 굉장히 궁금했는데,
호기심에 이끌려 원리까지 찾아내는 과정에 도달할 수 있어서 좋았습니다.
이 과정에서 babel에 관한 이해도 더 키울 수 있어서 제 성장에 있어서 좋은 도전이었습니다.

앞으로도 이러한 도구가 많이 나왔으면 좋겠고, 언젠가 저도 도움이 되는 도구를 만들어보고 싶습니다.

감사합니다!

출처:

Babel
https://babeljs.io/repl
https://babeljs.io/docs/babel-preset-react
https://babeljs.io/docs/babel-plugin-transform-react-jsx-source

extension
https://chromewebstore.google.com/detail/locatorjs/npbfdllefekhdplbkdigpncggmojpefi

react-data-id
https://www.locatorjs.com/install/react-data-id

camel

잘부탁드립니다.

이전 포스트

유저는 언제 나갔을까요? - Microsoft Clarity

다음 포스트