단일 페이지 앱은 새 페이지를 로드하지 않고도 다양한 콘텐츠를 표시할 수 있습니다. 이를 위해 링크의 클릭 핸들러와 History API를 사용합니다. History API를 사용하면 브라우저 세션 기록을 조작할 수 있습니다. 이렇게 하면 다른 페이지 (일반적으로 단일 페이지 앱에서는 '보기'라고 함)를 표시할 때 URL을 업데이트할 수 있습니다. 또한 브라우저의 뒤로 버튼이 계속 정상적으로 작동하는지 확인합니다.
이 Codelab에서 단일 페이지 앱을 살펴보세요. 고양이 또는 강아지 이미지를 표시하고 두 동물 간에 전환할 수 있는 링크를 제공합니다. 제대로 작동하는 것 같습니다.
은밀한 404 찾기
앱에 미묘한 버그가 있습니다. 한번 살펴보겠습니다.
- 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면
을 누릅니다. - Doggos 링크를 클릭합니다. URL이 어떻게 변경되었는지 확인합니다.
- 앱을 새로고침합니다.
'Cannot GET /doggos'가 포함된 페이지가 표시됩니다. 은밀한 404입니다. 웹 앱 내의 링크만 클릭하면 웹 앱이 제대로 작동하는 것처럼 보이므로 '교활'합니다. 새 브라우저 창에서 URL을 사용하거나 페이지를 새로고침하면 오류가 발생합니다. 문제는 서버가 이러한 URL 요청에 응답하는 방법을 알지 못한다는 것입니다. 웹 앱의 JavaScript 코드는 History API를 사용하여 URL 간에 이동하지만 서버는 이를 어떻게 처리해야 할지 모릅니다.
서버가 요청된 URL에 대해 무엇을 해야 할지 알지 못할 때마다 HTTP 상태 코드 404로 응답합니다. 이 코드를 사용하면 서버에서 요청된 URL에 대한 항목을 찾을 수 없다고 표시합니다.
이 경우 검색엔진은 URL의 색인을 생성하지 않습니다. 사용자가 검색 결과를 클릭했을 때 강아지 사진과 같은 찾고 있던 콘텐츠가 아닌 오류 메시지가 표시되기 때문입니다.
서버 수정
이 프로젝트는 JavaScript로 작성된 express.js 서버를 사용합니다. 서버가 index.html로 응답하고 단일 페이지 앱이 나머지를 처리하도록 서버를 수정하겠습니다.
- 수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 합니다.
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의 웹 앱으로 응답합니다.
- 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면
을 누릅니다.
이제 새 시크릿 창에서 링크를 새로고침하고 열면 예상대로 작동합니다.