React Native에서 로컬 서버에 접속하기 (Expo 포함)

React Native 또는 Expo를 사용하여 애플리케이션을 개발할 때, 개발 중인 컴퓨터에서 실행 중인 서버에 접속해야 할 때가 있습니다. 이 글에서는 시뮬레이터나 실제 기기에서 로컬 서버에 접속하는 방법을 설명해 보겠습니다.

---

1. 로컬 서버 실행 확인

먼저, 개발 중인 컴퓨터에서 서버가 잘 실행되고 있어야 합니다. 컴퓨터의 브라우저에서 http://localhost:3000 같은 주소로 접속해서 서버가 정상적으로 작동하는지 확인해 보세요.

---

2. IP 주소 알아내기

시뮬레이터나 기기가 로컬 서버에 접근하려면 개발 중인 컴퓨터의 IP 주소를 알아야 합니다.
아래 방법을 참고해 주세요.

Windows

  1. 명령 프롬프트(cmd)를 엽니다.
  2. `ipconfig` 명령을 입력하고 Enter를 누릅니다.
  3. `IPv4 Address` 항목에서 IP 주소를 확인합니다.

Mac/Linux

  1. 터미널을 엽니다.
  2. `ifconfig | grep inet` 또는 `ip addr` 명령을 실행합니다.
  3. 네트워크 연결(Wi-Fi 등)의 IP 주소를 확인합니다.

192.168.1.10 같은 형식의 주소를 복사해 두세요.

---

3. 서버 주소 설정하기

앱 코드에서 서버 주소를 설정해야 합니다. IP 주소와 서버의 포트를 서버 URL로 사용하세요.

const SERVER_URL = "http://192.168.1.10:3000";

네트워크 요청을 보낼 때 이 URL을 사용하면 됩니다.

// fetch를 사용하는 예시
fetch(`${SERVER_URL}/api/data`)
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

---

4. 시뮬레이터에서 테스트할 때

iOS 시뮬레이터

iOS 시뮬레이터는 http://localhost를 사용해도 됩니다.

하지만 실제 iOS 기기에서는 개발 중인 컴퓨터의 IP 주소를 사용해야 합니다.

Android 에뮬레이터

Android 에뮬레이터는 특별한 주소인 http://10.0.2.2를 사용하여 개발 중인 컴퓨터의 localhost에 접속할 수 있습니다. 자세한 내용은 Android Developers - Emulator Networking에서 확인할 수 있습니다.

Android도 마찬가지로 실제 Android 기기에서는 개발 중인 컴퓨터의 IP 주소를 사용해야 합니다.

---

5. 자주 발생하는 문제

같은 네트워크에 연결되어 있지 않는 경우

개발 중인 컴퓨터와 기기가 같은 Wi-Fi 네트워크에 연결되어 있어야 합니다.

CORS(Cross-Origin Resource Sharing) 오류

서버가 외부 요청을 허용하지 않을 경우 CORS 오류가 발생할 수 있습니다. 개발 중에는 아래와 같이 모든 요청을 허용하도록 설정하면 편리합니다.

const cors = require("cors");
app.use(cors());

Windows 방화벽 문제

방화벽이 있다면 연결이 차단될 수 있습니다. 방화벽에서 예외 규칙을 추가해 주세요.

참고 문서: Windows 방화벽 예외 추가하기

---

질문이나 추가 정보가 있으면 댓글로 남겨주세요!