[HTML] 여러 html로 페이지가 구성된 홈페이지에서의 라우팅 문제

1. 모든 html 파일에서 메뉴명을 수정해야 하다니...

회사 홈페이지의 서브 메뉴를 수정할 일이 있었다. 해당 html 파일을 열어 수정했고 다 끝났다고 생각했고 행복했다. 만약 이야기의 결말이 이랬다면 이 글은 쓰지 않았을 것이다.

회사 홈페이지는 각 메뉴별로 각각 메뉴를 가지고 있는 방식이다. 다시 말해 메뉴별로 html 파일이 존재하고 각 페이지는 동일한 네브바 코드가 작성되어 있다. 심지어 어떤 메뉴는 서브메뉴도 이와 같은 구조로 되어 있다. 결국 소메뉴의 명을 하나만 수정할 것이 아니라 모든 html 파일에서 수정해야 한다는 것이며-어쩌면 처음으로-SPA가 무척 고맙게 느껴졌다.

모든 html 파일에서 소메뉴의 명을 수정한다는 것은 이번 한번만이라면 해줄 만하다. 그래, 충분히 그럴 수 있다. 하지만-변덕쟁이 고객님 성향상-그런 노가다를 매번 할 수는 없는 일이다. 그래서 네브바를 공통으로 분리하는 작업을 진행하였다.

 

2. 결론은...

common이라는 폴더를 생성하고 새로운 네브바 html 파일을 만들었다. 모바일용 메뉴도 있어서 네브바 모바일 html 파일도 만들었다. 기존 html 파일에서는 해당 코드를 모두 제거하였다. 그리고 자바스크립트로 common 폴더의 네브바 html을 동적으로 생성하도록 하였다. 생각했던 것처럼 간단한 일이었다. 모든 작업을 마치고 서버에 배포하였고 각 메뉴들을 클릭해 보았다.

헉! 로컬에서 라이브 서버(Live Server)로 돌릴때는 잘 작동하던 메뉴들이 404 에러를 뱉어내고 있었다. 라이브 서버에서는 index.html을 이용해 구동했었는데 해당 파일이 위치한 폴더가 www이다. 따라서 /www/와 같이 경로를 지정하면 절대경로로 인식했기에 메뉴의 경로를 여기에서부터 시작했었다. 하지만 nginx로 도메인이 붙은 경우에는 이 경로를 제대로 인식하지 못했다.

결론은-무식한 방법 같았지만-모든 경로를 도메인을 포함한 절대 경로로 변경해주었다. 이렇게 바뀐 경로의 경우 로컬에서 작업할 때는 또다시 변경해줘야 하는 문제가 있겠지만 어쩔 수 없지 않은가? 리액트에서 사용하던 라우터가 그립고 그리웠다!