@eipgrid/bje v0.0.9

FrontEnd 개발 가이드

vpp처럼 동적 구성이 가능한 위젯형태의 개발은 진행하지 않음

Directory 구조

api/

• Backend 통신 모듈

config/

• 설정파일 ex) Backend URL, ...

css/

• CSS 파일

test-data/

• front 개발시 backend 연동없이 테스트데이터가 필요할 경우
• 가능한 파일명을 명확히 하거나 디렉토리로 구분

router/

• router 관련 파일

store/

• store 관련 파일

page/

• 전체 페이지 vue (통합모니터링, 개별모니터링, 고장처리, ...)

widgets/

• page 포함되는 상위 components

components/

• vue components
• component의 단위가 클 경우 별도의 디렉토리로 분리. ex) components/diagram

common/

• util 성 함수들.

코딩규칙

Reference

Must

• 파일명규칙
  • PascalCase 적용. Why?
  • 가능한 약어보단 완전한 단어를 사용하며 약어 필요시는 최대한 명확하게!
• 템플릿 내의 컴포넌트명 규칙
  • Single-File component: PascalCase ex) <TodoList />
  • Dom template: kebab-case ex) <todo-list-item></<todo-list-item>
• 기본 컴포넌트(버튼, 테이블 등)명은 App접두사 사용. Why?
• 결합된(컴포넌트에서 파생되는) 컴토넌트는 부모컴포넌트의 이름을 접두사로 사용.

  ex) TodoList.vue, TodoListItem.vue, TodoListItemButton.vue

• Naming Rule: 일반단어+설명

  ex) ClearSearchButton.vue (X), SearchButtonClear.vue (O)

• html tag의 self closing 주의! Why? 어떤일이 발생하나?

As Possible

• Prop명 - CamelCase 사용
• 템플릿내 표현식