on
React 구성 요소 계층 구조를 통과하기 위한 VS 코드 확장인 새플링 소개
React 구성 요소 계층 구조를 통과하기 위한 VS 코드 확장인 새플링 소개
반응형
React는 프런트엔드 응용 프로그램을 구축하는 강력한 도구이지만, 규모에 따라 구성 요소의 계층을 탐색하는 데 어려움이 있을 수 있습니다. 새플링은 그것을 바꾸는 것을 목표로 한다.
모던 리액트 애플리케이션은 거대합니다. 페이스북은 5만 개 이상의 컴포넌트로 구성되어 있다. 부모-자녀 관계와 꽤 간단한 앱의 물려받은 기능조차 관리하기에 적합하지 않을 수 있습니다. 좋은 파일 구성이 도움이 될 수는 있지만 응용프로그램 기능의 핵심에 있는 구성 요소 구조를 반영하지는 않습니다.
어느 소품 여러분이 일하는 구성 요소를 이용할 수 있는지 여부를 확인할 필요가 있다면, 해당 구성 요소의 부모 파일로 이동할 필요가 있다. 조직 패러다임이 유사한 구성 요소를 함께 묶어도 계층 관계가 불분명하게 남아 있기 때문에 물려받은 소품의 정확한 출처를 찾아야 합니다. 이 문제에 대한 업계 표준은 훌륭한 파일 구성이지만 큰 그림을 한 눈에 떠올릴 수 있는 간단한 방법은 아직 없습니다. 우리는 그것을 바꾸기 위해 새플링을 만들었습니다.
새플링은 VS 코드 사이드바에 포함된 대화형 구성 요소 종속성 트리를 생성하는 VS 코드 확장입니다. 트리의 각 노드는 해당 파일을 빠르게 열 수 있는 사용 가능한 프로포트의 요약과 탐색 버튼을 제공합니다. 간단한 UI를 통해 읽기 쉽고 직관적으로 사용할 수 있으며, 저장 때마다 응답성이 높은 동작이 즉시 업데이트됩니다. Sapling의 시각적 신호도 쉽게 따라할 수 있습니다. 작업 공간의 활성 파일에 해당하는 노드에는 굵은 텍스트가 있으며, Sapling이 Javascript 구문 오류나 잘못된 가져오기 문을 발견하면 손상된 구성 요소를 경고 색으로 강조 표시합니다. Redux 스토어에 연결한 구성 요소를 알려주는 편리한 아이콘도 있습니다.
새플링은 사용자를 염두에 두고 설계되었다. Sapling은 강력한 메모리를 갖추고 있으며 작업 공간 세션 사이에서도 확장 상태를 유지합니다. 애플리케이션이 수백 개의 구성 요소인 경우 트리를 현재 작업 구성 요소로 수동으로 확장할 필요가 없습니다. 또한 응용 프로그램에서 Material-UI 또는 React-Router와 같은 타사 구성 요소를 사용하는 경우 VS 코드의 확장 설정에서 해당 구성 요소를 켜거나 끄면 Sapling에서 표시 여부를 선택할 수 있습니다. 추가 편의를 위해 Sapling은 클라이언트의 React 파일에서 빌드할 수 있으며, 현재 표시를 단순화하고 싶은 경우 Sapling은 활성 파일을 루트로 하여 트리를 재구성하는 "Build Tree"라는 유용한 상태 표시줄 단추를 제공합니다.
그러면 새플링은 이 모든 것을 어떻게 할까요? 새플링은 VS Code Webview API와 함께 VS Code Extension API를 사용하여 구축되어 VS Code IDE에 완벽하게 통합됩니다.
구성 요소 계층에 대한 루트 파일을 선택하면 Sapling은 해당 파일을 읽고 @babel/parser를 사용하여 파일 내용에서 추상 구문 트리(AST)를 만듭니다. 그런 다음 새플링은 AST를 처리하고 루트 파일의 하위 반응 구성 요소, 이러한 구성 요소가 정의된 파일, 해당 구성 요소 등을 탐지합니다. 그런 다음 Sapling은 하위 구성 요소 파일을 반복적으로 구문 분석하여 React 응용 프로그램의 구성 요소 계층을 나타내는 노드 트리 데이터 구조를 생성합니다.
여기서 노드 트리는 반응 구성 요소를 사용하여 자체 빌드된 웹 애플리케이션인 새플링 웹뷰로 전달됩니다. 웹 뷰는 VS 코드 사이드바에 대화형 계층 트리를 생성하므로 기존 VS 코드 파일 브라우저보다 훨씬 직관적인 방법으로 React 응용 프로그램을 탐색할 수 있습니다.
Sapling은 Disord 및 Kickstarter와 같은 회사에서 사용하는 동일한 트랜스컴파일러를 사용하여 ES6 가져오기, JSX 태그, Typescript 및 TSX 태그로 작성된 React 구성 요소와 React 라우터 구성 요소의 component 또는 child 속성을 사용하여 호출된 요소를 구문 분석합니다. 이를 통해 유연성과 견고성을 모두 얻을 수 있으며, 이는 미래를 위해 훨씬 더 많은 기능을 염두에 둔 오픈 소스 제품에 필요한 특성입니다. Sapling은 어레이로 가져오고 호출된 구성 요소를 수용하고 개발자가 변경된 레이블로 전달된 속성을 추적할 수 있도록 프로펠러 상속 표시를 제공할 계획입니다. 또한 웹 팩과 같은 번들러에서 경로 별칭을 사용하는 것이 크고 복잡한 코드베이스에 매우 유용하다는 것을 알고 있으므로, Sapling이 이러한 경로를 해결할 수 있기를 기대하고 있습니다.
보다 일반적으로, VS 코드 IDE가 개발자들 사이에서 가장 인기 있는 IDE 중 하나이지만, 다른 IDE를 선호하는 사람들도 배제되어서는 안 된다. 마찬가지로 React가 가장 인기 있는 프런트 엔드 라이브러리인 것은 확실하지만 Angular 및 Vue와 같은 프레임워크도 광범위하게 사용됩니다. 우리는 다른 인기 있는 프레임워크를 사용하여 개발자에게 직관적인 구성 요소 계층 탐색을 제공할 수 있기를 원합니다.
확장을 설치하려면 VS 코드 확장 측 패널에서 새플링을 검색하거나 VS 코드 마켓플레이스의 새플링 페이지로 직접 이동하십시오.
이 오픈 소스 제품에 기여하고 싶다면, Seagate의 Sapling GitHub 페이지를 방문하여 시작하세요!
아래 링크에서 새플링 팀 구성원을 따르십시오.
찰스 구트워스
요르단 히셀
린제이 베어드
폴 코스터
Unsplash에 Jan Huber의 사진을 덮으세요.
from http://issue-disk.tistory.com/19 by ccl(A) rewrite - 2021-10-10 09:01:12