Coding Standards

affaan-m/ECC/docs/ko-KR/skills/coding-standards

by affaan-mef648e01899ba3e8dc6371642deaaf64b4477775No license275K starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 4 days ago

TypeScript, JavaScript, React, Node.js 개발을 위한 범용 코딩 표준, 모범 사례 및 패턴.

Instructions onlySoftware Development
AI-generated overview

Provides general coding standards and best practices for TypeScript, JavaScript, React, Node.js and API design.

What it does
This skill supplies a reference set of coding conventions covering naming, immutability, error handling, async patterns, type safety, React components and hooks, REST API design, file organization, comments, performance and testing. It illustrates each rule with paired good and bad code examples and lists common code smells. It produces guidance rather than files or runnable output.
When to use it
Use it when starting a new project or module, reviewing code quality and maintainability, refactoring existing code to conventions, or setting up linting, formatting and type-checking rules. It also helps when onboarding contributors to coding conventions.
Requirements
No tools, packages or credentials are required; it is instructions only and ships no scripts.

코딩 표준 및 모범 사례

모든 프로젝트에 적용 가능한 범용 코딩 표준.

활성화 시점

  • 새 프로젝트 또는 모듈을 시작할 때
  • 코드 품질 및 유지보수성을 검토할 때
  • 기존 코드를 컨벤션에 맞게 리팩터링할 때
  • 네이밍, 포맷팅 또는 구조적 일관성을 적용할 때
  • 린팅, 포맷팅 또는 타입 검사 규칙을 설정할 때
  • 새 기여자에게 코딩 컨벤션을 안내할 때

코드 품질 원칙

1. 가독성 우선

  • 코드는 작성보다 읽히는 횟수가 더 많다
  • 명확한 변수 및 함수 이름 사용
  • 주석보다 자기 문서화 코드를 선호
  • 일관된 포맷팅 유지

2. KISS (Keep It Simple, Stupid)

  • 동작하는 가장 단순한 해결책
  • 과도한 엔지니어링 지양
  • 조기 최적화 금지
  • 이해하기 쉬운 코드 > 영리한 코드

3. DRY (Don't Repeat Yourself)

  • 공통 로직을 함수로 추출
  • 재사용 가능한 컴포넌트 생성
  • 모듈 간 유틸리티 공유
  • 복사-붙여넣기 프로그래밍 지양

4. YAGNI (You Aren't Gonna Need It)

  • 필요하기 전에 기능을 만들지 않기
  • 추측에 의한 일반화 지양
  • 필요할 때만 복잡성 추가
  • 단순하게 시작하고 필요할 때 리팩터링

TypeScript/JavaScript 표준

변수 네이밍

typescript
// PASS: GOOD: Descriptive namesconst marketSearchQuery = 'election'const isUserAuthenticated = trueconst totalRevenue = 1000
// FAIL: BAD: Unclear namesconst q = 'election'const flag = trueconst x = 1000

함수 네이밍

typescript
// PASS: GOOD: Verb-noun patternasync function fetchMarketData(marketId: string) { }function calculateSimilarity(a: number[], b: number[]) { }function isValidEmail(email: string): boolean { }
// FAIL: BAD: Unclear or noun-onlyasync function market(id: string) { }function similarity(a, b) { }function email(e) { }

불변성 패턴 (필수)

typescript
// PASS: ALWAYS use spread operatorconst updatedUser = {  ...user,  name: 'New Name'}
const updatedArray = [...items, newItem]
// FAIL: NEVER mutate directlyuser.name = 'New Name'  // BADitems.push(newItem)     // BAD

에러 처리

typescript
// PASS: GOOD: Comprehensive error handlingasync function fetchData(url: string) {  try {    const response = await fetch(url)
    if (!response.ok) {      throw new Error(`HTTP ${response.status}: ${response.statusText}`)    }
    return await response.json()  } catch (error) {    console.error('Fetch failed:', error)    throw new Error('Failed to fetch data')  }}
// FAIL: BAD: No error handlingasync function fetchData(url) {  const response = await fetch(url)  return response.json()}

Async/Await 모범 사례

typescript
// PASS: GOOD: Parallel execution when possibleconst [users, markets, stats] = await Promise.all([  fetchUsers(),  fetchMarkets(),  fetchStats()])
// FAIL: BAD: Sequential when unnecessaryconst users = await fetchUsers()const markets = await fetchMarkets()const stats = await fetchStats()

