Skip to main content

JavaScript Coding Convention

Intro

javascript(이하 js)로 개발함에 있어서 개발자들간에 지켜야할 코딩 규약을 정하고자 한다.

Convention

Javascript File

  1. file encoding은 UTF-8로 한다.
  2. file extention은 .js로 한다. ex) Test.js
  3. javascript 코드는 기본적으로 HTML 파일에 들어가지 않는것을 권장한다.
  4. HTML에서 javascript include는 <script src="filename.js"> 형태로 기술한다.

Indentation & Line

  1. indent는 space 4칸으로 한다.(tab 지양)
  2. line length는 가능한 80 line에 맞추도록 한다.

Declaration

Variable

  1. 변수 선언은 반드시 var 를 사용한다.
  2. var statement는 function body의 최상단에 위치한다.
  3. var statement는 alphabetical ascending order로 배치 될수 있도록 한다.
    변수선언 샘플
    ...
    function printName() {
        var channel;
        var program;
        var size;
        ...
    }

Function

  1. function은 가능한 expressive하게 선언하지 않고 declarative하게 선언하는것을 권장한다.
    함수선언 샘플
    // suggest not to use if you can.
    var foo = function (arg1, arg2) {
        ...
    };
    // suggest to use this style.
    function foo(arg1, arg2) {
    ...
    }
  2. named function은 function keyword와 name 사이 space 1칸, parameter와 { 사이 space 1칸으로 한다.
    named function
    function myName(arg1, arg2) {
        ...
    }
  3. anonymous function은 function keyword와 argument 사이 space 1칸, parameter와 { 사이 space 1칸으로 한다.
    named function
    var af = function (arg1, arg2) {
        ...
    };
  4. inner function의 정의는 var statement 다음에 위치하도록 한다.
    named function
    function myName(arg1, arg2) {
        var v1;
        function inner(a1) {
            ...
        }
        ...
    }
  5. immediate function invocation은 괄호"()" 사이에 function이 위치할 수 있도록 한다.
    named function
    var af = (function (arg1, arg2) {
        var a;
        ...
        return a;
    }());

Naming

  1. variable naming은 lowercase와 숫자, underscore(_)의 조합으로 만들도록 한다.
    named function
    var channel_number;
    var program_name;
    ...
  2. underscore(_)로 시작하는 이름은 private에 한해서만 사용하도록 한다.
  3. method로 사용할 function명은 lowercase로 시작된 camel type을 사용한다.
    named function
    function doStuff() {
        ...
    }
  4. constructor로 사용될 function명은 uppercase로 시작된 camel type을 사용한다.
    named function
    function ChannelManager() {
        ...
    }
    ...
    var ch = new ChannelManager();
  5. global variable은 어떻게 할까?...고민중

Statement

  1. statement는 마지막에 항상 semicolon(;)을 붙이도록 한다.
  2. compound statement는 아래와 같은 패턴을 사용하도록 권장한다.
    named function
    // if-else
    if (condition) {
        statements
    }
         
    if (condition) {
        statements
    else {
        statements
    }
    if (condition) {
        statements
    else if (condition) {
        statements
    else {
        statements
    }
    // for
    for (initialization; condition; update) {
        statements
    }
    for (variable in object) {
        if (filter) {
            statements
        }
    }
    // while
    while (condition) {
        statements
    }
    // do-while
    do {
        statements
    while (condition);
    // switch
    switch (expression) {
    case expression:
        statements
    default:
        statements
    }
    // try-catch
    try {
        statements
    catch (variable) {
        statements
    }
    try {
        statements
    catch (variable) {
        statements
    } finally {
        statements
    }

Comparator

  1. ==와 != 대신 ===와 !==를 사용하는 것을 권장한다.

Additional

  1. eval은 보안상의 문제가 있으니 되도록 쓰지않도록 한다."eval is evil"
  2. with는 알기 힘든 버그를 만들어 낼수 있으니 되도록 쓰지 않도록 한다.
    http://yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/
  3. global scope이 필요한 경우가 아니면 Function constructor는 사용을 자제한다.

Comments

Popular posts from this blog

ELK 설치

1. What is ELK? = Elasticsearch + Logstash + Kibana

Elasticsearch: Apache Lucene 기반의 검색 서버
Logstash: log 수집기
Kibana: BI tool

2. Downloads ; Ubuntu docker 에 설치

* Elasticsearch: $> wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.3.0.tar.gz

* Logstash: $> wget https://artifacts.elastic.co/downloads/logstash/logstash-6.3.0.tar.gz
* Kibana: $> wget https://artifacts.elastic.co/downloads/kibana/kibana-6.3.0_linux-x86_64.tar.gz
3. Install docker instance 2개: 1 for apache + logstash, 2 for elasticsearch + kibana
docker instance 에 java 필요 (4번 java 8 설치 참조)
§ Apache2 설치 - 데모서버 $> sudo apt-get update
$> sudo apt-get install apache2

* log format 추가
elasticsearch 가 JSON 형식의 API를 사용하기 때문/etc/apache2/apache2.conf 파일에 아래 log format 추가LogFormat "{ \"time\":\"%t\", \"clientip\":\"%a\",\"host\":\"%V\", \"request\":\"%U\", \"query\":\"%q\", \"method\":…

VMWare Host-Only network 설정

Host-only network 설정시 삽질한 내용 기록해 두어야겠다.

Host OS: Windows 10
Guest OS: Windows 7

Host에 VMWare가 추가한 adapter 두개: VMnet1(host-only), VMne8(NAT)

진행내용)
1. Guest OS로 Windows 7 host-only 모드로 설치.
2. 그러면 Host OS(VMnet1)는 host-only network상의 gateway가 됨.
3. VMnet1에 셋팅된 주소가 Host의 IP
4. Guest에서 Host로 3번의 IP로 ping test
5. Guest OS 방화벽 비활성(중요)
6. host에서 Guest OS에 설정된 IP로 ping test

예제)

VMnet1 ip: 192.168.182.1
Guest ip: 192.168.182.123

from Guest
$> ping 192.168.182.1

from HOST
$> ping 192.168.100.104

Sequence Diagram

표기법
이 글은 UML 다이어그램에 대한 첫 번째 글이기 때문에 UML 2 다이어그램의 표기법에 추가된 부분, 즉 프레임이라고 하는 표기법 엘리먼트를 먼저 다뤄야겠다. 이 프레임 엘리먼트는 UML 2의 다른 많은 다이어그램 엘리먼트의 기초로 쓰이지만, 처음에 대부분의 사람들은 이 프레임 엘리먼트를 다이어그램의 그래픽 영역이라고 생각한다. 프레임 엘리먼트는 다이어그램의 레이블을 위한 지정된 장소를 제공하고, 다이어그램의 그래픽 영역을 제공한다. 프레임 엘리먼트는 UML 다이어그램에서는 선택 사항이다. 그림 1과 2에서 보듯, 다이어그램의 레이블은 프레임의 "네임박스(namebox)" 라고 부르게 될 왼쪽 코너의 상단에 놓인다. 실제 UML 다이어그램은 더 큰 직사각형 안에서 정의된다.
그림 1: 비어있는 UML 2 프레임 엘리먼트
시각적으로 경계선을 표시하는 것 외에도 이 프레임 엘리먼트는 인터랙션을 설명하는 다이어그램(시퀀스 다이어그램)에서도 중요한 기능도 한다. 시퀀스 다이어그램에서 시퀀스에 대한 인커밍 메시지와 아웃고잉 메시지(인터랙션)는, 이 메시지들을 프레임 엘리먼트의 경계선에 연결하여 모델링 된다. (그림 2). "기초를 넘어서" 섹션에서 설명하도록 하겠다.

그림 2: 인커밍 메시지와 아웃고잉 메시지가 있는 시퀀스 다이어그램
그림 2에서, 다이어그램 레이블이 Sequence Diagram을 의미하는 "sd" 로 시작한다는 것에 주목하라. 다이어그램을 위한 프레임 엘리먼트를 사용할 때 다이어그램의 레이블은 다음 포맷을 따라야 한다.

Diagram Type Diagram Name
UML 스팩은 다이어그램 유형마다 특정 텍스트 값을 준다. (sd = Sequence Diagram, activity = Activity Diagram, use case = Use Case Diagram).



기초
시퀀스 다이어그램의 주요 목적은 어떤 결과를 만들어내는 이벤트 시퀀스를 정의하는 것이다. 메시지 보다는 메시지가 발생하는 순서에 …