Category: Uncategorized

  • class 이용

    class name 이 T-shirt size 로 구분이 되어 있는 경우

    base와 사이즈 모두 입력

    예: class name 이 display인 경우

    <div class="display display-md">디스플레이</div>

    class name 이 numbering으로(utility)로 구분이 되어 있는 경우

    해당 사이즈만 입력

    예: class name 이 heading-1인 경우

    <div class="heading-1">디스플레이</div>

    사이즈: numbering –> t-shirt-size

    color: numbering –> primary/secondary

  • 안녕

    <div>Hi</div>

    test

  • Dialog vs Drawer

    Dialog

    • Modal Dialog
    • Non-modal Dialog

    Update가 없는 경우에는 Dialog를 사용한다.

    상세를 보여줄 때는 Drawer를 이용하고, Static Table을 사용한다.

    기획과 디자인할 때는 popover를 사용하지만, 실제에서는

    Modal Dialog

    showModal():

    non-Modal Dialog

    show():

    를 활용한다.

    Drawer

    • Modal Drawer
    • Non-modal Drawer

    CRUD가 모두 있는 경우에는 Drawer를 사용한다.

  • th < td

    td의 문자/숫자가 길어 text-overflow: elipsis를 걸고, resize를 하고자 할 경우

    th는 width값을 주고, td에는 모두 max-width(th보다 작은 값을 주어야 함)값을 주면 최초 사이즈는 th의 값으로 보여지고, th에서 resize가 가능하며, resize축소 시, td값에 있는 max-width값까지 줄여진다. 단 한 cell이라도 max-width가 지정되어 있지 않으면, 해당 cell의 문자/숫자 크기까지만 줄일 수 있다.

    1: width
    2, 3, 4: max-width
    5: 지정안함

    이 경우 resize 시 5가 2, 3, 4보다 크면 5의 사이즈까지만 줄일 수 있음

    thead {
    white-space: wrap;
    }
    tbody {
    white-space: nowrap;
    }
    th, td {
    overflow: hidden;
    text-overflow: ellipsis;
    }
    
    th {
    width: 112px
    }
    td {
    width: 64px
    }
  • 대량세팅 프로토콜

    유닛 세팅

    프로퍼티 세팅

    프로퍼티 세팅(웹) –> 블록 세팅(웹) –> 유닛 세팅(엑셀)

    • 유닛 고유코드 자동생성
    • 유닛 관리코드 자동생성

    멤버 세팅(대량)

    멤버 세팅 및 유닛 연결: 멤버 세팅(엑셀) – 세팅 시 연결될 유닛 고유코드 입력하여 업로드

    Warning

    1. 멤버에 유닛이 1개 이상 연결되어 있지 않은 경우:

    유닛에 연결되지 않은 멤버가 1개 이상 있습니다. 진행하시겠습니까?

    참고. 멤버에 유닛을 연결하여 업로드하고자 할 경우 ‘취소’를 클릭 후 멤버 시트에서 유닛 고유코드를 확인 후 다시 업로드해 주세요.

    [취소] [확인]

    멤버 변경

    대량 업로드 시 유닛코드를 입력하지 않은 경우

    Warning

    1. 멤버에 유닛이 1개 이상 연결되어 있지 않은 경우:

    유닛에 연결되지 않은 멤버가 1개 이상 있습니다. 진행하시겠습니까?

    참고. 멤버에 유닛을 연결하여 업로드하고자 할 경우 ‘취소’를 클릭 후 멤버 시트에서 유닛 고유코드를 확인 후 다시 업로드해 주세요.

    [취소] [확인]

    2.

  • 파일명 등 네이밍

    폴더명/파일명

    모두 영문 소문자. 대시(-)와 언더바(_)모두 사용.

    숫자는 날짜와 버전을 나타낼 때만 사용하고, 그 외에는 지양한다.

    클래스, 변수, 컴포넌트명 등은 두단어 이상 다섯단어 이하를 권장한다.

    한단어는 검색/의미전달 등의 사유로 지양한다.

    클래스명

    영문 소문자. 대시(-)만 사용

    영문
    대문자
    영문
    소문자
    숫자대시
    (-)
    언더바
    (_)
    스페이스한글표기법
    HTML/
    CSS
    NoYesYesYesNoNoNokebab-case
    JS 일반YesYesYesNoNoNoNocamelCase
    생성자
    함수
    YesYesYesNoNoNoNoPascalCase
    VUE ComYesYesYesNoNoNoNoPascalCase
    VUE PropYesYesYesNoNoNoNocamelCase
    경로(URL)NoYesYesYesNoNoNokebab-case
    파일명NoYesYesYesYesNoNoMixed
    폴더명NoYesYesYesYesNoNoMixed
  • 줄임말(Abbreviation) 두문자어(Acronym)

    TermsButton
    권장button
    가능btn
    불가btns, but
    사용 예primary-button, primaryButton, PrimaryButton
    TermsTitle
    권장title
    가능title
    불가tit
    사용 예primary-title, primaryTitle PrimaryTitle
    TermsAfter Service
    권장AS
    가능AS
    불가
    사용 예your-as-is-here, yourAsIsHere, YourAsIsHere

  • Component Level

    Component VUE

    컴포넌트는 4가지로 레벨링을 한다.

    Element Component

    최소단위의 Component이며 Stand Alone Component입니다. (-Sa suffix 생략)

    해당 Componet는 다른 곳에서 Import 해서 쓸 수 있지만 수정사용은 불가합니다.

    예: Button, Input,

    Naming Convention: { FileName }El.vue

    1. Element Component만 Import할 수 있다. ??
    2. Block Component / 최상위 Component에서 재사용이 가능하다.

    Block Component

    예: Modal, Card, Drawer, Form 등

    Naming Convention: { FileName }Bl.vue / { FileName }BlSa.vue

    1. Element Component를 Import 할 수 있다.
    2. Block Component는 Import 할 수 없다.
    3. 최상위 Component에서 재사용 가능하다.

    Alliance Component

    예:

    Naming Convention: { FileName }Al.vue / { FileName }Sa.vue

    1. 작성필요

    Article Component

    ComponentView 바로 아래 레벨의 Component이며, Component하나로서 독립적인 역할을 합니다.

    Naming Convention: { FileName }.vue / { FileName }Sa.vue

    예: Dashboard.vue

    1. Element Component를 Import 할 수 있다.
    2. Block Component를 Import 할 수 있다.
    3. 다른 최상위 Componentfmf Import 할 수 없다.
    4. View파일 에서만 재사용되어 사용된다.

    참고 {File Name }Bl.vue 뒤에 SA(Stand Alone)을 붙이면, 해당 파일은 다른곳에서 Import해서 스타일링을 할 수 없습니다. 무조건 SA내부에서만 스타일링이 가능합니다.

    View Component VUE

    layout이 주 목적인 Component 파일입니다.

    Naming Convention: { FileName }View.vue

    예: DashboardView.vue

    Root Component VUE

    App.vue 파일이다.

    view 파일만 Import할 수 있다.

  • Component Naming Convention

    Global(전역)

    Style Class Naming Convention

    예: header, main, aside, footer, button-primary

    • 전역에는 core 클래스만 작성한다.
    • 전역에서 작성되는 클래스는 App파일, View파일, Component파일 어디에서든 쓰일 수 있다.

    예: header, main, aside, footer

    view-{ class-name } 은 view에서 core로서 공통으로 쓰일 수 있는 최소 단위 클래스만 작성한다.

    prefix는 view-로 정한다. view- 로 시작되는 클래스는 component 에서는 이용하지 못한다.

    view-header, view-main, view-aside, view-footer

    참고: view-{ class-name }이면 전역에 작성된 클래스이고 { class-name }-view는 로컬에 작성된 클래스로 구분한다.

    com-{ class-name } 은 Component File에서 core로서 공통으로 쓰일 수 있는 최소 단위 클래스만 작성한다.

    prefix는 com-로 정한다. com- 로 시작되는 클래스는 view에서는 이용하지 못한다.

    com-header, com-main, com-aside, com-footer

    참고: com-{ class-name }이면 전역에 작성된 클래스이고 { class-name }-com는 로컬에 작성된 클래스로 구분한다.

    View File

    파일명: FileNameView.vue

    로컬 스타일 클래스명: { class-name }-view

    Styling Guide

    Utility 클래스 등을 포함하여 최대한 전역 클래스 (view-{ class-name } 포함)를 이용한다.

    전역에 클래스가 없는 경우 인라인 스타일링을 한다.

    인라인 스타일링 중에 유사한 패턴이 발생하는 경우 반복되는 패턴은 로컬 클래스로 작성해 둘 수 있다.

    로컬 클래스 명은: { class-name }-view 형식으로 작성한다.

    이후 파일 내에 작성된 클래스 이름은 전역에 작성 불가하다.

    단, scoped 되어 있기 때문에 다른 view파일에서는 동일명칭 사용이 가능하다.

    로컬 클래스를 작성하면서 View 전반에 걸쳐 사용될 것 같은 파일은 전역 클래스에 view-{ class-name }으로 클래스를 작성해둔다.

    기존에 로컬로 작성됐던 클래스나 스타일은 별도로 수정해도 되고 안해도 된다. 신규 파일부터 전역 view-{ class-name } 파일을 이용한다.

    Component File

    파일명: FileName.vue, FileNameAl.vue, FileNameBl.vue, FileNameEl.vue

    로컬 스타일 클래스명: { class-name }-com (예: lead-header-com)

    Styling Guide

    Utility 클래스 등을 포함하여 최대한 전역 클래스 (com-{ class-name } 포함)를 이용한다.

    전역에 클래스가 없는 경우 인라인 스타일링을 한다.

    인라인 스타일링에서 유사한 패턴이 발생하는 경우 로컬 클래스를 작성할 수 있다.

    로컬 클래스 명은:{ class-name }-com 형식으로 작성한다.

    파일네임이 너무 길거나 할 경우, <style>바로 하단에 주석으로 코드명을 작성하고 파일네임 대신 코드명으로 이용한다.

    이후 파일 내에 작성된 클래스는 전역 css 파일에 작성 불가하다.

  • Terms

    nav, menu 차이

    nav는 페이지 네비게이션, menu는 어떤 액션의 그룹 모음. (예: 호버나 클릭했을 때 나타나는 버튼/액션 모음)

    temp class: 추후 지워도 되는 클래스. 공통으로 쓰이는 클래스가 들어간 상태에서 레이아웃이 안맞을 때, 작성하는 클래스

    <!-- temp class - start -->
    .pt-0: padding-top: 0;
    .pb-0: padding-bottom: 0 !important;
    <!-- temp class - end -->