=============
스타일 가이드
=============

.. note::

      아래 내용은 주관적이며, 참고용으로 제공됩니다.

      ESLint를 사용하시면 코드 스타일을 일관화할 수 있습니다.

**Component**


-  재사용되는 최소 단위

-  src/components 폴더 아래에 위치한다

-  전역적으로 사용하는 컴포넌트는 src/common/global.component.js에
   선언한다.

-  복잡한 Component 사용법은 readme.md 또는 주석으로 작성한다.

**View Component**

-  Component의 조합체

-  src/views 폴더 내에 위치한다.

-  라우팅 시 기준이 되는 화면 컴포넌트

-  | 파일 위치는 라우팅 path에 맞춰 depth별로 위치한다.
   |   예) path: /main/setting/list => views/main/setting/list.vue

**정적 파일**

-  src/assets 폴더 내에 위치한다.

-  js는 기능에 따라서 여러 파일로 작성한다.

-  | 전역 객체는 최소한으로 사용한다.
   |   예) Global 또는 NativeCallback.getExcuteResult

**중요!** **화면을 컴포넌트 단위로 분리 (중복 소스 최소화)**

-  | 전체 화면이 변경되는 경우
   |   예) views/intro.vue

-  | 일부 화면이 고정, 가운데 콘텐츠만 변경되는 경우
   |   1) 고정되는 화면: views/main/root.vue
   |   2) 가운데 콘텐츠: views/main/notice.vue, views/main/setting.vue

-  | 반복해서 재사용되는 컴포넌트
   |   예) components/paging.vue, components/content-box.vue

**서버로 전달받은 api를 store를 작성**

-  | 해당 api 1depth에 따라 파일명을 사용한다.
   |   예) api/user/info => src/store/module/user.js

-  API 하나씩 대응되는 action 메서드를 작성한다.

**변하지 않는 데이터는 캐시하여 사용**

-  M.info.app()은 반복적으로 호출하지 않는다.

-  Store 내 모듈 중 하나로 관리하여 사용한다.