# React Native VPN 개발자를 위한 새로운 npm 패키지, **rn‑wireguard‑tunnel** 소개 *React Native VPN·WireGuard·npm 패키지* --- # # 📌 서론 – “VPN을 직접 구현하고 싶지만, 어디서부터 시작해야 할까?” 모바일 앱에서 VPN 기능을 제공하려면 **네트워크 레이어**와 **암호화 로직**을 직접 다루어야 합니다. 특히 **React Native** 로 개발된 앱이라면, 네이티브 모듈을 직접 구현하거나 복잡한 설정 파일을 관리해야 하는 경우가 많아 초보 개발자에게 큰 장벽이 됩니다. 그런데 이제 **npm** 에 **rn‑wireguard‑tunnel** 이라는 새로운 패키지가 공개되었습니다. *“WireGuard 기반 터널을 간단히 만들 수 있다면 어떨까?”* 라는 질문에 대한 답이 바로 여기 있습니다. 이 글에서는 1. **rn‑wireguard‑tunnel** 이 무엇인지, 2. 왜 **React Native VPN** 개발에 유용한지, 3. 실제 프로젝트에 적용하는 방법을 초보자도 이해하기 쉬운 단계별 설명과 예시 코드로 풀어드립니다. --- # # 🛠️ 본론 ## # 1️⃣ rn‑wireguard‑tunnel 이란? | 항목 | 내용 | |------|------| | **패키지 이름** | `rn-wireguard-tunnel` | | **주요 기능** | Go 기반 `gowireguard` 엔진을 래핑하여 **React Native** 에서 WireGuard 터널을 손쉽게 생성·제어 | | **지원 플랫폼** | Android, iOS (네이티브 모듈 포함) | | **설치 방법** | `npm install rn-wireguard-tunnel` 혹은 `yarn add rn-wireguard-tunnel` | | **공식 페이지** | [npmjs.com/package/rn-wireguard-tunnel](https://www.npmjs.com/package/rn-wireguard-tunnel) | | **레포지토리** | GitHub (링크는 npm 페이지에 포함) | | **핵심 장점** | - **Zero‑configuration**: 최소 설정만으로 터널 생성
- **경량**: Go 바이너리 기반이라 성능 손실이 거의 없음
- **React Native 친화적**: Promise 기반 API 제공 | > **핵심 포인트** : 기존에 `react-native-wg` 와 같은 패키지는 C/C++ 라이브러리를 직접 빌드해야 했지만, `rn-wireguard-tunnel` 은 **Go** 로 구현된 백엔드를 사용해 빌드 과정을 크게 단순화했습니다. --- ## # 2️⃣ 왜 WireGuard 인가? – 최신 VPN 프로토콜의 장점 1. **속도** – UDP 기반으로 설계돼 기존 IPsec 대비 2~3배 빠른 전송 속도 제공 2. **보안** – 최신 암호화 알고리즘(ChaCha20‑Poly1305) 적용, 코드 베이스가 4 KB 수준으로 감시가 용이 3. **간편한 설정** – 키 교환이 간단하고, 설정 파일이 JSON 형태에 가깝게 직관적 React Native 로 VPN을 구현할 때, **WireGuard** 를 선택하면 네이티브 레이어에서 복잡한 암호화 로직을 직접 코딩할 필요가 없으므로 **개발 생산성**이 크게 향상됩니다. --- ## # 3️⃣ rn‑wireguard‑tunnel 설치 및 기본 사용법 ### # 3.1 프로젝트에 패키지 추가 ``` bash # npm 사용 시 npm install rn-wireguard-tunnel --save # yarn 사용 시 yarn add rn-wireguard-tunnel ``` > **Tip** : iOS는 CocoaPods 를 통해 네이티브 모듈을 연결해야 합니다. > ``` bash > cd ios && pod install && cd .. > ``` ### # 3.2 기본 API 소개 | 메서드 | 설명 | 반환값 | |-------|------|--------| | `createTunnel(config)` | WireGuard 설정 객체를 받아 터널을 생성 | `Promise` | | `startTunnel(tunnelId)` | 지정된 터널을 시작 | `Promise` | | `stopTunnel(tunnelId)` | 실행 중인 터널을 중지 | `Promise` | | `deleteTunnel(tunnelId)` | 터널 객체와 관련 리소스를 정리 | `Promise` | | `getStatus(tunnelId)` | 현재 터널 상태(UP/DOWN, 트래픽 통계 등) 반환 | `Promise` | ### # 3.3 실제 코드 예시 ``` tsx // App.tsx import React, {useEffect, useState} from 'react'; import {Button, Text, View, StyleSheet} from 'react-native'; import { createTunnel, startTunnel, stopTunnel, getStatus, deleteTunnel, } from 'rn-wireguard-tunnel'; const WG_CONFIG = { // WireGuard 인터페이스 설정 (예시) privateKey: 'YOUR_PRIVATE_KEY', address: '10.0.0.2/32', dns: ['1.1.1.1', '8.8.8.8'], peers: [ { publicKey: 'PEER_PUBLIC_KEY', endpoint: '123.45.67.89:51820', allowedIPs: ['0.0.0.0/0'], persistentKeepalive: 25, }, ], }; export default function App() { const [tunnelId, setTunnelId] = useState(null); const [status, setStatus] = useState('Disconnected'); // 터널 생성 const initTunnel = async () => { try { const tunnel = await createTunnel(WG_CONFIG); setTunnelId(tunnel.id); console.log('Tunnel created:', tunnel.id); } catch (e) { console.error('Create error', e); } }; // 연결 시작 const connect = async () => { if (!tunnelId) return; await startTunnel(tunnelId); setStatus('Connected'); }; // 연결 종료 const disconnect = async () => { if (!tunnelId) return; await stopTunnel(tunnelId); setStatus('Disconnected'); }; // 상태 주기적으로 조회 useEffect(() => { let timer: NodeJS.Timeout; if (tunnelId) { timer = setInterval(async () => { const s = await getStatus(tunnelId); setStatus(s.state); }, 3000); } return () => clearInterval(timer); }, [tunnelId]); // 최초 실행 시 터널 생성 useEffect(() => { initTunnel(); }, []); return ( RN WireGuard Tunnel Demo Status: {status}