반응형 웹페이지 개발 시 localhost 외부 접속 설정하기

STUDY/React

칼코

🔎 문제 상황

React와 Vite를 이용하여 웹 애플리케이션을 개발하면서 반응형 웹페이지 또한 구현하려고 시도했다. 하지만 로컬 환경에서 개발하면서 스마트폰으로 해당 URL에 접속하려고 했을 때 문제에 부딪혔다.

문제의 원인

기본적으로 Vite를 사용하여 npm run dev를 실행하면 로컬 환경에서는 localhost 주소에 애플리케이션을 실행한다. 이는 개발 단계에서는 문제가 되지 않았으나 스마트폰에서 접속하려고 할 때 문제가 발생했다.

(아래 사진은 내가 작업하고 있는 페이지이다. 포트 번호: 5173)

인터넷을 검색한 결과, package.json 파일을 수정해야 한다는 것을 알게 되었다.

Network 부분을 활성화해야 하는데 use --host to expose를 하라고 적혀있다.

바로 package.json 파일에 들어가 "scripts" 부분에서 "dev": "vite --host"와 같이 --host 옵션을 추가하여 Vite 개발 서버가 네트워크 주소로 활성화되도록 설정했다.

// package.json

"scripts": {
    "dev": "vite --host",
  // 이하 생략
}

이렇게 설정한 후에 다시 npm run dev를 실행하면, 로컬 IP 주소로 서버가 실행된다.

이제 스마트폰이나 다른 디바이스에서 해당 IP 주소와 포트 번호를 사용하여 React 애플리케이션에 접속할 수 있게 되었다.

이러한 외부 접속 문제는 단순한 설정 변경으로 해결할 수 있었다.

Network에 활성된 IP 주소로 접속하니 잘 접속되었고 반응형 웹페이지 구현 테스트를 위해 모바일 width인 경우 header 태그가 background-color: pink;로 적용된 모습을 확인할 수 있었다.