React작업을 하면서 처음 create하고 생긴 파일 중 필요없는 파일을 지우며 정리하다가 manifest.json이라는 파일을 보았다.
사실 이전에는 당연히 지우면 안될 것 같아서 그냥 넘어갔었는데 이번에는 왠지 " 근데 이거는 뭐에 쓰이는 파일이지? " 하는 생각이 들었다.
궁금하다? 그럼 알아봐야지
📌 manifest.json은 무엇일까?
manifest.json은 PWA, 즉 웹 애플리케이션에 대한 정보를 담고 있는 파일로써, 웹 앱 다운로드시 네이티브 앱과 유사한 형태의 정보를 제공할 수 있게 도와주는 파일이라고 한다.
MDN 曰 : manifest.json 파일은 json 포맷 파일로서, 모든 웹 익스텐션이 포함하고 있어야 하는 파일입니다.
그렇기 때문에 파일 안에는 웹 앱의 이름, 저작자, 아이콘 등의 정보가 들어가 있게 된다.
갑자기 PWA는 뭔데?
그럼 PWA는 무엇이냐? Progressive Web App 의 줄임말로써, 음.. 내가 아는 정보로 간단한 설명을 하자면 우리가 사용하는 웹을 마치 앱처럼 설치해서 사용할 수 있게 하는 것이다.
이에 대한 예시는 구글 드라이브, 유튜브, 유튜브 뮤직 등과 같이 구글 앱 사이트에 들어가보면 쉽게 볼 수 있다.
PWA를 제공하는 사이트에 들어가게 되면 위 사진에 보이는 것처럼 설치 아이콘이 뜨게 된다.
그리고 이를 설치하게 되면,
이처럼 바탕화면에 마치 프로그램과 같은 아이콘이 설치되고, 이는 그냥 웹 환경의 사이트로 연결하는 것이 아니라 별도의 APP프로그램과 같은 UI와 기능들을 제공한다.
그리고 이러한 PWA는 번거로운 설치과정을 요하지 않는다는 것과 큰 용량을 차지하지 않는 다는 것, 그리고 여러가지 운용에 장점을 갖는다고 알고 있다.
그래서 구글에서 밀고 있다고 들었었다.
나도 아직 PWA를 깊게 판게 아니다보니 PWA에 대한 설명은 여기까지 간단히 하고 넘어가고, 다시 manifest.json파일을 보자.
🔧 내용의 의미를 알아보자
위치 : 📁 public
일단 manifest.json파일은 어디에 있을까?
이 파일은 create-react-app 실행시 자동적으로 생기는 폴더 중 public폴더 안에 생성된다.
그렇담 이렇게 생성된 manifest.json안에 작성된 내용들의 의미는 무엇일까?
파일을 열어보면 이런 내용이 작성되어 있다, 하나씩 뜯어보자.
"name"
PWA의 풀네임이며 icon에 표시될 이름으로 사용된다.
"short_name"
브라우저가 앱의 이름을 표시할 때 공간이 모자라게 되면 사용할 이름이다.
"icons"
favicon과, 웹 앱의 설치 후 사용될 icon의 이미지를 설정하는 key입니다.
경로와 타입, 사이즈 등의 설정이 가능합니다.
"start_url"
웹 앱이 실행된 후 시작 로드할 파일의 경로이다.
"display"
이름 그대로 디스플레이의 유형에 대한 설정으로 fullscreen, standalone, brower 중 하나가 들어간다.
"theme_color"
상단 툴바와 같은 전체적인 테마 색상을 설정한다.
"background_color"
이름 그대로 배경이 될 색을 지정한다.
🔗 연결된 파일
그리고 manifest.json파일은 같은 public폴더 위치에 있는 index.html에 연결되어 있는 것을 볼 수 있다.
본인 같은 경우엔 이 manifest.json의 내용을 수정해 프로젝트의 이름과 favicon을 변경했다.
이 밖에도 수많은 옵션 키들이 있지만 아직 내가 제대로 사용해본 적이 없기 때문에 기본적으로 작성되어 있던 내용에 대해서만 간단히 짚고 넘어가겠다.
➕ index.html은 삭제해도 되나?
번외로 public폴더 안에 존재하는 index.html파일, 이건 무엇이며 지워도 될까?
당연히 index.html은 지우면 안되는 파일이다. 이 파일은 React App의 템플릿 파일이다.
우리가 만든 app의 구조를 렌더링하면 그 결과가 저 index.html파일 안에서 보여지는 것이다.
그래서 위처럼 index.html에는 root라는 id를 가진 div가 생성되어져 있고,
index.js를 확인하면 root라는 id를 가진 element를 찾아 그곳에 렌더링 하도록 설정되어 있는 것을 볼 수 있다.
그래서 결론은? 지우지 마시라~~
- 참고: MDN, manifest키
잘못된 부분에 대한 지적은 얼마든지 환영입니다.
감사합니다.
