[⚛️] 리액트 live server 연결하는 법

어찌보면 정말 간단한 내용이지만 

JavaScript에 익숙해져있고, React를 처음 접하는 나에게는 모든 것이 생소하다..!

리액트에서 작성한 문서를 어떻게 웹 페이지에서 확인하는지! 간단히 적어보겠다.

 

 

문제 상황

리액트 강의를 들으며 실습하던 중, 연결되었던 웹 화면이 갑자기 뜨지 않았다.

자바스크립트에서는 html 파일에서 우클릭 - open with live server 하면 바로 연결되었지만 리액트는 그렇지 않았다.

콘솔창을 확인해보니 다음과 같은 오류 메세지가 떴다.

 

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.

 

흠.. 대충 보니 module이 제대로 연결되지 않은 것 같은데..

연결된 모든 파일명을 살펴보았으나 정상적이었다.

 

 

 

문제 해결

 

저 오류를 그대로 구글에 검색했다.

https://stackoverflow.com/questions/73749664/github-pages-link-empty-and-error-failed-to-load-module-script

Github Pages. Link empty and Error: Failed to load module script

 

가장 상단에 뜬 페이지를 찾았고 나와 비슷한 상황인 듯 했다.

 

답변이 달려있어 살펴보니 

“ specifically in the same level of package.json file:: “ 

라는 말이 있었다.

 

실행 중인 vscode의 파일 탐색기를 보니 package.json 파일을 확인할 수 있었다.

 

해당 파일을 눌러보니

 

 

다양한 내용이 적혀있었고, 그 중 dev를 발견했다.

 

리액트 파일을 실행할 때 터미널에 "yarn dev" 를 실행한 게 생각이 났고

그대로 쳐보니

사진과 같이 아래부분에 http 링크가 떴다.

command + 클릭을 하니 내가 작성한 내용이 적힌 창이 떴다.

 

 

리액트는 웹을 실행시킬 때 터미널에 yarn dev를 입력하여 나오는 주소를 따라가면 된다!

그리고 모를 때는 무조건 구글링

전세계에 한 명쯤은 나랑 같은 오류를 겪었을테니..