타입 안전성

typescript
// PASS: GOOD: Proper typesinterface Market {  id: string  name: string  status: 'active' | 'resolved' | 'closed'  created_at: Date}
function getMarket(id: string): Promise<Market> {  // Implementation}
// FAIL: BAD: Using 'any'function getMarket(id: any): Promise<any> {  // Implementation}

React 모범 사례

컴포넌트 구조

typescript
// PASS: GOOD: Functional component with typesinterface ButtonProps {  children: React.ReactNode  onClick: () => void  disabled?: boolean  variant?: 'primary' | 'secondary'}
export function Button({  children,  onClick,  disabled = false,  variant = 'primary'}: ButtonProps) {  return (    <button      onClick={onClick}      disabled={disabled}      className={`btn btn-${variant}`}    >      {children}    </button>  )}
// FAIL: BAD: No types, unclear structureexport function Button(props) {  return <button onClick={props.onClick}>{props.children}</button>}

커스텀 Hook

typescript
// PASS: GOOD: Reusable custom hookexport function useDebounce<T>(value: T, delay: number): T {  const [debouncedValue, setDebouncedValue] = useState<T>(value)
  useEffect(() => {    const handler = setTimeout(() => {      setDebouncedValue(value)    }, delay)
    return () => clearTimeout(handler)  }, [value, delay])
  return debouncedValue}
// Usageconst debouncedQuery = useDebounce(searchQuery, 500)

상태 관리

typescript
// PASS: GOOD: Proper state updatesconst [count, setCount] = useState(0)
// Functional update for state based on previous statesetCount(prev => prev + 1)
// FAIL: BAD: Direct state referencesetCount(count + 1)  // Can be stale in async scenarios

조건부 렌더링

typescript
// PASS: GOOD: Clear conditional rendering{isLoading && <Spinner />}{error && <ErrorMessage error={error} />}{data && <DataDisplay data={data} />}
// FAIL: BAD: Ternary hell{isLoading ? <Spinner /> : error ? <ErrorMessage error={error} /> : data ? <DataDisplay data={data} /> : null}

API 설계 표준

REST API 컨벤션

GET    /api/markets              # List all marketsGET    /api/markets/:id          # Get specific marketPOST   /api/markets              # Create new marketPUT    /api/markets/:id          # Update market (full)PATCH  /api/markets/:id          # Update market (partial)DELETE /api/markets/:id          # Delete market
# Query parameters for filteringGET /api/markets?status=active&limit=10&offset=0

응답 형식

typescript
// PASS: GOOD: Consistent response structureinterface ApiResponse<T> {  success: boolean  data?: T  error?: string  meta?: {    total: number    page: number    limit: number  }}
// Success responsereturn NextResponse.json({  success: true,  data: markets,  meta: { total: 100, page: 1, limit: 10 }})
// Error responsereturn NextResponse.json({  success: false,  error: 'Invalid request'}, { status: 400 })

입력 유효성 검사

