프론트엔드 코딩컨벤션

이번에 프로젝트를 진행하면서 팀원들끼리 코딩컨벤션을 정해 정리해보았다.

 

🤍프론트엔드 코딩컨벤션

 

※참고

프론트엔드 코딩 컨벤션

☑️식별자

: 변수, 함수, 배열, 클래스 등과 같은 프로그래밍 요소를 구분하고 식별하기 위해 사용되는 이름

❌ 직관적으로 의미를 파악할 수 있도록 가급적이면 약어를 사용하지 않습니다.

❌ 한글을 직번역한 변수명을 사용하지 않습니다.

❌ 공백을 허용하지 않습니다.

❌ 언어에서 사용하는 예약어를 사용하지 않습니다.

👌🏻 변수, 함수는 카멜 케이스로 선언합니다.

userName, totalAmount, orderName // good
username, TotalAmount, order_name // bad

👌🏻 배열은 복수형으로 선언합니다.

👌🏻 private 변수는 _를 접두사로 선언합니다.

👌🏻 HTML 태그는 소문자로 작성합니다.

👌🏻 상수는 스네이크 케이스를 활용해 대문자와 _를 사용해 선언합니다.

const THIS_IS_CONSTANT = 'string';

👌🏻 props로 전달되는 핸들러 함수는 on으로 시작합니다.

function Button(props) {
  return (
    <button onClick={props.onClick} onMouseEnter={props.onMouseEnter}>
      Click me
    </button>
  );
}

const Button = (props) => (
  <button onClick={props.onClick} onMouseEnter={props.onMouseEnter}>
    Click me
  </button>
);

👌🏻 Boolean 타입 변수의 식별자 명은 가급적이면 부정형으로 선언하지 않는 것을 권고합니다. 또한 Boolean 타입의 변수의 식별자는 is, has, can 의 접두사를 사용하여 선언합니다.

const canOpen = true; //good
const hasChildren = true; //good
const isNotBoolean = false; // bad
cosnt isBoolean = true; // bad

👌🏻 Enum 선언은 파스칼 케이스로 선언합니다.

// good
enum FormMode {
  Create = 'create',
  Edit = 'edit',
  Add = 'add',
}
// bad
enum FORM_MODE {
  CREATE = 'create',
  EDIT = 'edit',
  ADD = 'add',
}

👌🏻 Interface, type 선언 시 접두사를 붙이지 않습니다. 헝가리안 표기법을 사용하지 않습니다.

// good
interface Server {
  sample: string;
}
// bad
interface IServer {
  title: string;
  value?: string;
}

 

 

Function

• 함수의 식별자명은 항상 시멘틱하게 선언합니다.(어떤 기능을 하는 함수인지 함수명을 보고 알 수 있도록 선언합니다.)
• 이벤트를 핸들링하는 함수는 handle 접두사를 사용합니다.
• 반환값이 boolean인 함수는 is 접두사를 사용합니다.
• 어떤 값을 return하는 함수는 get 접두사를 활용합니다.
• 함수는 선언식과 표현식을 사용하여 선언합니다.
  • 함수 선언식: function greet() { console.log("Hello!"); } greet(); // "Hello!" 출력
  • 함수 표현식: function greet() { console.log("Hello!"); } greet(); // "Hello!" 출력
• 이때, 함수 표현식과 함수 생성자로 선언된 함수는 호이스팅 시 값이 할당되지 않습니다. 선언 이전에 사용 시 오류가 발생 하므로 함수는 사용 전에 선언해야 합니다. 함수 선언문은 변수 선언문 다음에 옵니다.
• 배열 메서드의 콜백 함수는 가독성을 위해 화살표 함수(Arrow Function)를 사용합니다.

// good 
[1, 2, 3].map(x => { const y = x + 1; return x * y; }); 
// bad 
[1, 2, 3].map(function (x) { const y = x + 1; return x * y; });

 

변수

• var 키워드를 사용하지 않고, const와 let을 사용하여 변수를 선언합니다.

