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