정적 파일 연결

지난 스타벅스 예제에서 루트 폴더에 favicon.ico 라는 icon 파일이 존재하면 따로 link 태그를 통해 연결해주지 않아도

자동적으로 favicon으로 인식을 한다고 배웠다.

 

하지만 새로운 프로젝트를 만들어 npm run dev를 통해 개발 서버를 열어서 확인해본 결과 루트 폴더에 favicon.ico 파일이 존재함에도 favicon으로 인식되지가 않았다.

vs code에서 제공하는 기능인 open with live server를 통해 서버를 열어서 확인했을 때는 잘 인식이 됐었는데 num run dev를 통해 확인 한 결과는 왜 다를까??

 

parcel bundler를 통해 개발 서버를 열거나 제품화를 시키게 되면 우리가 작성한 html, css, sass, js 파일 등을 기본으로 dist라는 폴더에 새로 파일을 만들어서 dist 폴더 안에 있는 파일을 실행시켜서 서버를 열게 된다.

즉, npm run dev를 하게 되면 dist 폴더 안에 있는 index.html 파일을 실행시켜서 웹 페이지를 열게 된다. 그렇기 때문에 dist 폴더 내에 favicon.ico 가 없으면 favicon이 자동으로 인식되지 않는다는 뜻이다.

그렇다면 어떻게 해야할까??

단순하게 favicon.ico 파일을 dist 폴더안에 넣어주면 되지만
dist폴더는 parcel 번들러의 개발 서버 실행을 통해서 새롭게 생성하고 지울 수도 있어야 하기 때문에
우리가 사용하는 파일을 직접 폴더에 넣는 것은 좋은 행동은 아니다.

해당하는 파일을 개발 서버를 열거나 제품화를 시킬 때 dist 폴더로 자동으로 넣어줄 수 있는 패키지의 도움을 받을 수 있다.

parcel plugin static files copy 라고 검색해서 npmjs 사이트를 읽어보자.

 npm i -D parcel-plugin-static-files-copy 라고 터미널에 입력하여 플러그인을 설치한 후,

"staticFiles"라는 property 내에 object 형식으로 "staticPath" 속성에 값으로 이동시킬 파일이 들어있는 폴더 이름을 설정한다. 나는 static이라는 폴더를 지정했기 때문에, static 폴더 내에 favicon.ico 파일을 넣어두면

parcel bundler를 통해 개발 서버를 열거나 제품화를 시킬 때 파일이 자동적으로 dist 폴더 내에 복사된다.

이렇게 설정한 후, npm run dev를 통해 개발 서버를 열어본 결과 파비콘이 잘 인식되어 적용된 것을 확인할 수 있다.