00:00:00React에 React Doctor라는 새로운 안티 패턴 스캐닝 도구가 생겼습니다.
00:00:05이 도구는 Million.js를 만든 매우 재능 있는 개발자인 Aidan Bai가 제작했는데요,
00:00:11그는 React Grab, React Scan, Amy의 제작자이기도 합니다.
00:00:14오늘 영상에서는 이 도구를 살펴보고, 어떻게 작동하는지 알아본 뒤
00:00:19직접 사용해 보도록 하겠습니다.
00:00:20꽤 재미있을 것 같으니 바로 시작해 보죠.
00:00:27React Doctor는 불필요한 use effect 사용,
00:00:33접근성 문제, 프롭 드릴링 같은 일반적인 React 안티 패턴을 감지하도록 설계된 간단한 CLI 도구입니다.
00:00:38내부적으로는 Rust로 작성된 가장 빠른 JavaScript 린터 중 하나인 OX lint를 활용합니다.
00:00:43OX lint는 Rust 기반이기 때문에,
00:00:44수만 줄의 코드를 단 몇 밀리초 만에 스캔할 수 있습니다.
00:00:50이 기능을 사용해 프로젝트의 추상 구문 트리(AST)를 생성하고, 훅 사용 방식,
00:00:56프롭 구조, 컴포넌트 경계와 같은 특정 React 패턴을 찾아냅니다.
00:01:0147가지 이상의 React 모범 사례를 바탕으로 작성되었으며, 유용한 스캔 기능을 포함하고 있습니다.
00:01:08예를 들어, 실수로 하드코딩된 보안 키를 찾아내거나,
00:01:13로딩 상태 패턴을 확인하여 언제 해당 패턴을 사용해야 하는지,
00:01:19반대로 언제 use transition을 사용하는 게 좋은지에 대한 리포트를 제공합니다.
00:01:21이 프로젝트는 완전히 오픈 소스이며 아직 시작 단계에 있습니다.
00:01:25따라서 커뮤니티가 누락되었다고 생각하는 다른 모범 사례 점검 항목을 추가함으로써
00:01:30프로젝트에 기여할 수 있는 좋은 기회이기도 합니다.
00:01:33제가 생각하는 이 프로젝트의 가장 멋진 부분은 UI입니다.
00:01:36디자인과 미감이 아주 훌륭할 뿐만 아니라, OX lint 덕분에 속도도 매우 빠릅니다.
00:01:42게다가 코딩 에이전트의 스킬로 실행할 수도 있고,
00:01:47Node.js API 같은 곳에서 프로그래밍 방식으로 사용할 수도 있습니다.
00:01:52이제 이 도구를 직접 사용해 봅시다.
00:01:54여기에 기본적인 주식 차트 시각화 도구인 React 기반 코드 프로젝트가 있습니다.
00:02:00AI가 존재하기도 전인 6년 전에 제가 작성한 코드인데요.
00:02:046년 전의 제가 React 코드를 얼마나 잘 짰는지 확인해보는 것도 흥미로울 것 같네요.
00:02:09제 저장소에서 React Doctor 명령어를 실행해 보겠습니다.
00:02:12보시는 것처럼 즉시 결과가 나옵니다.
00:02:15이것 좀 보세요.
00:02:16제 프로젝트 점수가 거의 만점에 가깝습니다.
00:02:186년 전에도 제가 양질의 React 코드를 작성하고 있었다는 사실을 알게 되니
00:02:24정말 뿌듯하네요.
00:02:25좋습니다, 무엇을 찾아냈는지 살펴볼까요?
00:02:27우선 키 값으로 AI를 사용하는 것에 대한 경고가 떴는데, 매우 타당한 지적입니다.
00:02:31그리고 recharts가 무거운 라이브러리라는 점도 인식했네요.
00:02:35그래서 대신 지연 로딩(lazy loading)을 사용하라고 권장하고 있습니다.
00:02:38또한 단일 use effect 안에 4개의 use state 호출이 있다는 점도 포착했습니다.
00:02:44이 경우에는 use reducer 사용을 고려해야 하죠.
00:02:46모두 매우 타당한 지적들입니다.
00:02:48React Doctor, 고마워요.
00:02:49이제 더 큰 코드베이스에서 실행해 보겠습니다.
00:02:52오픈 소스 Salesforce 대안으로 알려진 “20”이라는
00:02:57매우 인기 있는 CRM 프로젝트입니다.
00:02:59이 프로젝트도 React로 작성되었습니다.
00:03:00이 리포지토리를 클론하고 React Doctor가 어떻게 평가하는지 보겠습니다.
00:03:04실행해 보면 React Doctor가 이 프로젝트가 모노레포라는 것을 자동으로 감지하고
00:03:08패키지들을 인식하는 것을 볼 수 있습니다.
00:03:12먼저 마케팅 웹사이트 패키지의 점수를 확인해 보죠.
00:03:15보시는 것처럼 점수가 꽤 괜찮습니다.
00:03:18오류가 하나 발생했지만, 단순히 alt 태그가 누락된 것입니다.
00:03:22전반적으로 매우 좋은 점수라고 할 수 있겠네요.
00:03:25그럼 이번에는 프런트엔드 패키지를 확인해 보겠습니다.
00:03:30이 패키지는 결과가 조금 안 좋네요. 99개의 오류가 발견되었지만 여전히 안전권(초록색)입니다.
00:03:35여기서 제가 추천드리고 싶은 게 있습니다.
00:03:37본인의 GitHub 포트폴리오를 개선하고 싶은 개발자라면, 이 도구로
00:03:41다양한 오픈 소스 프로젝트를 스캔하여 의미 있는 기여를 할 수 있는 지점을
00:03:47찾아내는 데 아주 유용할 것입니다.
00:03:48자, 지금까지 React Doctor를 요약해 드렸습니다. React 프로젝트의
00:03:52교정 및 무결성 검사에 큰 도움을 줄 수 있는
00:03:58아주 가볍고 편리한 도구라고 생각합니다.
00:03:59저도 앞으로 제 프로젝트에 꼭 사용할 계획입니다.
00:04:03여러분, 오늘 영상이 유익했다면 영상 아래의
00:04:07좋아요 버튼을 눌러서 알려주세요.
00:04:09그리고 저희 채널을 구독하셔서 앞으로 올라올
00:04:14다른 영상들도 놓치지 마세요.
00:04:15지금까지 Better Stack의 Andris였습니다. 다음 영상에서 뵙겠습니다.