폴더와 파일에 대한 설명 : Vue.js 3 강좌 (with Bootstrap, script-setup)

전체목차 : https://gauryan.tistory.com/214

 

이제 생성한 프로젝트의 구조에 대해 간단하게 알아볼 시간입니다. 먼저, VSCode 의 왼쪽에서 프로젝트 폴더를 봅시다. 이렇게 생겼어요.

node_modules 폴더가 먼저 보이네요. 이 폴더에는 내가 설치한 node 모듈들이 있는 장소입니다. 처음 용량이 거의 160MB로 꽤 큽니다. package.json 에 필요한 패키지 목록을 가지고 있어서, node_modules 폴더가 없더라도, 다시 만들수가 있습니다. 그래서, git에는 저장하지 않도록 설정되어 있어요.

 

public 폴더의 index.html 도 봅시다. 여기에서 눈여겨 볼 곳은 app 으로 id를 설정한 부분입니다. 이 곳에 우리가 작성한 코드들이 자동으로 들어가게 되는데요. 자동으로 관리되는 부분이므로, index.html 파일을 직접 건드리지 않는 것이 좋습니다.

이제 가장 중요한 src 폴더를 보겠습니다. 이 밑에는 main.js, App.vue, assets 폴더, components 폴더가 있네요. main.js 는 프로그램의 진입점이 될 것입니다. App 컴포넌트를 호출해서, 위에서 보았던 app 에 마운트를 합니다. 이 파일도 거의 수정할 일이 없지만, 간혹 전역으로 적용되어야 할 js 파일이나 css 파일을 import하는 경우가 있습니다. 이미 지난 시간에 Bootstrap 을 위해서 추가했었지요.

그리고, App.vue 는 메인 컴포넌트입니다. Vue는 컴포넌트 기반의 프론트엔드 프레임워크 입니다. Vue 뿐만 아니라, React, Svelte 등도 컴포넌트 기반입니다. 하나의 페이지도 컴포넌트이고 페이지를 구성하는 다양한 영역도 컴포넌트로 구성할 수 있습니다. Vue에서 컴포넌트는 ~.vue 라는 확장명으로 만들어집니다. 파일 하나가 컴포넌트입니다. React의 경우는 클래스 기반, 함수 기반의 컴포넌트여서, 한 개의 파일에 여러개의 컴포넌트를 만들 수 있다는 점에서 차이가 있습니다. 컴포넌트를 만들어 놓으면 재사용하기에 좋습니다.

 

assets 폴더에는 이미지를 넣어서 사용하면 됩니다. 그리고, components 에는 폴더명처럼 재사용할 수 있는 컴포넌트를 작성해서 넣으시면 되겠습니다. 

 

여기에서는 기본으로 만들어주지 않았지만, 보통 views 또는 pages라는 폴더도 만들어 주게 됩니다. 말 그대로 페이지를 표현하는 컴포넌트를 작성하는 폴더입니다. 우리는 views 폴더를 만들어두겠습니다.