React Code Locator

브라우저에서 컴포넌트를 클릭하면 소스 코드 위치로 바로 이동. 개발 중 '이 UI가 대체 어느 파일이지?'를 없앤 빌드 플러그인.

TypeScriptViteWebpackNext.js · Turbopack

📝 관련 글

앞선 글에서 우클릭으로 컴포넌트 소스로 점프하는 도구를 만든 이야기를 했다. 그 도구의 심장은 "코드를 읽어서 원하는 위치를 찾아내는" 부분, 즉 AST 파싱이다. 만들면서 AST…

…

react-code-locator 시리즈의 마지막 글. 지금까지는 사람이 화면에서 우클릭해 소스로 점프하는 이야기였다. 그런데 요즘은 코드를 고치는 주체가 사람만이 아니다. AI…

우클릭으로 컴포넌트 소스로 점프하는 도구를 만들 때, 런타임의 핵심 질문은 이거였다. 사용자가 클릭한 이 DOM 요소가, 대체 어느 React…

react-code-locator를 만들 때 현실적인 고민이 하나 있었다. 요즘 React 프로젝트의 번들러는 제각각이다. Vite, Next.js(Webpack), Rollup…