노트북에서 로컬 호스트로 올린 react 사이트에 다른 핸드폰에서 접속하는 법

    
같은 와이파이에 연결되어 있다면 노트북에서 로컬 호스트로 올린 리액트 사이트에 다른 핸드폰에서 접속하는 것이 가능합니다. 하지만 몇 가지 설정을 확인하고 조정해야 할 수 있습니다. 여기에 몇 가지 확인해야 할 사항들을 정리해두었습니다:

방화벽 설정 확인: 노트북의 방화벽 설정이 들어오는 연결을 차단하지 않도록 해야 합니다. 방화벽 설정에서 해당 포트(보통 리액트 개발 서버는 3000번 포트를 사용합니다)를 열어주어야 합니다.

리액트 개발 서버 설정: 리액트 개발 서버가 로컬호스트(localhost) 뿐만 아니라 네트워크 인터페이스를 통해서도 접근할 수 있도록 설정되어 있어야 합니다. package.json에서 scripts 항목에 있는 start 커맨드를 "start": "react-scripts start --host 0.0.0.0"와 같이 수정하면, 모든 네트워크 인터페이스를 통해 서버에 접근할 수 있게 됩니다.

IP 주소 확인 및 사용: 노트북의 IP 주소를 확인한 후, 핸드폰 브라우저에서 http://노트북의-IP-주소:3000 형태로 접속해보세요. IP 주소는 운영체제에 따라 커맨드 라인에서 ipconfig(Windows) 또는 ifconfig(Mac/Linux) 명령어로 확인할 수 있습니다.

같은 네트워크 확인: 노트북과 핸드폰이 정말로 같은 와이파이 네트워크에 연결되어 있는지 확인해주세요. 때때로 장치들이 게스트 네트워크나 다른 분리된 네트워크에 연결되어 있는 경우가 있습니다.

이러한 점들을 확인하고 설정해보세요. 설정 후에도 접속이 안된다면, 네트워크 설정이나 장치의 방화벽/보안 소프트웨어 설정을 다시 한번 검토해볼 필요가 있습니다.

---

리액트 개발 서버를 실행할 때 기본적으로는 `localhost`에서만 접근이 가능하게 설정되어 있습니다. 이는 보안상의 이유와 개발 중에 국한된 환경에서 테스트하기 위함입니다. 그러나 다른 장치에서도 접속을 허용하려면 다음과 같은 설정이 필요합니다:

1. **호스트 설정 변경**: 기본적으로 리액트 개발 서버는 `localhost`를 호스트로 사용합니다. 다른 장치에서 접근을 허용하기 위해서는, 서버가 모든 네트워크 인터페이스를 통해 접근할 수 있도록 호스트를 `0.0.0.0`으로 설정해야 합니다. 이렇게 설정하면 노트북의 IP 주소를 통해 다른 장치에서 접근할 수 있습니다.

2. **방화벽/보안 설정**: 다른 장치에서 노트북으로의 접속을 허용하기 위해서는 노트북의 방화벽 설정이나 보안 소프트웨어에서 해당 포트(예: 3000)를 열어주어야 할 수 있습니다. 기본 설정에서는 이러한 인바운드 연결이 차단될 수 있습니다.

기본 설정과의 차이점은, 기본적으로 로컬 네트워크의 다른 장치들이 개발 중인 사이트에 접근할 수 없도록 설정되어 있다는 점입니다. 이를 변경하기 위해서는 위에서 언급한 설정 조정이 필요합니다.