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

## 학습 목표

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

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

## 과제 개요

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

## 지침

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

### 1. 구성 상수 추출

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

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

**예시 구조:**
```javascript
// 구성 상수
const API_BASE_URL = 'http://localhost:5000/api';
const ROUTES = {
  LOGIN: '/login',
  DASHBOARD: '/dashboard'
};
```

### 2. 통합 요청 함수 만들기

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

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

**함수 시그니처 안내:**
```javascript
async function sendRequest(endpoint, method = 'GET', data = null) {
  // 여기에 구현하세요
}
```

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

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

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

**예시 문서화 스타일:**
```javascript
/**
 * 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이 여전히 하드코딩되어 있음
- ❌ **중복**: 유사 함수 간 중복 코드가 여전히 많음
- ❌ **문서화**: 함수 목적을 설명하지 않는 부족하거나 부적절한 주석
- ❌ **구성**: 명확한 구조와 논리적 그룹화가 부족함

## 리팩토링된 코드 테스트

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

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

## 제출 지침

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

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

## 실무 연관성

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

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

---

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