각자의 코딩 스타일이 다르기 때문에 merge 시 충돌이 발생할 수도 있고 코드의 가독성 또한 떨어질 수도 있기 때문에 공통적인 형식으로 작성될 수 있도록 정하는 것이 중요!

코딩컨벤션

(1) 변수명이 길어지더라도 최대한 상세하게 작명한다.

• 변수 : 소문자로 시작하는 카멜케이스 intNumber

• 지역변수 또는 private 변수 : _로 시작하는 카멜케이스

  let _privateVariableName; let _privateFunctionName;

• 정규표현식 : ‘r’로 시작 const rDesc = /.*/;

• 배열 : 복수형 이름 const dogs = [];

• 함수 : 익명함수 function 함수이름(){…}

• 이벤트 핸들러 : on 으로 시작. on + event 종류 + 함수의 목적(함축적인 단어)

  ex)const onClick = () => {};

• 불린 반환 함수 : 반환 값이 불린인 함수는 is 로 시작한다.

  ex) let isAvailable = false;

• styled-component

  • 대문자로 시작하는 카멜케이스
  • 스타일 적용 만을 위한 경우 가장 앞에 St 붙여준다.
    • 레이아웃 정렬만을 컴포넌트를 사용할 때
    • 기능이 들어가는 경우는 St를 굳이 붙이지 않고 보다 직관적인 이름을 붙인다.
  • export default 를 가장 마지막에 적는다.

• 외부 라이브러리 사용

  • 인라인 요소로 style 적용, In 붙여준다.

(2) 들여쓰기 할 때는 공백 문자 대신 탭을 사용한다.

(3) 하나의 컴포넌트 안에서 변수는 상단에 함수는 하단에 구분하여 적어준다.

(4) 외부 모듈과 내부 모듈을 구분하여 사용하며, 선언 사이에 공백을 둔다.

(5) 세미 콜론 앞에는 공백 사용하지 않는다.

(6) 주석은 설명하려는 구문에 맞춰 들여쓰기 한다.

===== (4) =====

// 외부 모듈
const react from 'react';
const axios from 'axios';

// 내부 모듈
const Home from '../components/Home.jsx';
const createSlice from '../redux/modules/createSlice.js';

===== (5) =====

// bad
const obj = {
  foo : 'a'
};

// good
const obj = {
  foo: 'a'
};

===== (6) =====

// Bad
function someFunction() {
  ...

// statement에 관한 주석
  statements
}

// Good
function someFunction() {
  ...

  // statement에 관한 주석
  statements
}

(7) 폴더명 첫글자 대문자로 쓰기

(8) 액션 코멘트

• FIXME -- 해결이 필요

  • 문제에 대한 주석으로써 // FIXME: 를 사용해 주십시오.

    class Calculator extends Abacus {
    constructor() {
    super();
    
    // FIXME: shouldn't use a global here
    // FIXME: 글로벌변수를 사용해서는 안됨.
    total = 0;
    }
    }
    

• TODO -- 구현이 필요

  • 문제의 해결책에 대한 주석으로 // TODO: 를 사용해 주십시오.

    class Calculator extends Abacus {
      constructor() {
        super();
    
        // TODO: total should be configurable by an options param
        // TODO: total 은 옵션 파라메터로 설정해야함.
        this.total = 0;
      }
    }
    

(9) 프로퍼티가 boolean 인 경우, isVal() 이나 hasVal() 로 해주십시오.

// bad
if (!dragon.age()) {
  return false;
}

// good
if (!dragon.hasAge()) {
  return false;
}