이번에는 지난번 만들었던 반응형 헤더에 이어서 네비게이션 바에서 각각의 항목들을 클릭하였을 때, 페이지의 리로딩 없이(깜빡거림 없이) 화면을 바꿔주는 SPA를 구현해보려고 한다.
[미리보기]
아래는 구현하는데 참고한 링크들이다.
위의 링크 중 express 서버와 history api를 이용하여 개발을 진행하다. SPA 와 라우팅 방식에 대해 잘 설명해둔 글을 하나 링크로 남겨 놓겠다. 해당 글에서는 전형적인 라우팅 방식과 SPA를 구현하기 위한 방식의 장단점과 필요한 것들이 잘 정리되어 있다.
https://poiemaweb.com/js-spa
코드의 설명을 따로 할까도 했지만 위의 2개의 링크와 코드가 거의 유사하기 때문에 따로 설명은 안하고 방식에 대해 내가 이해한대로 적어두려고 한다.
우선 내 디렉토리 대략적인 구조는 아래와 같다.
📂portfolio(프로젝트 폴더)
|
|---- 📂static
| |---- 📂 css
| |---- 📂 js
| | ---- 📂 components
| | ---- index.js
|---- index.html
|---- server.js
🎈 server.js
이 파일에선 express를 이용하여 인자로 받은 값을 하나의 스트링으로 만들어서, 즉 <a> href의 속성값을 이용하여 url을 구성하고 이를 기본으로 제공해둔 정적 파일 css, js 등을 이용하여 마운트된 디렉토리에서 필요한 파일을 클라이언트에 보내게 된다.
🧵 index.js
이 파일에선 라우터를 정의하고, 이벤트를 구현한다.
👑 components
내비게이션 바에서 클릭 할 컨텐츠에 따라 변경될 view들을 모아둔 디렉토리이다.
여기서 완전 바보같은 생각으로 한참을 시간을 보내게 되었는데, SPA는 하나의 html파일에서 사용자의 동작에 따라 화면 구성을 바꿔주는 방식이다. 그런데 너무나 바보 같게 각각의 view,
그러니까 위의 사진에서 about me, skills, projects 등을 눌렀을 때 보여져야 하는 화면을 각각 html 파일 형식으로 보여주고 싶다는 생각을 했다. SPA를 구현하자면서 html을 늘리고 싶다는 생각을 한참이나 했다....
참 바보같았다.
