스타일 가이드

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 내 모듈 중 하나로 관리하여 사용한다.