1. General Rules (일반 원칙)

• DRY (Don't Repeat Yourself): 똑같은 로직이 3번 이상 반복되면 함수나 컴포넌트로 분리합니다.
• KISS (Keep It Simple, Stupid): 코드는 훌륭한 것보다 읽기 쉬운 것이 우선입니다. 복잡한 한 줄짜리 코드보다 명확한 세 줄짜리 코드를 선호합니다.
• Early Return: if/else 중첩을 피하기 위해 예외 조건은 함수 초입에서 리턴 처리합니다.
• 주석: 코드로 설명되지 않는 '비즈니스 로직의 이유'나 '복잡한 알고리즘'에만 주석을 답니다. ("변수 선언함" 같은 당연한 주석 금지)
• 언어: 변수명, 함수명, 커밋 메시지는 영어를 사용하고, 복잡한 로직 설명 주석은 한국어를 사용합니다.

2. Javascript Rules (ES Modules)

• 모듈 시스템: CommonJS(require)는 사용하지 않으며, ESM(import/export) 표준을 준수합니다.
  • import 순서
    • 외부 라이브러리 → 컴포넌트 → 내부 모듈 → 에셋
• 변수 선언: const를 기본으로 사용합니다. 재할당이 꼭 필요한 경우에만 let을 사용하며, var는 절대 사용하지 않습니다.
• 비동기 처리: Promise.then() 체이닝보다 가독성이 좋은 async/await 구문을 사용합니다.
• 등호 연산: 타입 강제 변환을 막기 위해 항상 엄격한 일치 연산자 ===, !==를 사용합니다.
• 네이밍 (CamelCase): 변수와 함수 이름은 camelCase를 사용합니다.
  • const userData (O) / const UserData (X)
• 화살표 함수: 콜백이나 익명 함수는 화살표 함수를 우선합니다.

// [Bad]
function sum(a, b) { return a + b; }

// [Good]
const sum = (a, b) => a + b;

3. React.js & Next.js Rules

• 컴포넌트 명명 (PascalCase): 컴포넌트 파일명과 함수명은 대문자로 시작합니다.

  • UserProfile.jsx (O) / userProfile.jsx (X)

• 컴포넌트 선언: 함수형 컴포넌트

  export default function hello() {
    return (
      <div>hello</div>
    )
  }
  

• 구조 분해 할당 (Destructuring): props는 파라미터 내부에서 구조 분해하여 받습니다.

• Hooks 규칙:

  • 모든 커스텀 훅은 use 접두사를 붙입니다. (예: useAuth)
  • Hooks는 조건문이나 반복문 내부가 아닌, 컴포넌트 최상위 레벨에서만 호출합니다.

• 불변성 유지: 상태(State)를 직접 수정하지 않고, setState 함수나 스프레드 연산자(...)를 사용합니다.