Naming Convention - Att-ies/frontend GitHub Wiki

변수명

  1. 단어가 3개까지만 들어가게 지을 것.

    • 너무 길어진 변수는 읽기 힘듭니다.

    예) getElementInt (o) / getBackendElementInt (x)

  2. Sum, Average, Count, Max 같이 특정 양이나 최대 최소를 나타내는 것들은 뒤의 단어로 쓸 것.

    예) studentCount (o) / countStudent (x)

  3. 같은 의미의 변수일 때, 내부 함수의 변수는 더 짧은 변수를 사용할 것

  4. 배열, 딕셔너리 등등의 타입일 경우 s 혹은 list, arr 등등 표시를 붙일 것.

    • distance = [1, 3, 10] (x)
    • distances = [1, 3, 10] (o)
    • distance_list = [1, 3, 10] (o)

표기 방법

모두 대문자) ex. DOMAIN

  • 상수 | URL 이나 도메인 이름 | 그냥 단순한 기호나 문자열인데 변수로 쓰려고 할 때
  • 원래 관습적으로 대문자로 자주 쓰는 것들 (예 : ID, URL, IP, 등등)

파스칼 케이스) ex. MainState

  • 타입 이름 | 인터페이스 이름 | 클래스 이름
  • 절대 안변하고 사용만 되는 단순 함수, 내용적인 의미도 중요하지 않아야 함.
    • redux 에서 Action 함수 같은거

카멜 케이스) ex. getLoginPassword

  • 일반 함수
  • 아래에서 나올 어미 + ~~ 들
  • 객체의 property들

스네이크 케이스) ex. add_avail

  • 일반적인 두 단어 이상 변수들 | int, bool, string 등등 일반적인 타입의 변수들
  • array, dictionary 타입은 s 를 붙여준다.

[함수 앞에 어두]

새로 생성 : make / 맞는지 여부 : is (bool) / 가능한지 여부 : can / 설정하기 : set (void) / 받아오기 : get

[변수 뒤 어미]

가능한지 여부 : avail / 찾았는지 여부 : found / 에러 여부 : error | err / 끝났는지 여부 : done

[숫자]

누적 횟수 : count, cnt / 인덱스 : index, idx / 특정 번호 : num

  • handle~, on~ [참고 링크](https://ellie-dev.tistory.com/13)

    • on 접두사가 붙은 경우, 이 prop에 실제 이벤트가 연결되어 있다는 걸 뜻하고,
    • handle 접두사가 붙은 경우, 이벤트가 발생했을 때 호출되는 실제 Function을 의미

  • 예시

    function App() {
    const handleRegistrationSubmit = () => {}
    const handleLoginSubmit = () => {}
     return (
        <Form 
            onRegistrationSubmit={handleRegistrationSubmit}
            onLoginSubmit={handleLoginSubmit}
        />    
    )
}

파일, 폴더명

  1. 폴더 이름은 최대한 짧게

  2. 여러 파일을 분류해두는 폴더면 s 를 붙일 것.

  • model (x) / models (o)
  1. 날짜, 학번, 등등의 정보는 맨 앞에.
  • 200713_update_data.py
  1. 순차적 번호 같은 인덱스 정보는 맨 뒤에
  • 날짜도 순차적인 의미가 필요한 경우는 맨 뒤에.

이러한 경우 = 이름 > 날짜 > 순번

  • data01.js / data02.js
  1. 여러 단어가 들어간다면 큰 항목에서 작은 항목으로 붙일 것
  • layout_style_line.~~

image

그 외 코딩 컨벤션

  1. 선언과 동시에 할당을 하는 변수 먼저 선언한다. (ES5)

    선언과 할당을 함께하는 변수와 선언만 하는 변수가 함께 사용될 때, 선언과 동시에 할당을 하는 변수를 그룹화하여 먼저 선언하는 것이 가독성에 좋다.

  2. 배열과 객체는 반드시 리터럴로 선언한다.

    리터럴 표기법은 생성자 함수보다 짧고 명확하며 실수를 줄일 수 있다.

  3. 한 줄짜리 블록일 경우라도 {}를 생략하지 않으며 명확히 줄 바꿈 하여 사용한다.

    한 줄짜리 블록일 경우 {}를 생략할 수 있지만, 이는 코드 구조를 애매하게 만든다. 당장은 두 줄을 줄일 수 있겠지만 이후 오류 발생 확률이 높아 잠재된 위험 요소가 된다.

  4. (지역 변수 or private 변수)명은 '_'로 시작한다.

  5. const를 let 보다 위에 선언한다.

  6. const와 let은 사용 시점에 선언 및 할당을 한다.