[미리보기]
참고자료 : SPA without server(깃헙 페이지 동작 가능) 하게 해준 github repo
문제점
지난번 [무작정 포트폴리오] 3. SPA 구현(Vanilla JS)에서 SPA 구현에 성공한 듯 보였다.
하지만 이를 위해서 예제로 express라는 서버를 사용하였고, 서버의 역할은 새로운 url의 요청이 들어올 때, 사용자가 지정한 형식으로 url을 변경하여 <a>의 href 속성값을 맞춰주며 SPA를 구현했기에 깃헙 페이지나 평소에 사용하던 vscode의 extension인 'live server'를 이용하게 되면 원하는 동작이 실행되지 않았다.
해결법
해결법은 지난 포스트의 server.js(express)가 해주었던 url 변경(라우팅 조작)을 Github Pages의 동작에 맞춰주면 된다.
(ex.~/post -> ~/<repo 이름>/post 와 같은 형식으로 변경해야한다.)
📂portfolio(프로젝트 폴더)
|
|---- 📂static
| |---- 📂 css
| |---- 📂 js
| | ---- 📂 components
| | ---- index.js(수정)
| | ---- lib.js(생성)
|---- index.html
|---- server.js(삭제)
🎈 lib.js
const PROJECT_TITLE = '<repo 이름>';
export function u(url) {
return `/${PROJECT_TITLE}${url}`;
}lib.js는 간단하다. Github Pages의 기본 설정을 보면 레포지토리 이름이 마지막에 위치하게 된다. ~/<repo 이름>의 형식으로 말이다. 그래서 레포 이름을 상수값으로 설정해두고, 인자를 그 뒤에 붙인 문자열을 반환하는 함수를 작성한다.
👑 index.js
이는 정규 표현식(Regrex)에 대한 이해가 필요한 부분이긴 하나 목적은 확실하다. 내가 버튼에 연결해둔 링크 뒤의(href="<이름>") <이름> 부분을 주소(url) 끝부분에 ~/<이름> 으로 만드는 것이 목적이다. 그리고 문자열 매치 함수 역시 커스텀으로 손봐 이용 할 수 있게 되었다.
한계
당연히 수동으로 url의 결과값을 예상하여 수정하는 방식이었기에, 한계가 존재한다.
1. 페이지 새로고침
2. 유효한 경로값 입력
이를 해결하기 위해서는 매번 첫 페이지로 돌아가야 한다. 이에 대한 해결은 local static server(in SPA mode)나 Netlify config로 할 수 있다곤 하는데 당장은 고려하지 않을 예정이다.
이유는 내가 만들 포트폴리오 사이트는 정적 사이트이며 사용자와 인터랙션 하는 일이 거의 예상 가능한 범위 내이기 때문에 당장은 신경 쓰지 않으려고 한다.
잠정 중단
3월부터 ICT인턴십을 하게 되면서 회사에서는 바닐라 타입스크립트와 리액트를 사용하게 되었다. 물론 그것이 내가 자바스크립트를 이용한 포트폴리오 제작에 추가적인 공부를 할 시간이 없다는 이유는 아니다. 단지 현재 회사에서 더 많은 것을 얻고 싶다. 프론트 개발자로서는 정말 많은 일과 기능을 구현해 볼 수 있는 회사에 인턴을 4달동안 할 수 있기에 더욱 집중해보려고 한다. 그래서 잠시 포트폴리오 사이트 제작은 멈추고(대신 포트폴리오 정리는 노션을 이용해서 내용을 미리 채워 두겠다), 리액트를 이용한 개인 프로젝트를 진행 해보려 한다.
