리액트 프로젝트를 하는데 콘솔창에 자꾸 저런 에러가 발생했다.
콘솔창에만 뜨는 에러로 아예 실행이 안되거나 하지는 않아서 진행하는데는 문제가 없었지만 계속 이유가 뭔지 궁금했던 에러!
🔍 원인
manifest.json 파일을 지워서.
원인을 한마디로 말하면 manifest 파일을 지워서이다.
manifest에 대한 태그는 index.html에 남겨져있는데 json파일만 삭제했기때문에 위와 같은 에러가 발생한다.
index.html 파일에 들어가서 보면
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />이런 코드가 있는것을 발견할 수 있다.
만약 manifest.json을 지우려면 index.html안에 있는 저 태그도 지워야한다.
manifest를 쓸거면 둘다 지우지 않으면 된다.
✅ 해결
➡️ index.html안에 있는 manifest태그를 지운다
다시 콘솔창을 확인해보면 에러가 더이상 발생하지 않는다..!!
➡️ or 다시 manifest.json 파일을 다시 만든다.
🔫 manifest.json이란?
json 포맷 파일로서, 모든 웹 익스텐션이 포함하고 있어야 하는 파일
Progressive Web App (PWA)에서 사용되는 파일로, 웹 앱의 메타데이터와 구성 설정을 담고 있는 JSON 형식의 파일이다.
PWA는 일반적인 웹 앱보다 더 나은 사용자 경험을 제공하기 위해 웹 기술을 사용하여 앱과 유사한 기능과 동작을 구현하는 것을 목표로 한다.
manifest.json 파일은 브라우저에게 웹 앱을 설명하고, 홈 화면에 아이콘을 추가하고, 전체 화면 모드를 활성화하고, 오프라인 사용을 지원하는 등의 기능을 제공한다. 주로 PWA를 개발할 때 웹 앱에 대한 정보와 설정을 기술하며, 이를 통해 사용자가 웹 앱을 설치하고 사용할 때 일관된 경험을 제공할 수 있다.
manifest.json 파일은 일반적으로 public 폴더 내에 위치하며, HTML 파일에서 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />과 같은 형식으로 참조된다. 이를 통해 브라우저는 해당 파일을 가져와 웹 앱의 설정을 이해하고 적용할 수 있다.
manifest.json 파일은 다양한 속성을 포함할 수 있으며, 예를 들어 앱의 이름, 아이콘, 시작 URL, 테마 색상 등을 정의할 수 있다. 이러한 속성을 통해 웹 앱의 외관과 동작을 사용자 정의할 수 있다.
🕵️♀️ 느낀점
아직 PWA를 사용한 프로젝트를 해보지 않아서 이런 에러가 왜 발생했는지 이해하지 못했고 항상 궁금했었는데
해결이 된거같아서 속이 시원하다 ㅋㅋ
일단은 에러를 해결하기 위해서 manifest를 index.html에서 주석처리를 해주었는데
기회가 된다면 PWA를 이용해보는 쪽으로 프로젝트를 만들어보고 싶다.
일단 기본적인 토대를 다 만들고나서 PWA도 적용해봐야지!!
웹앱을 만들고 싶다는 생각을 항상하고 있었어서 이런 에러가 왜 발생했는지 그리고 어떻게 해결하는지
앞으로 이걸 어떻게 이용할수있는지 알게 되어서 너무 좋다 🥰
PWA를 이용한 프로젝트도 만들고 블로그에 후기도 적어야겠다.