typescript
import { z } from 'zod'
// PASS: GOOD: Schema validationconst CreateMarketSchema = z.object({  name: z.string().min(1).max(200),  description: z.string().min(1).max(2000),  endDate: z.string().datetime(),  categories: z.array(z.string()).min(1)})
export async function POST(request: Request) {  const body = await request.json()
  try {    const validated = CreateMarketSchema.parse(body)    // Proceed with validated data  } catch (error) {    if (error instanceof z.ZodError) {      return NextResponse.json({        success: false,        error: 'Validation failed',        details: error.errors      }, { status: 400 })    }  }}

파일 구성

프로젝트 구조

src/├── app/                    # Next.js App Router│   ├── api/               # API routes│   ├── markets/           # Market pages│   └── (auth)/           # Auth pages (route groups)├── components/            # React components│   ├── ui/               # Generic UI components│   ├── forms/            # Form components│   └── layouts/          # Layout components├── hooks/                # Custom React hooks├── lib/                  # Utilities and configs│   ├── api/             # API clients│   ├── utils/           # Helper functions│   └── constants/       # Constants├── types/                # TypeScript types└── styles/              # Global styles

파일 네이밍

components/Button.tsx          # PascalCase for componentshooks/useAuth.ts              # camelCase with 'use' prefixlib/formatDate.ts             # camelCase for utilitiestypes/market.types.ts         # camelCase with .types suffix

주석 및 문서화

주석을 작성해야 하는 경우

typescript
// PASS: GOOD: Explain WHY, not WHAT// Use exponential backoff to avoid overwhelming the API during outagesconst delay = Math.min(1000 * Math.pow(2, retryCount), 30000)
// Deliberately using mutation here for performance with large arraysitems.push(newItem)
// FAIL: BAD: Stating the obvious// Increment counter by 1count++
// Set name to user's namename = user.name

공개 API를 위한 JSDoc

typescript
/** * Searches markets using semantic similarity. * * @param query - Natural language search query * @param limit - Maximum number of results (default: 10) * @returns Array of markets sorted by similarity score * @throws {Error} If OpenAI API fails or Redis unavailable * * @example * ```typescript * const results = await searchMarkets('election', 5) * console.log(results[0].name) // "Trump vs Biden" * ``` */export async function searchMarkets(  query: string,  limit: number = 10): Promise<Market[]> {  // Implementation}

성능 모범 사례

메모이제이션

typescript
import { useMemo, useCallback } from 'react'
// PASS: GOOD: Memoize expensive computationsconst sortedMarkets = useMemo(() => {  return [...markets].sort((a, b) => b.volume - a.volume)}, [markets])
// PASS: GOOD: Memoize callbacksconst handleSearch = useCallback((query: string) => {  setSearchQuery(query)}, [])

지연 로딩

typescript
import { lazy, Suspense } from 'react'
// PASS: GOOD: Lazy load heavy componentsconst HeavyChart = lazy(() => import('./HeavyChart'))
export function Dashboard() {  return (    <Suspense fallback={<Spinner />}>      <HeavyChart />    </Suspense>  )}

데이터베이스 쿼리

typescript
// PASS: GOOD: Select only needed columnsconst { data } = await supabase  .from('markets')  .select('id, name, status')  .limit(10)
// FAIL: BAD: Select everythingconst { data } = await supabase  .from('markets')  .select('*')

테스트 표준

테스트 구조 (AAA 패턴)

typescript
test('calculates similarity correctly', () => {  // Arrange  const vector1 = [1, 0, 0]  const vector2 = [0, 1, 0]
  // Act  const similarity = calculateCosineSimilarity(vector1, vector2)
  // Assert  expect(similarity).toBe(0)})

테스트 네이밍

typescript
// PASS: GOOD: Descriptive test namestest('returns empty array when no markets match query', () => { })test('throws error when OpenAI API key is missing', () => { })test('falls back to substring search when Redis unavailable', () => { })
// FAIL: BAD: Vague test namestest('works', () => { })test('test search', () => { })

코드 스멜 감지

다음 안티패턴을 주의하세요:

1. 긴 함수

typescript
// FAIL: BAD: Function > 50 linesfunction processMarketData() {  // 100 lines of code}
// PASS: GOOD: Split into smaller functionsfunction processMarketData() {  const validated = validateData()  const transformed = transformData(validated)  return saveData(transformed)}

2. 깊은 중첩

typescript
// FAIL: BAD: 5+ levels of nestingif (user) {  if (user.isAdmin) {    if (market) {      if (market.isActive) {        if (hasPermission) {          // Do something        }      }    }  }}
// PASS: GOOD: Early returnsif (!user) returnif (!user.isAdmin) returnif (!market) returnif (!market.isActive) returnif (!hasPermission) return
// Do something

3. 매직 넘버

typescript
// FAIL: BAD: Unexplained numbersif (retryCount > 3) { }setTimeout(callback, 500)
// PASS: GOOD: Named constantsconst MAX_RETRIES = 3const DEBOUNCE_DELAY_MS = 500
if (retryCount > MAX_RETRIES) { }setTimeout(callback, DEBOUNCE_DELAY_MS)

기억하세요: 코드 품질은 타협할 수 없습니다. 명확하고 유지보수 가능한 코드가 빠른 개발과 자신감 있는 리팩터링을 가능하게 합니다.

Source and attribution

Source:affaan-m/ECCindocs/ko-KR/skills/coding-standardsat commitef648e0

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal