[ReactJS] npm 명령어 입력시 초기 루트 Url 설정

[ReactJS] npm 명령어 입력시 초기 Root Url 설정

---

개요

  npm으로 서버를 구동시킬 때, 초기 Url을 어떻게 변경하여 접근하도록 할지 알아본다.

 

목차

• 소개 배경
• 변경 방법
• 변경 결과
• 위와 같은 방법을 적용한 서비스

 

소개

 1. 소개 배경 

 

서버 구동시 Root Url 변경 배경

• npm을 통해 서버를 구동하면, 기본 설정은 root directory('/')로 이동하게 된다. 하지만 실제 배포되어 Client에게 보여지는 서비스 이외에도 다뤄야 하는 resource들이 존재하고 이를 Url을 통해 접속하며 관리 할 수 있기 때문에, 이를 위해 서버 구동 혹은 사이트 접속시 Client에게 제공되는 Url은 앞에 /app이 들어가도록 하기 위해 서비스 접속시 사이트의 Url의 앞에 /app이 항상 붙게 하기 위해 위의 변경 방법을 찾아보게 되었다.

 

 2. 변경 방법 

1. package.json에 아래의 code를 입력하여준다.
2. 경로가 입력되는 Routes 태그 밖에 Router 태그의 basename을 이용해, 모든 주소 앞에 /app이 붙어 접근되도록 한다.

-1번-

 

-2번-

 

 3. 변경 결과 

변경 결과

서버를 구동하면 뒤에 /app이 붙고, 서버는 /app이 붙은 결과에 따라 위의 LandingPage를 제공하는 것을 확인 할 수 있다. 

 

 4. 위와 같은 방법을 적용한 서비스 

www.musinsa.com 메인화면