이 튜토리얼에서는 크롬 개발자 도구의 애플리케이션 탭을 사용하여 웹앱의 리소스를 분석하는 방법을 설명합니다. 여기서는 로컬 저장소 , 세션 저장소 및 인덱싱된DB와 같은 다양한 저장소 옵션에 중점을 둡니다. 데이터 관리, 서비스 작업자에 의한 저장 및 쿠키 처리도 다룹니다. 스토리지 관리를 최적화하면 웹 앱이 보다 효율적으로 작동하도록 할 수 있습니다.
주요 결과
- 애플리케이션 탭은 웹 앱을 분석하고 최적화하기 위한 중심 도구입니다.
- 브라우저에서 직접 매니페스트 파일, 서비스 워커, 스토리지 옵션 및 쿠키를 분석할 수 있습니다.
- 이러한 저장소 옵션을 삭제하고 재설정하면 문제 해결 및 성능 최적화에 도움이 될 수 있습니다.
단계별 지침
애플리케이션 탭에 액세스하기
애플리케이션 탭을 열려면 페이지로 이동하여 F12 키를 누르거나 마우스 오른쪽 버튼을 클릭하고 '탐색'을 선택합니다. 개발자 도구에서 웹 앱이 사용하는 다양한 리소스에 대한 개요를 제공하는 "애플리케이션" 탭을 찾을 수 있습니다.
매니페스트 살펴보기
애플리케이션 탭에서 "매니페스트" 섹션을 열어야 합니다. 여기에서 웹 앱의 매니페스트 파일을 확인하고 아이콘, 이름 및 설명과 같은 지정된 오류 없는 정보를 확인할 수 있습니다. 이는 프로그레시브 웹 앱(PWA)을 개발하는 경우 특히 중요합니다.
서비스 워커 사용
다음 단계는 서비스 워커를 검사하는 것입니다. 이는 웹 앱의 오프라인 작동에 매우 중요합니다. "서비스 워커" 섹션을 클릭하여 등록된 서비스 워커를 확인하고 푸시 알림 또는 동기화와 같은 기능을 테스트하세요.
오프라인 기능 테스트
중요한 점은 오프라인 기능을 테스트하는 것입니다. 오프라인 모드를 활성화하고 페이지를 새로고침하여 어떻게 작동하는지 확인할 수 있습니다. 잘 설계된 웹 앱은 이 상태에서도 작동하고 오프라인 상태일 때 적절한 표시를 제공해야 합니다.
스토리지 분석
이제 "스토리지" 영역으로 전환합니다. 여기에서는 캐시 스토리지, 로컬 스토리지, 세션 스토리지 및 인덱싱된 DB에 대한 개요를 볼 수 있습니다. 이러한 저장소 옵션은 서로 다른 방문 또는 세션 간에 데이터를 저장할 때 중요한 역할을 합니다.
저장된 데이터 삭제하기
관련 확인란을 선택한 다음 '사이트 데이터 지우기'를 선택하면 저장된 모든 데이터를 삭제할 수 있습니다. 이 기능은 오래되거나 잘못된 데이터로 인한 문제를 해결하는 데 유용할 수 있습니다.
로컬 저장소로 작업하기
이제 로컬 저장소로 이동하여 몇 가지 값을 설정합니다. 콘솔에서 localStorage.setItem('key', 'value'); 를 사용하여 새 항목을 만든 다음 로컬 저장소 섹션을 새로 고침하여 변경 사항을 확인할 수 있습니다.
로컬 저장소에서 값 변경하기
이 영역에서 직접 값을 변경할 수도 있습니다. 값을 두 번 클릭하여 편집합니다. 텍스트를 JSON 형식으로 입력할 수 있으므로 더 복잡한 데이터를 저장할 수 있습니다.
세션 저장소 사용
세션 저장소는 로컬 저장소와 비슷하지만 개인 저장소이며 탭이나 브라우저를 닫는 즉시 삭제됩니다. 몇 가지 값을 추가하고 세션 중에 확인하여 이를 테스트할 수 있습니다.
쿠키 조사
'쿠키' 섹션에서 웹 앱의 도메인을 클릭하면 설정된 쿠키를 확인할 수 있습니다. 이러한 쿠키의 값을 확인하고 변경하거나 삭제할 수도 있습니다. 이는 사용자 세션이나 인증에 문제가 있는 경우 특히 중요합니다.
캐시 저장소 개요
캐시 저장소는 애플리케이션에서 사용하는 모든 캐시된 파일에 대한 인사이트를 제공합니다. 이를 통해 오프라인에서 사용할 수 있는 파일이나 업데이트해야 할 파일을 파악할 수 있습니다.
백그라운드 서비스 사용
웹 앱에서 알림이나 백그라운드 동기화와 같은 기능을 사용하는 경우 '백그라운드 서비스' 아래에서 해당 기능을 찾을 수 있습니다. 이러한 기능은 사용자 경험을 개선하기 위해 사용하기 때문에 PWA 개발에 특히 중요합니다.
프레임 및 아이프레임 분석하기
웹 앱에서 프레임 또는 프레임셋을 사용하는 경우 '프레임' 섹션에서 로드된 리소스를 확인할 수 있습니다. 여기에서 iFrame에 의해 로드된 파일과 문제가 있는지 여부를 확인할 수 있습니다.
요약
이 가이드에서는 크롬 개발자 도구의 애플리케이션 탭의 다양한 기능을 사용하는 방법을 배웠습니다. 매니페스트, 서비스 워커 사용, 다양한 저장 옵션 및 쿠키 관리에 대한 개요를 얻었습니다. 이러한 리소스를 정기적으로 분석하고 최적화하면 웹앱의 성능을 크게 향상시킬 수 있습니다.
자주 묻는 질문
애플리케이션 탭에 액세스하려면 어떻게 해야 하나요?F12를 누르거나 페이지를 마우스 오른쪽 버튼으로 클릭하고 '탐색'을 선택합니다.
로컬 저장소와 세션 저장소의 차이점은 무엇인가요? 로컬 저장소는 데이터를 영구적으로 저장하는 반면 세션 저장소는 브라우저 세션 기간 동안만 유효합니다.
애플리케이션 탭에서 쿠키를 삭제하려면 어떻게 하나요?"쿠키" 섹션으로 이동하여 도메인을 선택하면 쿠키를 표시하고 삭제할 수 있습니다.
웹 앱의 오프라인 기능을 테스트하려면 어떻게 해야 하나요?네트워크 섹션에서 오프라인 모드를 활성화하고 페이지를 새로고침하여 오프라인 기능을 확인하세요.
서비스 워커란 무엇인가요? 서비스 워커는 브라우저가 백그라운드에서 설치하는 스크립트로, 오프라인 기능 및 캐싱을 활성화하기 위해 네트워크 요청을 제어합니다.
