React File Preview

React 컴포넌트가 실제 페이지 안에서 어떻게 보이는지 VS Code에서 바로 확인하세요. 개발 서버나 별도 HTTP 포트 없이 현재 파일과 저장 전 변경사항을 격리된 프리뷰 탭에 렌더링합니다.

현재 0.1.x는 Preview 릴리스입니다. 전체 애플리케이션을 실행하는 대신 선택한 파일에 도달하는 페이지 문맥과 브라우저에서 안전하게 재현할 수 있는 프로젝트 런타임만 구성합니다.

주요 특징

실제 페이지 문맥: 선택한 컴포넌트의 사용처를 따라가 가장 가까운 Page, Layout 또는 App 안에서 부모·형제·조건부 UI와 함께 렌더링합니다.
파일별 독립 프리뷰: 여러 React 파일을 각각 고정된 탭으로 열고, 대상 또는 의존 파일이 바뀐 프리뷰만 자동 갱신합니다.
React Page Inspector: 컴포넌트 트리, 현재 파일 위치, Wireframe, 요소 선택, 강조 표시와 소스 이동을 한 화면에서 사용할 수 있습니다.
블로커와 데이터 제어: 숨겨진 JSX 분기, 필요한 props와 hook 값, GraphQL/REST payload를 확인하고 Auto·Smart·JSON 값으로 프리뷰 상태를 조정할 수 있습니다.
스타일과 자산 재사용: 프로젝트의 CSS, CSS Modules, Sass, Tailwind, styled-components theme, 이미지·폰트와 public asset을 가능한 범위에서 그대로 사용합니다.
서버 없는 격리 실행: 앱의 백엔드나 개발 서버를 시작하지 않고, 외부 네트워크가 차단된 VS Code 웹뷰에서 번들을 실행합니다.

VS Code Extensions에서 React File Preview를 검색하거나 다음 명령을 실행합니다.

code --install-extension newdlops.react-file-preview

검토용 VSIX는 Extensions 화면의 Install from VSIX...로 설치할 수 있습니다.

명령 팔레트에서도 React Preview를 검색해 같은 명령을 실행할 수 있습니다.

모드	언제 사용하나요?
`Open Current React File in Page Context`	실제 Page/Layout/App 안에서 현재 파일의 위치와 동작을 확인할 때
`Open Current File Export Gallery`	현재 파일의 컴포넌트 export를 서로 격리해 빠르게 비교할 때
`Refresh Focused Preview`	자동 갱신을 기다리지 않고 현재 프리뷰를 즉시 다시 빌드할 때

Page Context가 정확한 사용처를 찾지 못하면 프리뷰에 STANDALONE으로 표시됩니다. 이 경우 다른 PAGE PATH를 선택하거나 Export Gallery에서 파일 자체를 확인할 수 있습니다.

자동 생성된 값은 프리뷰 전용이며 실제 애플리케이션 데이터로 취급되지 않습니다.

VS Code for Web과 가상 워크스페이스는 지원하지 않습니다. Remote SSH, Dev Container와 Codespaces는 원격 운영체제에 맞는 확장 패키지가 필요합니다.

상세 설정, 호환 범위, 문제 해결과 구현 문서는 GitHub에서 관리합니다.

버그와 기능 요청은 GitHub Issues에 등록해 주세요. 보안 문제는 공개 이슈 대신 보안 정책의 비공개 제보 경로를 사용해 주세요.

MIT License · Publisher: newdlops