# Show GN: 리액트 컴포넌트 소스코드를 찾아주는 크롬 확장 프로그램

> Clean Markdown view of GeekNews topic #17791. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=17791](https://news.hada.io/topic?id=17791)
- GeekNews Markdown: [https://news.hada.io/topic/17791.md](https://news.hada.io/topic/17791.md)
- Type: show
- Author: [unqocn](https://news.hada.io/@unqocn)
- Published: 2024-11-16T12:30:52+09:00
- Updated: 2024-11-16T12:30:52+09:00
- Original source: [chromewebstore.google.com](https://chromewebstore.google.com/detail/react-code-finder/bbidpgoneibefablhfcnaennjkfbflmk)
- Points: 10
- Comments: 1

## Summary

리액트 컴포넌트의 소스코드를 빠르게 찾을 수 있는 크롬 확장 프로그램이 개발되었습니다. 이 확장 프로그램은 개발자 도구의 React Code Finder 탭을 통해 컴포넌트 코드를 쉽게 찾아 IDE로 열거나 편집할 수 있게 해줍니다. 특히, 대규모 앱에서 렌더링 된 요소를 기반으로 소스코드를 찾기 어려운 개발자들에게 유용하며, 실시간 코드 수정 및 브라우저에서의 변경 사항 확인을 지원합니다.

## Topic Body

브라우저에 렌더링 된 요소를 통해 리액트 컴포넌트의 소스코드를 빠르게 찾을 수 있는 크롬 익스텐션입니다.  
  
사내에서 리액트 소스코드 톺아보기 스터디를 하다가 "리액트 소스코드를 읽으면 이런 것도 할 수 있어요" 라는 컨셉으로 만든 익스텐션입니다. 딱히 홍보나 소개를 한 적은 없는데 알음알음 미국, 인도 개발자분들이 꽤 사용하고 계셔서 소개차 올려봅니다.  
  
익스텐션 설치 후 개발자 도구에 있는 React Code Finder 탭을 여시면 개발 환경에서 컴포넌트 코드를 빠르게 찾아 IDE로 열거나 편집할 수 있습니다.  
  
앱의 규모가 커지면서 렌더링 된 요소를 바탕으로 소스코드를 빠르게 찾기 어려운 분들, react-devtools 익스텐션의 사용성이 아쉬웠던 분들, 코드를 실시간으로 수정하고 브라우저에서 변경 사항을 확인하고 싶은 분들에게 유용할 것 같습니다.  
  
자세한 사용법은 아래 README.md를 참고해주세요~!  
  
https://github.com/Jonghakseo/react-code-finder-extension/blob/main/README-ko.md  
  
Github 링크  
  
https://github.com/Jonghakseo/react-code-finder-extension  
https://github.com/Jonghakseo/react-code-finder-server

## Comments



### Comment 31358

- Author: unqocn
- Created: 2024-11-16T12:32:06+09:00
- Points: 2

참고로 익스텐션을 배포하고 보니 이미 유사한 익스텐션/라이브러리로 Locatorjs 라는 이름의 제품이 있더라구요!   
  
개인적인 사용 경험에서는 제 익스텐션이 좀 더 편했는데, 단순이 제가 익숙해서 그럴 수도 있다고 생각합니다 ㅎㅎㅎ  
  
이러한 기능에 관심이 있으신 분은 해당 제품도 참고해보시면 좋을 것 같습니다.  
  
https://www.locatorjs.com/