6.7 KiB

Raw Blame History

코드 리팩토링 및 문서화 과제

학습 목표

이 과제를 완료하면 전문 개발자가 일상적으로 사용하는 필수 소프트웨어 개발 기술을 연습할 수 있습니다. 유지보수성을 위해 코드를 구성하고, 추상을 통해 중복을 줄이며, 향후 개발자(자신 포함)를 위해 작업을 문서화하는 법을 배우게 됩니다.

깔끔하고 잘 문서화된 코드는 여러 개발자가 협업하고 코드베이스가 시간이 지남에 따라 발전하는 실제 웹 개발 프로젝트에서 매우 중요합니다.

과제 개요

은행 앱의 app.js 파일은 로그인, 회원가입, 대시보드 기능이 추가되면서 상당히 커졌습니다. 전문 개발 관행을 사용하여 이 코드를 리팩토링하여 가독성, 유지보수성 향상 및 중복 감소를 꾀할 때입니다.

지침

현재 app.js 코드를 다음 세 가지 핵심 리팩토링 기법을 구현하여 변환하세요:

1. 구성 상수 추출

과제: 파일 상단에 재사용 가능한 상수들을 모아 구성 섹션을 만드세요.

구현 안내:

여러 곳에서 하드코딩된 서버 API 기본 URL을 추출하세요.
여러 함수에 등장하는 에러 메시지에 대한 상수를 만드세요.
반복적으로 사용되는 경로(route)와 요소(ID)도 추출하는 것을 고려하세요.

예시 구조:

// 구성 상수
const API_BASE_URL = 'http://localhost:5000/api';
const ROUTES = {
  LOGIN: '/login',
  DASHBOARD: '/dashboard'
};

2. 통합 요청 함수 만들기

과제: createAccount()와 getAccount() 사이의 중복 코드를 제거하는 재사용 가능한 sendRequest() 함수를 작성하세요.

요구사항:

GET 및 POST 요청 처리
적절한 오류 처리 포함
다양한 URL 엔드포인트 지원
선택적 요청 본문 데이터 허용

함수 시그니처 안내:

async function sendRequest(endpoint, method = 'GET', data = null) {
  // 여기에 구현하세요
}

3. 전문적인 코드 문서화 추가

과제: 논리 뒤에 있는 "이유"를 명확하게 설명하는 유용한 주석으로 코드를 문서화하세요.

문서화 기준:

함수 목적, 매개변수, 반환 값을 설명하는 함수 문서 추가
복잡한 로직이나 비즈니스 규칙에 대한 인라인 주석 포함
관련 함수들을 섹션 헤더로 묶기
명확하지 않은 코드 패턴이나 브라우저 특이 워크어라운드 설명

예시 문서화 스타일:

/**
 * Authenticates user and redirects to dashboard
 * @param {Event} event - Form submission event
 * @returns {Promise<void>} - Resolves when login process completes
 */
async function login(event) {
  // 기본 폼 제출을 방지하고 자바스크립트로 처리합니다
  event.preventDefault();
  
  // 당신의 구현...
}

성공 기준

리팩토링된 코드는 다음과 같은 전문 개발 관행을 보여야 합니다:

모범 구현

✅ 상수: 모든 매직 문자열과 URL이 명확한 이름의 상수로 추출됨
✅ DRY 원칙: 공통 요청 로직이 재사용 가능한 sendRequest() 함수로 통합됨
✅ 문서화: 함수에 목적 및 매개변수를 설명하는 명확한 JSDoc 주석 존재
✅ 구성: 섹션 헤더 및 일관된 포맷팅으로 논리적으로 코드가 그룹화됨
✅ 오류 처리: 새 요청 함수를 이용해 향상된 오류 처리 구현

적절한 구현

✅ 상수: 반복값 대부분이 추출되었으며, 일부 하드코딩 값이 남음
✅ 팩터화: 기본 sendRequest() 함수 작성되었으나 모든 예외를 처리하지 못할 수 있음
✅ 주석: 주요 함수 문서화는 되어 있으나 일부 설명이 미흡할 수 있음
✅ 가독성: 대체로 잘 조직된 코드이나 개선 여지가 있음

개선 필요

❌ 상수: 많은 매직 문자열과 URL이 여전히 하드코딩되어 있음
❌ 중복: 유사 함수 간 중복 코드가 여전히 많음
❌ 문서화: 함수 목적을 설명하지 않는 부족하거나 부적절한 주석
❌ 구성: 명확한 구조와 논리적 그룹화가 부족함

리팩토링된 코드 테스트

리팩토링 후 다음을 확인하세요:

모든 사용자 흐름 테스트: 회원가입, 로그인, 대시보드 표시, 오류 처리
API 호출 검증: sendRequest() 함수가 계정 생성과 조회에 모두 정상 동작하는지 확인
오류 시나리오 확인: 잘못된 자격 증명 및 네트워크 오류 테스트
콘솔 출력 검토: 리팩토링 과정에서 새로운 오류가 없는지 확인

제출 지침

리팩토링된 app.js 파일을 제출할 때는:

서로 다른 기능을 구성하는 명확한 섹션 헤더 포함
일관된 코드 포맷과 들여쓰기 유지
모든 함수에 대해 완전한 JSDoc 문서 제공
상단에 리팩토링 접근법을 간략히 설명하는 주석 포함

추가 도전 과제: 앱 아키텍처 및 함수들 간 상호작용을 설명하는 간단한 코드 문서화 파일(CODE_STRUCTURE.md) 작성하기

실무 연관성

이 과제는 전문 개발자가 정기적으로 수행하는 코드 유지보수 작업을 반영합니다. 업계에서는:

코드 리뷰가 이 과제처럼 가독성과 유지보수성을 평가합니다
기술 부채는 코드가 정기적으로 리팩토링 및 문서화되지 않을 때 누적됩니다
팀 협업은 새로운 팀원이 이해할 수 있는 명확하고 잘 문서화된 코드에 달려 있습니다
버그 수정은 적절한 추상화가 된 잘 조직된 코드베이스에서 훨씬 수월합니다

여기서 연습하는 상수 추출, 중복 제거, 명확한 문서화 기술은 전문 소프트웨어 개발의 기본 중 기본입니다.

면책 조항:
이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있지만, 자동 번역에는 오류나 부정확한 부분이 있을 수 있음을 유의하시기 바랍니다. 원문 문서는 해당 언어의 공식적인 출처로 간주되어야 합니다. 중요한 정보에 대해서는 전문적인 인간 번역을 권장합니다. 본 번역 사용으로 인한 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.

6.7 KiB Raw Blame History