해시 라우터 그리고 package의 homepage 필드

배포를 하게 되면 서버에다가 1개만 배포할 일은 개인 개발자로서 거의 없습니다.

 

한 개의 서버를 빌리면 우리는 거기에다가 이것저것 다 넣고 싶어지죠. 지출을 많이 하고 싶지 않아서 그렇습니다.

 

이 때, 해시 라우터, package.json의 homepage 필드를 한번 쯤은 보게 됩니다.

 

리액트는 결국 SPA이기 때문에 어디에서 이 싱글 페이지를 돌게 할건지 꼭 명시해줘야해요. 

 

살펴볼까요?

 

 

1. pack.json의 homepage 필드 설정에 대해서 보겠습니다.

 

homepage 필드는 어플리케이션이 배포될 기본 경로를 지정합니다.  그리고, 빌드 시에 생성되는 정적파일 (static)들이 올바른 경로를 가리키도록 합니다.

 

homepage를 설정하면 빌드된 파일들이 해당 경로들을 기준으로 assets를 로드합니다. 

예를 들어서 homepage를 /homesystem으로 설정하면, 빌드된 파일에서 CSS나 JS 파일의 경로가 /homesystem/static/js/main.js 와 같이 설정됩니다.

 

 

다음으로 가볼까요? 이번에는 HashRouter의 basename 속성에 대해서 알아봅시다.

 

HashRouter의 basename은 라우터가 인식하는 기본 경로를 지정합니다. 

어플리케이션의 모든 라우트 앞에다가 basename에서 지정한 경로를 기본으로 붙여줍니다. 

 

만약에 basename을 /homesystem으로 설정하면, 라우터는 /homesystem을 기준으로 라우트를 매칭합니다.

예시로, /homesystem/#/page1은 path='/page1' 인 라우트와 매칭됩니다.

 

 

그렇다면 배포 시에 위의 두가지가 URL에 미치는 영향을 살펴봅니다.

 

플젝 설정이 다음과 같이 설정되어있다고 합시다.

 

- package.json의 homepage 필드 : /homesystem

- HashRouter의 basename 속성 : /homesystem

- 서버에서의 배포위치 baseurl/homesystem

 

URL 구조부터 분석해봅시다.

1. 기본 경로 적용

브라우저에서 어플리케이션에 접근할 때, 기본경로는 베이스url/homesystem 입니다.

 

2. HashRouter 작동방식 

HashRouter는 url의 해시# 부분을 사용하여 클라이언트 측 라우팅을 구현합니다.

basename이 /homesystem으로 설정되어있으므로, 해시부분의 경로 앞에 /homesystem이 추가됩니다.

 

3. 최종 URL 형성

따라서, url은 베이스url/homesystem/#/homesystem 이 됩니다.

여기에서 #/homesystem 부분은 라우터가 인식하는 경로이며, 실제로는 /homesystem 하위의 라우트를 가리킵니다.