Coding Conventions

코딩 규칙에 대하여 설명합니다.

Overview

어플리케이션 개발의 일관성, 자동화, 가독성, 유지보수성, 오류 방지를 위하여 코드 규칙 준수를 권장합니다.

File Name & Folder Name

파일 이름과 폴더 이름은 모두 소문자 작성을 권장합니다.

이는 형상관리에 있어 혼란을 줄이기 위함 입니다

Code 작성 규칙

JavaScript Standard Style 준수를 권장합니다.

주요 특징

1.간결한 규칙

• 세미콜론(;) 사용하지 않음
• 들여쓰기는 2칸 공백 사용
• 문자열은 작은 따옴표(') 사용
• 연산자 주변에 공백 추가

2.엄격한 규칙

• 사용하지 않는 변수 정의 금지
• 항상 === 사용 (예외: null || undefined는 obj == null로 확인 가능)
• 브라우저 전역 접두어에는 window 사용 (예외: document, console, navigator)

3.가독성 중심

• 함수 선언 괄호 앞에 공백 추가
• 쉼표 뒤에 공백 추가
• 여러 줄의 if문 사용시 중괄호 사용
• else 문은 중괄호와 같은 줄에 배치

프로젝트 내 적용 모습

ESLint

최신 버전의 ESLint 모듈과 React / Nextjs 전용 plugin 을 통한 정적 코드 분석 을 진행합니다.

Prettier

최신 버전의 Prettier 모듈과 환경설정을 사용하여 JavaScript Standard Style 의 포맷팅 규칙을 설정합니다.

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "singleAttributePerLine": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}