루프백 주소(Loopback Address)로 설정된 개발 서버를 다른 디바이스에서 테스트하고 싶을 경우 IPv4 주소:포트번호를 입력하여 접속하는 방법에 대하여
Loopback Address
개발을 하다 보면 자주 만나게 되는 127.0.0.1은 특수 목적을 지닌 IPv4 주소로,
루프백 주소(Loopback Address)라고 한다. 자기 자신을 가리키기 위한 목적으로 쓰기 위해 예약된 IP 주소이기 때문에 패킷을 외부로 전송하지 않고, 자신이 송신한 패킷을 그대로 자신이 수신한다. 따라서 루프백 주소를 통해 다른 장치와 통신은 불가능하다. 또한 localhost는 127.0.0.1로 Redirect 설정이 되어 있기 때문에 127.0.0.1:3000과 같다.
create-react-app으로 생성한 앱은 npm start, npx start, yarn start 등의 명령어를 통해 localhost:3000에 프로젝트를 실행시킨다. 이 로컬 서버에서 실시간으로 코드 수정 사항을 확인할 수 있다. 다양한 디바이스 환경의 테스트 또한 Safari의 응답형 디자인 모드나 Chrome 개발자 도구 Toggle device Toolar로 가능하긴 하지만, 종종 다른 디바이스에서 직접 테스트를 해봐야 할 경우가 생긴다.
IPv4 주소 통해 접속하기
우선 이 방법은 개발 PC와 디바이스가 같은 네트워크 환경인 경우 사용이 가능하다. 먼저 터미널에서 ipconfig(mac은 ipconfig getifaddr en0)를 입력하여 IPv4 주소를 확인한다.
$ ipconfig getifaddr en0
xxx.xxx.xx.xx # IPv4 주소모바일 환경에서 접속을 시도한다면, 와이파이 연결을 확인한 후 ip주소:포트번호를 입력하여 접속한다.
xxx.xxx.xx.xx:3000명령어 변형
기존의 yarn start로 실행하는 것 이외에 HOST=xxx.xxx.xx.xx yarn start로 실행하면 localhost로 열리는 대신 바로 IPv4주소가 포함되어 앱이 실행된다. 애플 작업 환경일 경우 mac과 iPhone 연속성에 의해 주소를 바로 모바일에 붙여넣을 수 있어 이 방법이 더 편하다.
아래처럼 package.json의 scripts를 수정하고 yarn ipv4로 실행할 수도 있다.
"scripts": {
"start": "react-scripts start",
"ipv4": "HOST=xxx.xxx.xx.xx react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},Gatsby Develop
Gatsby는 React 기반으로 만들어진 정적 사이트 생성 프레임워크로, React 이해도가 있다면 포트폴리오, 개인 블로그 등을 보다 편하게 개발할 수 있다. gatsby develop 명령어를 통해 개발 서버를 실행할 수 있는데, -H 옵션을 사용하여 실행하면 된다.
$ gatsby develop -H xxx.xxx.xx.xx
You can now view gatsby-projectㅤin
the browser.
⠀
http://xxx.xxx.xx.xx:8000/
⠀
View GraphiQL, an in-browser IDE, to
explore your site\'s data and schema
⠀
http://xxx.xxx.xx.xx:8000/___graphql
⠀
Note that the development build is not
optimized.
To create a production build, use gatsby
build
⠀
success Building development bundle -
2.730s
success Writing page-data.json files to
public directory - 0.035s - 3/3 84.59/s