chore(dotenv): Local 환경변수 설정

개요

- 현재 API Endpoint등 계속 바뀌는 부분들이 혼란을 야기하여,
react-native-dotenv를 통해서 개인의 엔드포인트는 환경변수로 지정할 수
있도록 한다.

수정 사항

- react-native-dotenv 패키지 추가
- 하드 코딩된 API 엔드포인트 수정

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = function (api) {
-	api.cache(true);
+	api.cache(false);
 	return {
 		presets: ["babel-preset-expo"],
 		plugins: [
@@ -16,6 +16,15 @@ module.exports = function (api) {
 				},
 			],
 			"react-native-reanimated/plugin",
+			[
+				"module:react-native-dotenv",
+				{
+					envName: "LOCAL_ENV",
+					moduleName: "@env",
+					path: ".evn.local",
+					allowUndefined: false,
+				},
+			],
 		],
 	};
 };

package.json

@@ -45,6 +45,7 @@
 		"react-dom": "18.2.0",
 		"react-native": "0.74.1",
 		"react-native-collapsible": "^1.6.1",
+		"react-native-dotenv": "^3.4.11",
 		"react-native-drawer-layout": "^3.3.0",
 		"react-native-fs": "^2.20.0",
 		"react-native-gesture-handler": "~2.16.1",
@@ -75,6 +76,7 @@
 		"@types/eslint-config-prettier": "^6.11.3",
 		"@typescript-eslint/eslint-plugin": "^7.16.1",
 		"@typescript-eslint/parser": "^7.16.1",
+		"@types/react-native-dotenv": "^0.2.2",
 		"babel-plugin-module-resolver": "^5.0.0",
 		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",

src/config/api.js

@@ -1,10 +1,9 @@
 import axios from "axios";
 import * as SecureStore from "expo-secure-store";
-
-const BACKEND_URL = "http://192.168.40.14:8080/api";
+import { API_URL } from "@env";
 
 export const api = axios.create({
-	baseURL: BACKEND_URL,
+	baseURL: API_URL,
 	headers: {
 		"Content-type": "application/json",
 	},

src/config/websocket.js

@@ -1,6 +1,5 @@
 import { Client } from "@stomp/stompjs";
-
-const WS_URL = "ws://localhost:8080/ws";
+import { WS_URL } from "@env";
 
 export const connectWebSocket = (onMessage) => {
 	let client = new Client({

src/context/WebSocketContext.js

@@ -8,8 +8,7 @@ import React, {
 import { Client } from "@stomp/stompjs";
 import { getChatroomsByType } from "../config/api"; // Adjust the import path as necessary
 import { Text } from "react-native";
-
-const WS_URL = "ws://192.168.0.30:8080/ws";
+import { WS_URL } from "@env";
 
 const WebSocketContext = createContext(null);