Vue.js로 웹페이지 리빌드하기 - (4) Quasar 프로젝트 디렉토리 구조 살펴보기

프로젝트를 만들었으니, 이제 만들어야하지만..

퀘이사를 처음 쓰기도 하고, 옵션 선택을 이것 저것 하는 바람에 공부 할 때와는

다르게 디렉토리가 많이 늘어난 상태가 되었습니다....

 

그래서, 우선 개발을 위해서도 어떤 폴더, 어떤 파일에 뭘 넣어야하는지 알아야 하는 법.. 

디렉토리 구조를 살펴보려고 합니다. 

 

어디에서도 언급안했지만 툴은 VsCode.

퀘이스 폴더와 vscode 폴더, npm 모듈들이 깔리는 폴더는 넘기고,

 

public 

favicon이 들어있습니다. 이는 조만간 적절한 것으로 교체하려고 합니다.

 

 

이하 src 폴더

assets

현재는 어디 쓸지 모르는 svg가 하나 있습니다.

 

boot

api 연결을 위한 axios와 국제화를 위한 i18n 설정파일

여기서 api 연결과 관련 처리를 하면 되겠죠.

 

components

화면의 컴포넌트 파일.

타입스크립트가 들어가서 그런지, 스크립트부가 꽤나 복잡하게 되어있네요.

models.ts 파일이 있는 이유도 타입스크립트 때문..

 

css

sass 옵션은 선택하지 않았기에 css가 있습니다.

글로벌 css 파일에 주석 한줄 달랑 있는데.. 아마 추가적인 css는 사용하지 않을 거 같아 이건 이대로 방치.

 

i18n

국제화 옵션에서, 자세한 설정을 넣는 부분

국제화를 어떻게 할지는 아직 정하지 않았지만, 한 일 영 3개 언어는 쓰지않을까 싶음. 

우선은 영어만 하고, 한국어와 일본어를 추후 추가하는 방향으로...

(병행해서 할 수 있다면 병행할 생각)

 

layouts

레이아웃용 뷰 파일.

여기에는 메인 레이아웃과 관리자페이지 레이아웃만 들어가지 않을까 싶음.

 

pages

메인 레이아웃의 메뉴, 상단바를 제외한 영역에 들어가는 메인페이지와 에러용 화면 파일이 있는 곳.

 

router

라우터 설정. 

어드민 페이지로 이동하는 라우터정도만 추가하지 않을까 싶은... 

 

store

vuex 설정용 스토어 폴더. example라고 되어있으나, 잘 만들어져있어서 이대로 쓸까 싶음.

 

other

중요한 설정들과 app.vue 파일이 있는 곳. 

기본적으로는 자동으로 해주던가 하기에.. eslint 설정을 바꾸지않는한 손 댈 일은 없을듯. 

 

 

간략하게 살펴보면서 파일 안을 보니, 미리 만들어진 부분이 이해 가긴하는데... 

간단하게 만드는 프로젝트에 비해 확장성 때문에 넓게 퍼져있어서, 

익숙해지는데 시간이 걸릴 거 같네요.

그래도, 해봐야죠 뭐