UX Framework Guide

Package 구조

File Naming 규칙

Prefix(필수) : N

Types(Suffix, Optional) : A~Z

Subject : Layout, xxxField, etc

최종 파일명 : N + Layout  + A

→ NLayoutA.js, NTextField.js

Variable 규칙

Naming : CamelCase로 작성

let : 지역 변수, 중복선언 불가

변수 : var, let, const

- const area = "Area"

- let areaSector = "Area"

const : 지역 변수, 할당된 값 변경 불가

var : 글로벌 또는 지역 변수, 제한없음.

const, let을 권장

Javascript Style Guide

-- References

    // bad
    var a = 1;
    var b = 2;
    
    // good
    const a = 1;
    const b = 2;

    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }

Airbnb Style Guide 참고

     - https://github.com/airbnb/javascript​

React/JSX Style Guide

-- Class 생성

    // bad
    const Listing = React.createClass({
      // ...
      render() {
        return <div>{this.state.hello}</div>;
      }
    });
    
    // good
    class Listing extends React.Component {
      // ...
      render() {
        return <div>{this.state.hello}</div>;
      }
    }

-- Component Import

    // bad
    import reservationCard from './ReservationCard';
    
    // good
    import ReservationCard from './ReservationCard';
    
    // bad
    const ReservationItem = <ReservationCard />;
    
    // good
    const reservationItem = <ReservationCard />;

-- Alignment

    // bad
    <Foo superLongParam="bar"
         anotherSuperLongParam="baz" />
    
    // good
    <Foo
      superLongParam="bar"
      anotherSuperLongParam="baz"
    />
    
    // if props fit in one line then keep it on the same line
    <Foo bar="bar" />
    
    // children get indented normally
    <Foo
      superLongParam="bar"
      anotherSuperLongParam="baz"
    >
      <Quux />
    </Foo>

-- Quotes : Always use double quotes (") for JSX attributes, but single quotes for all other JS

  // bad
  <Foo bar='bar' />

  // good
  <Foo bar="bar" />

  // bad
  <Foo style={{ left: "20px" }} />

  // good
  <Foo style={{ left: '20px' }} />

-- Spacing

    // bad
    <Foo/>
    
    // very bad
    <Foo                 />
    
    // bad
    <Foo
     />
    
    // good
    <Foo />

    // bad
    <Foo bar={ baz } />
    
    // good
    <Foo bar={baz} />

-- Props

    // bad
    <Foo
      UserName="hello"
      phone_number={12345678}
    />
    
    // good
    <Foo
      userName="hello"
      phoneNumber={12345678}
    />


-- Refs

    // bad
    <Foo
      ref="myRef"
    />
    
    // good
    <Foo
      ref={ref => { this.myRef = ref; }}
    />

-- Parentheses

    // bad
    render() {
      return <MyComponent className="long body" foo="bar">
               <MyChild />
             </MyComponent>;
    }
    
    // good
    render() {
      return (
        <MyComponent className="long body" foo="bar">
          <MyChild />
        </MyComponent>
      );
    }
    
    // good, when single line
    render() {
      const body = <div>hello</div>;
      return <MyComponent>{body}</MyComponent>;
    }

-- Bind Event 

  // bad
  class extends React.Component {
    onClickDiv() {
      // do stuff
    }

    render() {
      return <div onClick={this.onClickDiv.bind(this)} />
    }
  }

  // good
  class extends React.Component {
    constructor(props) {
      super(props);

      this.onClickDiv = this.onClickDiv.bind(this);
    }

    onClickDiv() {
      // do stuff
    }

    render() {
      return <div onClick={this.onClickDiv} />
    }
  }


-- Do not use underscore prefix for internal function

  // bad
  React.createClass({
    _onClickSubmit() {
      // do stuff
    },

    // other stuff
  });

  // good
  class extends React.Component {
    onClickSubmit() {
      // do stuff
    }

    // other stuff
  }

Airbnb Style Guide 참고

     - https://github.com/airbnb/javascript/tree/master/react

React/JSX Style Guide

React/JSX Ordering

1. optional static methods
2. constructor
3. getChildContext
4. componentWillMount
5. componentDidMount
6. componentWillReceiveProps
7. shouldComponentUpdate
8. componentWillUpdate
9. componentDidUpdate
10. componentWillUnmount
11. clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
12. getter methods for render like getSelectReason() or getFooterContent()
13. Optional render methods like renderNavigation() or renderProfilePicture()
14. render

React/JSX Style Guide

React/JSX Ordering

• How to define propTypes, defaultProps, contextTypes, etc...

import React, { PropTypes } from 'react';

const propTypes = {
  id: PropTypes.number.isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
};

class Link extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
  }
}

Link.propTypes = propTypes;
Link.defaultProps = defaultProps;

export default Link

Function Style Guide

-- 표기(CamelCase)

    // bad
    TestCaseOrder(){
        // do stuff
    }

    // good
    testCaseOrder(){
        // do stuff
    }

-- 일반적인 생성 규칙(동사 + 명사)

    // bad
    orderList(){
        // do stuff
    }

    // good
    getOrderStore(){
        // do stuff
    }

-- 컴포넌트에 종속적인 Function인 경우의 생성 규칙(동사 + 컴포넌트 + 명사)

    // bad
    getOrderList(){
        // do stuff
    }

    // good
    getGridOrderList(){
        // do stuff
    }

Code Style

Function Style Guide

접미사(Prefix)

Function Style Guide

Code Style

Framework 표준어 Guide

표준 용어 - https://docs.google.com/spreadsheets/d/1LCdGIKvjrjmMEr_VAGF0hy7xzxbAKgQwCk23ZJxr8Bk/edit#gid=1412011908

배포 설계

PUF

PCF

PBF

6. 빌드 파일 복사

7. JS, CSS 다운로드

8. Zip 압축

9. 다운로드 파일 제공

1. 배포 사이트 접속

2. 테마 선택

3. 빌드 실행

* 고려사항

     - Local 빌드(타켓 폴더 지정)
     - Remote 빌드(Zip 파일)