[개발 공부] Twitter 따라 만들기 #2 - 프로젝트 구조 파헤치기

파일 구조 알아보기

이전 포스팅에서 Quasar Framework로 twitter 앱 프로젝트를 생성했습니다.

이번 포스팅에서는 생성한 프로젝트의 파일 구조 및 폴더들을 살펴보겠습니다.

Quasar Framework으로 프로젝트를 자동으로 생성하니 다음과 같은 파일 구조가 생성됐습니다.

만들 Twitter 앱 구조

quasar.conf.js : Quasar 프로젝트의 환경 설정 파일입니다. 라이브러리, vue router history mode, 플러그인들, ssr, pwa, electron 등등 설정을 하는 파일입니다.

 

다음은 src 폴더 안에 있는 index.template.html 파일입니다.

index.template.html 파일은 대부분 수정할 일이 없으며, q-app은 App.vue파일을 출력합니다.

index.template.html 파일

다음은 index.template.html파일이 실행하는 App.vue파일입니다.

App.vue 파일은 layouts폴더에 있는 MainLayout.vue파일을 실행시킵니다.

그리고 이 MainLayout.vue파일이 저희가 프로젝트를 실행했을 때 실제로 보는 화면을 구성합니다.

다음은 MainLayout.vue파일입니다.

MainLayout.vue파일을 내용을 보다 보면 사진과 같은 부분이 pages폴더의 index.vue파일을 출력해줍니다.

이렇게 화면 출력에 대한 전체적인 구조를 봤고, 이외에도 다음과 같은 폴더들이 있습니다.

public : 이미지, css 등을 포함한 폴더입니다. 이 폴더는 /favicon.ico처럼 루트로 접근이 가능합니다.

src폴더 안의

• assets : 이미지 등을 저장하는 폴더입니다. 이 폴더는 webpack이 실행할 때 처리합니다.
• boot : 부트 파일을 담는 폴더입니다. 애플리케이션이 실행되기 전에 패키지나 플러그인을 초기화합니다. 추후 Firebase를 연동할 때 사용할 폴더입니다.
• componenets : vue컴포넌트들을 담는 폴더입니다.
• css : 전역 CSS파일들을 담는 폴더입니다.
• route : 라우팅을 설정하는 폴더입니다.