이전 포스팅에서 vite를 이용해 앱을 생성하고 npm run dev 라는 명령어를 통해 리액트 앱을 구동시키는 방법을 배웠다.
앱을 구동시키고 나면 위와 같은 문구가 뜬다, 여기서 http://localhost:5173/을 클릭하면 가동중인 리액트 앱에 접속된다.
이 때 http://localhost:5173/ 은 어디서 나온 주소일까? 또 우리는 이 주소를 통해 어떻게 리액트 앱에 접속할 수 있었던걸까?
리액트 앱에는 웹서버가 내장되어 있기 때문이다. 또한 사실은 npm run dev가 리액트 서버를 가동시키는 명령어였다!!
그렇다면 localhost라는 주소는 무엇일까? localhost는 내 컴퓨터의 주소를 의미한다. 그렇기 때문에 웹브라우저에서 localhost:5173이라는 주소로 접속한다는 것은, 브라우저에서 내 컴퓨터에서 실행되는 리액트 웹서버에 접속 요청을 보낸다고 이해하면 된다. 콜론 뒤에 붙은 5173이라는 번호는 포트 번호를 의미하며, 포트 번호는 하나의 컴퓨터 내에 여러 대의 서버를 동작시키기 위해 필요한 체계이다.
하나의 PC에서 여러 개의 서버가 동작하고 있을 때, 주소로만 요청을 받게 되면 어떤서버가 이 요청에 응답해야하는지 애매하기 때문에, 우리 컴퓨터는 모든 프로그램이 실행될 때마다 자동으로 고유한 포트 번호를 붙여준다. 리액트 서버에는 5173을 PHP 서버에는 3344라는 포트번호를 붙여주면 localhost:5173 로 요청이 들어왔을 때 리액트 서버로 들어온 요청이구나! 라고 판단할 수 있게 된다.
한 가지 주의해야할 점은, localhost는 자기 자신의 컴퓨터를 가리키는 주소이기 때문에, 남의 컴퓨터에서는 당연히 이 주소로 리액트 앱에 접속할 수 없다.