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