[Vue Cli] images 저장 경로 설정 | public과 assets 중 어디에?

학원에 다녔을때 강사님께서 NPM 개발환경에서 images 폴더를 public에 저장하는 것을 보고,

이때의 기억을 살려 나도 이미지를 public 폴더에 넣어 관리하곤 하는데

그럼 src에 폴더에 기본적으로 있는 assets라는 폴더는 왜 있는건지 궁금하기도 해서 알아보았다.🤔

기본적으로 Vue를 설치할때 원래 셋팅된 코드를 참고해봐도 assets에 logo.png가 들어가 있기도 하고!

 

결과적으로 Vue CLI 프로젝트를 진행하며 내 나름대로 내린 결론은 public 폴더에 이미지를 관리하는 것이 좋겠다는 생각이다. 

assets폴더에 저장하면 빌드나 파일 처리 과정에 따라 경로가 변해서 들어갈 수 있기 때문에

이로 인해 경로 설정 과정에 상당히 골치아파질 수 있다.

 

일단 public과 assets, 이 두 가지 옵션 간에는 빌드 과정상의 차이가 있다.

 

🔎assets 

assets 폴더는 Vue CLI 프로젝트 내에서 모든 정적 자원을 저장하는 일반적인 위치다.

일반적으로 이미지, 스타일시트, 폰트 파일 등이 여기에 포함된다.

• 이미지: 웹사이트에 사용되는 그림 파일들.
• 스타일시트: 웹사이트의 디자인을 담당하는 CSS 파일들.
• 폰트 파일: 웹사이트에서 사용되는 폰트들.

 

✅ 이 폴더에 파일을 저장했을 때 가지는 특징은 다음과 같다 :

1. 웹팩 빌드시 모듈로 취급

이 폴더에 있는 파일들은 웹팩(Webpack)이라는 도구를 사용하여 압축되거나 최적화되며, 빌드(Build) 과정에서 처리되게 되는데, 이는 곧 웹팩이 이 파일들을 모듈로 처리한다는 말이다.

참고로 모듈은 프로그램의 작은 부분을 나타내며, 여기서는 이미지나 스타일시트 파일을 부분적으로 처리한다는 것을 의미한다. 웹팩은 이러한 파일들을 압축하거나 변환하여 웹 페이지가 더 빠르게 로딩되도록 도와준다.

 

2. URL로 변환되어 빌드되는 앱의 리소스로 포함

이는 웹팩이 이 파일들을 웹 페이지의 리소스로 포함시킨다는 의미다. 웹팩은 이 파일들을 압축하고 효율적으로 관리하여 웹 페이지 로딩 속도를 향상시킨다. 이 파일들은 웹팩의 빌드 과정에서 URL로 변환되어 웹 앱의 일부가 되며, 웹 페이지가 로딩될 때 브라우저가 이 리소스를 가져와 화면에 표시하게 된다.

 

 

🔎public 

public 폴더는 정적 리소스를 저장하는 또 다른 옵션이다.

이 폴더에 있는 파일들은 웹팩 빌드 시에 특별한 처리를 받지 않고, 그대로 복사되어 최종적인 빌드 결과물에 포함된다.

이에 대한 장/단점은 다음과 같은 것들이 있겠다 : 

장점

폴더 내 파일들이 웹팩 빌드 시에 별도의 처리를 받지 않기 때문에, 빌드 프로세스가 빠르다.

단점

웹팩 번들링과 최적화 과정을 거치지 않기 때문에 파일이 압축되거나 최적화 과정을 거치지 않기 때문에,

파일이 압축되지 않고 용량이 커질 수 있다.