싱글 페이지 앱은 새 페이지를 로드하지 않고도 다른 콘텐츠를 표시할 수 있습니다. 이를 위해 링크 및 History API에서 클릭 핸들러를 사용합니다. History API를 사용하면 브라우저 세션 기록을 조작할 수 있습니다. 이렇게 하면 다른 페이지(일반적으로 단일 페이지 앱에서 '뷰'라고 함)를 표시할 때 URL을 업데이트할 수 있습니다. 또한 브라우저의 뒤로 버튼이 예상대로 작동하는지 확인합니다.
이 Codelab에서 단일 페이지 앱을 살펴보세요. 고양이 또는 강아지 이미지를 표시하고 두 동물 간에 전환할 수 있는 링크를 제공합니다. 잘 작동하는 것 같습니다.
숨겨진 404 오류 발견하기
안타깝게도 앱에 미묘한 버그가 있습니다. 살펴보겠습니다.
- 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면
을 누릅니다. - Doggos 링크를 클릭합니다. URL이 어떻게 변경되었는지 확인합니다.
- 앱을 새로고침합니다.
'Cannot GET /doggos'이 표시된 페이지가 표시됩니다. 이는 교묘한 404입니다. 웹 앱 내의 링크만 클릭하는 한 웹 앱이 정상적으로 작동하는 것처럼 보이기 때문에 '교묘'합니다. 새 브라우저 창에서 URL을 사용하거나 페이지를 새로고침하면 중단됩니다. 문제는 서버가 이러한 URL에 대한 요청에 응답하는 방법을 모른다는 것입니다. 웹 앱의 JavaScript 코드는 History API를 사용하여 URL 간에 이동하지만 서버는 URL로 무엇을 해야 할지 모릅니다.
서버가 요청된 URL에 대해 수행할 작업을 알지 못할 때마다 HTTP 상태 코드 404로 응답합니다. 이 코드는 서버가 요청된 URL에 대해
아무것도 찾지 못했음을 의미합니다
이 경우 검색엔진은 URL의 색인을 생성하지 않습니다. 사용자가 검색결과를 클릭하면 강아지 사진과 같이 찾고 있던 콘텐츠가 아닌 오류 메시지가 표시되기 때문입니다.
서버 수정
이 프로젝트는 JavaScript로 작성된 express.js 서버를 사용합니다. 서버를 수정하여 index.html로 응답하고 단일 페이지 앱이 나머지를 처리하도록 하겠습니다.
- Remix to Edit를 클릭하여 프로젝트를 수정할 수 있도록 합니다.
server.js파일을 선택합니다.
이 파일에는 서버 코드가 포함되어 있습니다. express.js 서버를 설정하고 index.html의 콘텐츠를 전송합니다. 15행의 경로 설정은 요청이 URL /로 이동할 때만 웹 앱을 제공합니다. 서버는 우리가 만든 다른 URL도 제공해야 합니다. 향후 추가 URL에서도 작동하도록 모든 URL을 제공하도록 변경해 보겠습니다.
이렇게 하려면 15번째 줄부터 시작하는 코드를 다음과 같이 변경하면 됩니다.
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/*은 모든 URL과 일치하며 서버는 이제 지정된 URL의 index.html에 있는 웹 앱으로 응답합니다.
- 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면 을 누릅니다.
이제 새 시크릿 창에서 링크를 새로고침하고 열면 예상대로 작동합니다.