RN Dev Tools

React Native development tools with web-based logging interface.
웹 기반 로그 인터페이스를 제공하는 React Native 개발 도구입니다

Features | 주요 기능

• Easy React Native project management
  간편한 React Native 프로젝트 관리

• Web-based log viewer with real-time updates
  실시간 갱신이 가능한 웹 기반 로그 뷰어

• Multi-platform support (iOS & Android)
  iOS와 Android 모두 지원

• Log filtering and statistics
  로그 필터링 및 통계 기능

• Real-time log streaming via WebSocket
  WebSocket을 통한 실시간 로그 스트리밍

• Log export functionality
  로그 내보내기 기능

Installation | 설치 방법

npm install -g rn-dev-tools

Usage | 사용 방법

Start React Native with Web Logging

RN 프로젝트 시작 + 로그 서버 실행

# Start with default settings | 기본 설정으로 실행
rn-dev-tools start

# Start with custom port and platform | 포트 및 플랫폼 지정
rn-dev-tools start --port 3001 --platform android

Build Project | 빌드하기

# Debug build | 디버그 빌드
rn-dev-tools build --platform ios

# Release build | 릴리즈 빌드
rn-dev-tools build --platform android --release

View Logs Only | 로그 뷰어만 실행

rn-dev-tools logs --port 3001

Clean Project | 캐시 정리

rn-dev-tools clean

Web Interface | 웹 인터페이스

도구 실행 후 브라우저에서 아래 주소로 접속하세요:

http://localhost:3001

Features | 웹 기능

• 실시간 로그 스트리밍
• 로그 레벨별 필터링 (Error, Warning, Info, Debug)
• 키워드로 로그 검색
• 로그 파일로 내보내기
• 로그 초기화
• 시스템 상태 모니터링

API Endpoints | API 엔드포인트

• GET /api/logs - 모든 로그 조회
• POST /api/logs - 로그 추가
• GET /api/status - 시스템 상태 조회
• POST /api/clear-logs - 로그 전체 삭제
• GET /api/export-logs - 로그 파일 다운로드

Commands | 명령어 요약

| Command | Description | Options | | ------- | --------------------------------- | ------------------------- | | start | Start RN project with web logging | --port, --platform | | build | Build RN project | --platform, --release | | logs | Start web log viewer only | --port | | clean | Clean project cache | - |

Logging from React Native App | RN 앱에서 로그 전송하기

React Native 앱에서 로그를 서버에 전송하려면 fetch를 통해 POST /api/logs 엔드포인트에 요청하세요

const sendLog = async (level, message) => {
  await fetch('http://<YOUR_IP>:3001/api/logs', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      level,  // "info", "warn", "error", "debug", "success"
      message,
      timestamp: new Date().toISOString(),
      source: Platform.OS,  // "android" or "ios"
    }),
  })
}

주의: localhost 대신 실제 IP 주소 (예: 192.168.0.101)를 사용하세요 특히 Android 에뮬레이터에서는 localhost가 동작하지 않습니다

Example | 예제

import React from 'react'
import { View, Button, Platform } from 'react-native'

const sendLog = async (level, message) => {
  await fetch('http://192.168.0.101:3001/api/logs', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      level,
      message,
      timestamp: new Date().toISOString(),
      source: Platform.OS,
    }),
  })
}
export default function App() {
  return (
    <View>
      <Button title="Info 로그 전송" onPress={() => sendLog('info', '정보 로그')} />
      <Button title="Error 로그 전송" onPress={() => sendLog('error', '에러 발생')} />
    </View>
  )
}

Optional: Replace console.log with sendLog | console.log() 대체하기 (선택)

console.log = (msg) => sendLog('info', msg)
console.warn = (msg) => sendLog('warn', msg)
console.error = (msg) => sendLog('error', msg)
이렇게 하면 기존 코드를 수정하지 않아도 로그가 RN Dev Tools 뷰어에 표시됩니다.

License | 라이선스

MIT