gnui

개발환경 설정

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

테마 추가방법

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

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

Coding Conventions

CSS

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

Sass

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

ts

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