배경
React Native로 webview를 개발하려면 source 의 uri 값으로 주소를 입력해 주어야 한다.
<WebView source={{ uri: Config.WEBVIEW_URL }} />같은 wifi를 사용하면 컴퓨터와 모바일 기기가 서로 통신 가능하기에, 그동안은 개발할 때마다 공유기 IP 주소를 찾아서 넣어 줬었다. ex) http://xxx.xxx.x.x:3000
그런데 최근에 RN 코드를 볼 일이 이전보다 늘어나며 이 작업이 꽤나 스트레스로 다가왔다. 우리 회사는 IP 주소가 가변적이기 때문이다! 😵💫
IP 주소를 고정시킬 수도 있겠지만, 그보다는 IP 주소에 따라 uri 값을 동적으로 바꿔줄 수 있는 script를 짜는 것이 더 빠른 방법일 것 같아 이를 진행해 보았다.
Script
먼저 package.json에 script를 추가하자. 본인은 scripts 폴더에 webview.js 라는 파일을 생성할 것이다.
"webview": "node scripts/webview.js"우리 회사에서는 webview url을 WEBVIEW_URL 이라는 환경 변수로 관리하고 있어서, 아래 script를 통해 .env.development의 해당 값을 동적으로 바꿔 주었다.
// scripts/webview.js
const fs = require('fs');
const { exec } = require('child_process');
const TARGET_KEY = 'WEBVIEW_URL';
exec("ifconfig en0 | grep 'inet ' | awk '{print $2}'", (error, stdout, stderr) => {
const wifiIP = stdout.trim();
const content = fs.readFileSync('.env.development', 'utf8');
const data = content.split('\n');
const webviewUrlIndex = data.findIndex((element) => element.startsWith(TARGET_KEY));
data[webviewUrlIndex] = `${TARGET_KEY}=http://${wifiIP}:3000`;
const newContent = data.join('\n');
fs.writeFileSync('.env.development', newContent);
});우선, exec() 내의 명령어를 실행하면 IP 주소를 얻을 수 있다. 그리고 fs를 통해 env 파일을 읽은 후 WEBVIEW_URL 값을 IP 주소에 따라 변경해 주면 된다.
위처럼 string인 content에서 WEBVIEW_URL을 찾아내는 방식이 조금 불완전해 보일 수 있으나, 앞으로 몇 달 간은 위 코드가 문제가 될 수 있는 env 파일 변화가 없을 것 같기에 간단한 방식으로 진행하였다. 향후 dotenv.parse()를 이용한다면 더 나은 방식도 가능할 것이다 😉
이 작업을 통해 항상 평균 1분은 소요되던 과정이 없어져서 아주 행복해졌다!
