NGMsoftware

NGMsoftware
로그인 회원가입
  • 매뉴얼
  • 학습
  • 매뉴얼

    학습


    JavaScript Naming Conventions. (JavaScript, Angular, React, Vue)

    페이지 정보

    본문

    안녕하세요. 엔지엠소프트웨어입니다. C#이나 Java, JavaScript등등... 대부분의 언어들이 비슷한 네이밍 룰을 사용하고 있습니다. 카멜 표기법과 파스칼 표기법을 많이 사용합니다. 일반적으로 카멜 표기법과 파스칼 표기법을 혼합해서 회사에 적용하고 있습니다. 회사에 특화된 특수한 몇몇 예외를 빼면 그렇습니다^^; 헝가리안 표기법은 Strong Type이 없는 스크립트 언어들이 주로 사용했었고, 스네이크 표기법은 데이타베이스 쿼리에 사용합니다. 요즘은 데이타베이스도 OOP의 개념이 들어가면서 카멜 표기법과 파스칼 표기법을 사용하기도 합니다. 이런 디테일한 부분들은 회사 정책에 따르는게 좋습니다.

     

    Naming Convention for Variables

    JavaScript 변수 이름은 대소문자를 구분합니다. 예를 들어 다음과 같이 세 개의 고유한 변수를 정의하여 강아지 이름을 저장할 수 있습니다.

    var DogName = 'Scooby-Doo';
    var dogName = 'Droopy';
    var DOGNAME = 'Odie';
    console.log(DogName); // "Scooby-Doo"
    console.log(dogName); // "Droopy"
    console.log(DOGNAME); // "Odie"

     

    그러나 JavaScript 변수를 선언하는 가장 권장되는 방법은 카멜 케이스 변수 이름을 사용하는 것입니다. JavaScript에서 모든 유형의 변수에 대해 카멜 케이스 명명 규칙을 사용할 수 있으며 동일한 이름을 가진 변수가 여러 개 있지 않도록 합니다.

    // bad
    var dogname = 'Droopy'; 
    // bad
    var dog_name = 'Droopy'; 
    // bad
    var DOGNAME = ‘Droopy’; 
    // bad
    var DOG_NAME = 'Droopy'; 
    // good
    var dogName = 'Droopy';

     

    변수 이름은 설명이 필요 없고 저장된 값을 설명해야 합니다. 예를 들어 개의 이름을 저장할 변수가 필요한 경우 Name 대신 dogName을 사용해야 더 의미가 있습니다.

    // bad
    var d = 'Scooby-Doo';
    // bad
    var name = 'Scooby-Doo';
    // good
    var dogName = 'Scooby-Doo';

     

    Naming Convention for Booleans

    부울 변수의 경우 접두사로 is 또는 has를 사용해야 합니다. 예를 들어 개에게 주인이 있는지 확인하기 위해 부울 변수가 필요한 경우 변수 이름으로 hasOwner를 사용해야 합니다.

    // bad
    var bark = false;
    // good
    var isBark = false;
    // bad
    var ideal = true;
    // good
    var areIdeal = true;
    // bad
    var owner = true;
    // good
    var hasOwner = true;
    // good
    var isNumber = true;

     

    Naming Convention for Functions

    JavaScript 함수 이름도 대소문자를 구분합니다. 따라서 변수와 마찬가지로 함수 이름을 선언할 때 카멜 케이스 방식을 권장합니다. 그 외에도 설명 명사와 동사를 접두사로 사용해야 합니다. 예를 들어 이름을 검색하는 함수를 선언하는 경우 함수 이름은 getName이어야 합니다.

    // bad
    function name(dogName, ownerName) { 
      return '${dogName} ${ownerName}';
    }
    
    // good
    function getName(dogName, ownerName) { 
      return '${dogName} ${ownerName}';
    }

     

    Naming Convention for Constants

    javaScript 상수도 대소문자를 구분합니다. 그러나 이러한 상수는 변경되지 않는 변수이므로 대문자로 작성해야 합니다. 이 때 상수가 여러 단어를 표현해야 한다면 헝가리안 표기법을 같이 사용합니다.

    var LEG = 4;
    var TAIL = 1;
    var MOVABLE = LEG + TAIL;
    var DATABASE_NAME = 'DEV';

     

    Naming Convention for Classes

    JavaScript 클래스의 명명 규칙은 함수와 매우 유사합니다. 클래스의 기능을 설명하는 제목을 사용해야 합니다. 함수 이름과 클래스 이름의 주요 차이점은 클래스 이름에 파스칼 대소문자를 사용해야 한다는 것입니다.

    class DogCartoon { 
      constructor(dogName, ownerName) { 
        this.dogName = dogName; 
        this.ownerName = ownerName; 
      }
    }
    
    var cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');

     

    Naming Convention for Components

    JavaScript 구성 요소는 React와 같은 프런트 엔드 프레임워크에서 널리 사용됩니다. 구성 요소는 DOM에서 사용되지만 클래스와 유사하게 취급하고 파스칼 대소문자를 사용하여 이름을 정의하는 것이 좋습니다.

    // bad
    function dogCartoon(roles) { 
      return ( 
        < div > 
          < span > Dog Name: { roles.dogName } < /span> 
          < span > Owner Name: { roles.ownerName } < /span> 
        < /div> 
      );
    } 
    
    // good
    function DogCartoon(roles) { 
      return ( 
        < div > 
          < span > Dog Name: { roles.dogName } < /span> 
          < span > Owner Name: { roles.ownerName } < /span> 
        < /div> 
      );
    }

     

    이니셜은 항상 대문자로 표기하기 때문에 활용시 네이티브 HTML, 웹컴포넌트와 차별화되는 컴포넌트입니다.

    <div> 
      <DogCartoon 
        roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }} 
      />
    </div>

     

    Naming Convention for Methods

    몇 가지 차이점이 있지만 JavaScript 함수와 메서드의 구조는 매우 유사합니다. 따라서 명명 규칙은 동일합니다. 우리는 JavaScript 메서드를 선언하기 위해 카멜 케이스를 사용해야 하고 이름을 더 의미 있게 만들기 위해 접두사로 동사를 사용해야 합니다.

    class DogCartoon {
      constructor(dogName, ownerName) { 
        this.dogName = dogName; 
        this.ownerName = ownerName; 
      }
    
      getName() { 
        return '${this.dogName} ${this.ownerName}'; 
      }
    }
    
    var cartoon= new DogCartoon('Scooby-Doo', 'Shaggy');
    
    console.log(cartoon.getName());
    // "Scooby-Doo Shaggy"

     

    Naming Convention for Denoting Private Functions

    밑줄( _ )은 MySQL 및 C, C++, C#, PHP와 같은 언어에서 변수, 함수 및 메서드를 정의하는 데 널리 사용됩니다. 그러나 JavaScript에서는 Private 변수 또는 함수를 나타내기 위해 밑줄을 사용합니다. 예를 들어 toonName과 같은 비공개 함수 이름이 있는 경우 밑줄을 접두사(_toonName)로 추가하여 비공개 함수로 표시할 수 있습니다.

    class DogCartoon { 
      constructor(dogName, ownerName) { 
        this.dogName = dogName; 
        this.ownerName = ownerName; 
        this.name = _toonName(dogName, ownerName); 
      } 
      _toonName(dogName, ownerName) { 
        return `${dogName} ${ownerName}`; 
      } 
    }
    
    var cartoon = new DodCartoon('Scooby-Doo', 'Shaggy'); 
    
    // good
    var name = cartoon.name;
    console.log(name);
    // "Scooby-Doo Shaggy" 
    
    // bad
    name =cartoon._toonName(cartoon.dogName, cartoon.ownerName);
    console.log(name);
    // "Scooby-Doo Shaggy"

     

    Naming Convention for Global Variables

    Python의 경우 global 키워드를 사용하여 전역 변수임을 나타낼 수 있습니다. JavaScript에 대한 내용이므로 파이썬 개발 관련 내용을 작성할 때 좀 더 자세하게 알아보겠습니다.

     

    Naming Convention for File Names

    대부분의 웹서버(Apache, Unix)는 파일을 처리할 때 대소문자를 구분합니다. 예를 들어 optima.tsx는 Optima.tsx가 아닙니다. 대소문자를 구분하기 때문에 다른 파일로 인식합니다. 반면에 Microsoft의 IIS는 대소문자를 구분하지 않습니다. 그래서, IIS는 Optima.tsx를 사용해도 optima.tsx에 접근할 수 있습니다. 흔하지 않은 일이긴 하지만 웹 프로젝트는 CS 프로젝트와 달리 Unix, Windows 서버 전환이 일어날 수 있습니다. 이 때 대소문자를 구분하지 않는 서버에서 대소문자를 구분하는 서버로 전환하면 아주 작은 실수에도 웹사이트가 다운될 수 있습니다. 그래서, 대소문자를 구분함에도 불구하고, 모든 서버에서 소문자 파일 이름을 사용하는게 좋습니다.

     

    개발자에게 후원하기

    MGtdv7r.png

     

    추천, 구독, 홍보 꼭~ 부탁드립니다.

    여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

    감사합니다~

    • 네이버 공유하기
    • 페이스북 공유하기
    • 트위터 공유하기
    • 카카오스토리 공유하기
    추천0 비추천0

    댓글목록

    등록된 댓글이 없습니다.