이번에 새로운 팀플을 위해 CRA로 새로운 리액트 프로젝트를 생성했는데, 맨 처음 프로젝트 셋팅 시 필요 없는 파일을 모두 지워주는 과정에서 public 폴더 안에 들어있는 manifest 파일도 함께 지웠다. 그랬더니 처음 보는 에러가 콘솔창에 보이기 시작했다.
바로 요 메시지! Manifest 딱 쓰여있는거 보자마자 '아, 내가 그 파일을 삭제해서 그런거구나' 하고 느낌이 왔다.
Manifest.json은 뭘 하는 녀석일까
CRA로 리액트 프로젝트를 만들면 자동으로 public 폴더 안에 생성되는 json 파일이다.
기본으로는 요런 내용들이 들어가 있는데, 슬쩍 살펴보니 아이콘, 아이콘의 크기, 배경색 같은 것들이 객체 형태로 작성되어 있다.
Manifest에서는 웹 애플리케이션의 설명, 아이콘, 시작 URL 등의 메타데이터를 제공한다. 이 메타데이터를 기반으로 예를 들어 모바일 사용자는 앱 아이콘을 홈 화면에 추가할 수 있는 것이다.
이 파일은 JSON 형식으로 작성되어야 하며, 내가 프로젝트 초기 설정을 하면서 파일을 삭제했는데 여전히 프로젝트의 어딘가에서 연결이 되어 있기 때문에 오류가 뜨는 것이다.
이 Manifest 파일은 리액트 프로젝트를 프로그레시브 웹 앱(PWA)로 변환할 때 사용된다고 한다. 그럼 또 PWA란 무엇일까?
프로그레시브 웹 앱(PWA)이란?
Progressive Web App(PWA)는 웹 기술을 사용하여 사용자에게 앱과 유사한 경험을 제공하는 웹 애플리케이션이다. 일반적인 웹 앱과 앱의 장점을 결합하여 사용자에게 여러 가지 편의성을 제공한다.
웹 앱 웹 앱 웹 앱 웹 앱 웹 앱 탈트 온다
쉽게 말해 내가 만든 리액트 프로젝트가 모바일 환경을 염두에 두고 만든 애플리케이션(앱) 프로젝트가 아니라 할지라도, PWA를 통해 나의 사이트를 모바일 앱처럼 사용할 수 있게 해주는 기능이다.
웹으로 봐도 하나도 안불편한데요
예를 들어 이런 것이라고 이해했다. 사용자가 모바일 기기로 페이지에 방문하면, 브라우저는 사용자에게 PWA를 설치하도록 제안할 수 있다. 사용자가 이를 수락하면 모바일 기기의 홈 화면에 아이콘이나 바로 가기가 추가되고 마치 네이티브 모바일 앱처럼 내 사이트를 이용할 수 있는 것이다.
PWA는 모바일 기기에서 오프라인에서도 작동하고, 푸시 알림 같은 기능을 제공하기 때문에 관리자 입장에서 비활성 사용자를 refresh하기에 좋을 것이다.
그래서 사용자를 지속적으로 touch해줘야 하는 쇼핑몰 사이트에서 주로 사용하는 기능인 듯하다. 사용자 입장에서 나는 이거 별로 안 좋아한다... 모바일 기기에 이것저것 앱 너무 많이 깔리는 거 싫고 깐다고 해도 별로 이용하지도 않는다
Manifest 파일의 고찰에 대한 결론
앞서 살펴본 것처럼 웹 앱 매니페스트는 리액트 프로젝트를 PWA로 변환하고자 할 때 사용된다. 결론적으로, 프로젝트를 PWA로 변환하지 않는 경우에는 없어도 된다.
그래서 public 폴더 안에 있는 index.html에서 해당 부분을 삭제해 주는 것으로 이번 오류는 해결할 수 있었다.
해결!
