Code Convention | Frontend

• 🧹 Prettier && Eslint Rules
• 🏗 Component Structure
• 🏷️ Naming Conventions
  • 🔍 Temporary Variables
  • 🔄 Array Destructuring (State 선언)
  • 📂 File Structure and Folder Naming
• 📚 Type Definitions
• ✉️ Props Handling
• ⚙️ API Calls and Asynchronous Operations
• ⚠️ Warning and Error Handling

🧹 Prettier && Eslint Rules

• 코드의 일관성을 위해 Prettier와 ESLint 규칙을 엄격히 준수. 가능한 규칙을 변경하거나 예외를 만들지 않도록 한다.

🏗 Component Structure

• 함수형 컴포넌트를 사용하며, 컴포넌트 선언 후 변수, 함수, useEffect, return 문을 순서대로 작성.

🏷️ Naming Conventions

🔍 Temporary Variables

• 임시 변수명은 변수의 용도를 알 수 있도록 작명하며, 한 문자 변수명은 피한다.

🔄 Array Destructuring (State 선언)

• 배열 구조 분해 할당(Destructuring)을 사용하여 state를 선언할 때 모든 아이템은 camelCase로 작성하고, setter 함수 앞에 "set"을 붙여 작성.

const [projectId, setProjectId] = useState<number>(0);

📂 File Structure and Folder Naming

• 프로젝트 내 파일과 폴더는 의미 있는 이름을 사용하여 그룹화.
• 컴포넌트, 스타일, 유틸리티 함수 등을 적절하게 구분하여 배치.
• 컴포넌트 파일은 해당 컴포넌트의 이름과 일치하도록 파일 이름을 지정.
• 리소스 파일 (이미지, 폰트 등)은 assets 또는 static 폴더에 저장하여 관리.

📚 Type Definitions

• 커스텀 타입은 interface 대신 type 문법을 사용하며, 클래스를 사용할 때에는 interface 문법을 사용.

type FollowModalProps = {
  onClickToggleModal: () => void;
  isFollowing: number;
};

✉️ Props Handling

• props는 구조 분해 할당(Destructuring)을 통해 다루며, 커스텀 타입 이름은 컴포넌트 이름 뒤에 "Props"를 붙여 작성.

function followModal({ onClickToggleModal, isFollowing }: FollowModalProps) { ... }

⚙️ API Calls and Asynchronous Operations

• API 호출 시 async/await 구문을 활용하여 비동기 처리.

async function main() {
  try {
    const userId = 1;
    const userInfo = await getUserInfo(userId);
    console.log('사용자 정보:', userInfo);
  } catch (error) {
    console.error('메인 함수 실행 중 오류 발생:', error);
  }
}

⚠️ Warning and Error Handling

• 브라우저 콘솔에 나타나는 경고와 오류를 최소화하며, 가능한 모든 경고를 처리.
• 배포 환경에서는 개발자 도구를 비활성화하거나 경고를 무시하도록 설정하여 사용자 경험을 최적화.