gnui

개발환경 설정

• 터미널에서 npm install하여 필요한 패키지를 설치한다.
• npm run dev 스크립트를 수행한다.
• 브라우저에서 styleguide/index.html 파일을 확인한다.
• 수정 테스트

테마 추가방법

• theme 폴더에 scss 파일을 생성한 후, 템플릿에 맞게 테마에서 사용될 값을 재정의 한다. (default.scss 참조)

  aigis_config.yml 파일 내 color_theme 항목에 신규 추가한 테마명(파일명과 동일)을 추가하면 가이드화면에서 테마 전환 후 확인 가능하다.

Coding Conventions

CSS

• 들여쓰기는 공백 2문자를 사용한다.
• 클래스, 아이디명은 케밥 케이스(kebab-case)를 사용한다.
• 가독성을 위해 선언 블록을 여는 중괄호 앞에는 1문자를 공백으로 넣고, 닫는 중괄호는 새로운 행에 배치한다.
• 선언 시 콜론(:)이후 공백 1문자를 추가한다.
• 단일 스타일은 한 줄에 표시한다. 반대로 다중 스타일은 정확한 디버깅을 위해 한 줄에 속성을 하나씩 표시한다.
• 다중 선택 시 한 줄에 선택자를 하나씩 표시한다.
• 모든 스타일 선언 뒤에는 세미콜론을 붙인다.
• 스타일 지정 시 아이디, 태그 선택자 대신 클래스 선택자를 사용한다.
• type 선택자를 사용할 경우 큰따옴표를 사용한다.(e.g input[type="text"])
• 자바스크립트에서 DOM 이벤트 핸들러 등록을 위해 만들어진 클래스를 사용하지 않는다.
• 숫자 0 값 이후에는 불필요한 단위를 작성하지 않는다.(e.g padding: 0px; => padding: 0;)
• 16진법으로 색상을 표현할 경우 가능하다면 3글자로 표현한다.(e.g #ffffff => #fff, #eeffaa => #efa)
• padding, margin, font, background, border, border-radius 등 축약형 사용이 가능한 프로퍼티는 가능한 한 축약형을 사용한다.

Sass

• scss 문법을 사용한다.
• 속성, @include, 중첩 선택자 순으로 선언한다. @include 선언 이후에는 개행을 한다.
• 변수명은 케밥 케이스를 사용한다.
• private 변수인 경우 밑줄(_)을 접두사로 사용한다. (e.g $_sub-color)
• Extend 지시자는 사용하지 않는다.
• 선택자 중첩은 최대 3단계까지만 사용한다.
• 통일성이 있어야 하는 속성 (border-width, font-size, background-color, font-weight, color 등)은 init에 정의하고 variables에 참조하여 사용한다.

ts

• 들여쓰기는 공백 2문자를 사용한다.
• 함수명, 변수명은 알파벳으로 시작하며, 첫글자가 소문자인 카멜케이스(lowerCamelCase)를 사용한다.
• 가독성을 위해 선언 블록을 여는 중괄호 앞에는 1문자를 공백으로 넣고, 닫는 중괄호는 새로운 행에 배치한다.
• 연산자와 쉼표 뒤에는 공백을 둔다.
• 생성자는 대문자로 시작한다.
• 개발 참고 : https://github.com/basarat/typescript-book/blob/master/docs/styleguide/styleguide.md