전역변수

• 네임스페이스를 사용하여 전역변수를 최소화하며 암묵적인 전역변수는 절대로 사용하지 않습니다.

 

배열과 객체

• 배열과 객체는 반드시 리터럴로 선언합니다.
  • 리터럴 표기법이란? 프로그래밍에서 값을 직접 작성하여 변수를 초기화하거나 객체를 생성하는 방법을 의미한다.

// good
// 배열을 리터럴로 선언하는 예
let fruits = ["apple", "banana", "cherry"];
// 객체를 리터럴로 선언하는 예
let person = {
    name: "John Doe",
    age: 30,
    job: "Developer"
};

// bad
// 배열을 생성자 함수로 선언하는 예
let fruits = new Array("apple", "banana", "cherry");
// 객체를 생성자 함수로 선언하는 예
let person = new Object();
person.name = "John Doe";
person.age = 30;
person.job = "Developer";

• 배열 복사시 순환문을 사용하지 않는다.

let items = [1,2,3,4];
var len = items.length;
var itemsCopy = [];

// good
const arr = [...items];

// bad
for (var i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

 

☑️Css in JS

👌🏻 CSS 선언 시 식별자 명은 변수의 카멜 케이스로 선언합니다.

const textFieldCss = `
  font-size: 14px;
`;

👌🏻 CSS를 사용할 때는 가급적 객체가 아닌 템플릿 문자열을 활용합니다.

// good
const buttonStyle = `
  background: blue;
  color: white;
  font-size: 14px;
`;
const Button = styled.button`${buttonStyle}`;

// bad
const buttonStyle = {
  background: 'blue',
  color: 'white',
  fontSize: '14px',
};
const Button = styled.button(buttonStyle);

👌🏻 Styled-Components의 컴포넌트를 선언할 때 변수명은 파스칼 케이스로 선언합니다.

const Wrapper = styled.div`
  padding: 20px;
`;

const FormRow = styled.section`
  display: flex;
  margin-bottom: 15px;
`;

 

 

☑️ES6+

👌🏻 객체에서 여러 프로퍼티에 접근할 때는 Destructing을 이용합니다.

function Template({v1, v2, ...args}) {
  const A = v1;
};

👌🏻 배열도 Destructuring 이 가능합니다.

// good
const [first, second] = arr;

// bad
const first = arr[0];
const second = arr[1];

 

 

☑️공통

👌🏻주석은 설명하려는 구문에 맞춰 들여쓰기 합니다.

문장의 끝에 주석을 작성할 경우, 한 줄 주석을 사용하며 공백을 추가합니다.

사용하지 않거나 의미 없는 주석은 항상 제거하여 커밋합니다.

// good
function someFunction() {
  ...

  // statement에 관한 주석
  statements
}

👌🏻키워드, 연산자와 다른 코드 사이에 공백이 있어야 합니다.

// good
var value;
if (typeof str === 'string') {
  value = (a + b);
}

// bad
var value;
if(typeof str==='string') {
  value=(a+b);
}

👌🏻콤마 다음에 값이 올 경우 공백이 있어야 합니다.

// Good
var arr = [1, 2, 3, 4];

// Good
someFunction(a, b, {
  prop1: 1,
  prop2: 2,
  prop3: 3
});

// Bad - 괄호 안에 공백
if ( typeof str === 'string' )

// Bad - 괄호 안 공백, 콤마 뒤 공백 없음
var arr = [ 1,2,3,4 ];

// Bad - 객체의 닫는 괄호 다음에 개행
someFunction(a, b, {
        prop1: 1,
        prop2: 2,
        prop3: 3
    }
);

👌🏻주석은 설명하려는 구문에 맞춰 들여쓰기 합니다.

문장의 끝에 주석을 작성할 경우, 한 줄 주석을 사용하며 공백을 추가합니다.

사용하지 않거나 의미 없는 주석은 항상 제거하여 커밋합니다.