nodeJS를 이용한 로컬서버 구동 | module 문제 해결

힘들었다. 힘들었다. 그렇지만 드디어 해냈다. 

 

몇시간을 씨름했는지 모르겠다. 그렇지만 해냈다.

 

nodeJS와 express를 이용해서 드디어 로컬서버를 구동하는데 성공했다. 그리고 지금까지 만든 모든 기능들이 완전히 정상적으로 작동하는 것까지 확인했다! 만세!

 

 

 

HTML 파일을 서버에서 불러오는 건 어렵지 않았는데, HTML에 먹여 있는 css 파일이나 js 파일이 누락되었기 때문에 꽤 많은 시간을 구글링하면서 보내야 했다. 덕분에 지금 시간은 12시를 훌쩍 바라보고 있고, 슬슬 눈이 침침해지기 시작했다...

 

문제를 어떻게 해결한 것인지는 솔직히 모르겠다. 다만 express에 내장되어 있는 기능들을 사용해서 static 폴더를 만드니(public 폴더를 만들고 js폴더와 style폴더를 그 안에 넣었다) nodeJS가 css와 js문서를 읽기 시작했다. 이러한 내부 메너니즘은 나중에 천천히 알아가면 될 것이다. 오늘은 기능을 구현해 냈다는데 많은 의의를 두고 싶다.

 

+ module 문제 때문에도 꽤 시간을 쏟았다. 총 두 가지의 에러를 만났는데

 

첫 번째 에러는 Uncaught SyntaxError: Cannot use import statement outside a module 였고,

두 번째 에러는 GET http://localhost:3000/js/TEMP_movePage net::ERR_ABORTED 404 (Not Found) 였다.

 

각각의 에러를 해결한 코드는 다음과 같다.

 

첫 번째 에러 해결

<script type="module" src="../../js/TEMP_intro.js"></script>

HTML 문서 내에서 불러오고자 하는 스크립트 태그에 type = "module" 을 적었더니 해결됐다.

 

 

두 번째 에러 해결

import { MovePage } from "./TEMP_movePage.js";

import하는 자바스크립트 문서 내에서 export 문서의 경로를 확장자 단위까지 적으니 해결이 되었다. (원래는 "./TEMP_movePage"로 적었던 것을 "./TEMP_movePage.js"로 적으니 해결됨. 확장자를 적지 않는 코드는 비주얼스튜디오코드가 추천해줬던 코드인데(자동완성 됨) 에디터도 오류가 있는건가..? 아니면 내가 모르는 뭐가 더 있나..? 그건 잘 모르겠다. 암튼 해결!)

 

 

결론

아무튼 내일부터 기능테스트를 포함해서 완벽하게 정상적인 개발이 가능할 것 같다! 이제 모듈도 사용이 가능하니 따로따로 존재하는 html 문서들을 하나로 엮을 수 있게 될 것 같다!

 

끝 자러가자!

 

마지막으로 에러 메세지 없이 이쁘게 불러와진 모든 문서들. 이 화면을 보는 게 왜이리 행복하냐....