나의 React 여정: 20일차

예산 추적기 프로젝트

오늘은 Budget Tracker라는 프로젝트를 진행했습니다. 이 프로젝트의 목표는 이전에 배운 개념을 실용적이고 기능적인 방식으로 적용하는 것이었습니다. 제가 구현한 개념과 이를 통해 제 기술이 어떻게 향상되었는지에 대한 개요는 다음과 같습니다.

개념 학습 및 적용

1.HTML 구조와 의미

• 예산 추적기에 의미 있고 잘 구조화된 HTML 레이아웃을 사용하여 명확성과 손쉬운 유지 관리를 보장했습니다. 예를 들어, 테이블 요소는 예산 항목을 구성하는 데 사용되었으며 데이터 수집을 위해 입력 필드가 추가되었습니다.

2.스타일링을 위한 CSS
기능성과 미적 측면 모두를 고려하여 프로젝트 스타일을 지정하는 방법을 배웠습니다.

• .budget-tracker, .input 및 .delete-entry와 같은 클래스를 사용하여 UI를 디자인하고 구성했습니다.
• 반응형 디자인 원칙에 중점을 두고 추적기가 다양한 화면 크기에서 작동하도록 보장합니다.
• 상호작용을 개선하기 위해 .delete-entry와 같은 버튼에 호버 효과를 추가했습니다.

3.JavaScript 모듈

• 별도의 BudgetTracker.js 클래스를 생성하여 JavaScript를 모듈화했습니다. 이를 통해 코드 재사용성과 문제 분리가 향상되었습니다.

4.로컬 저장소

• 세션 전반에 걸쳐 예산 항목을 유지하기 위해 로컬 저장소를 구현했습니다. 사용자는 데이터 손실 없이 앱을 다시 로드할 수 있습니다.

localStorage.setItem("budget-tracker-entries-dev", JSON.stringify(data));

5.동적 DOM 조작

• JavaScript를 사용하여 예산 표에서 행을 동적으로 생성하고 업데이트했습니다.

this.root.querySelector(".entries").insertAdjacentHTML("beforeend", BudgetTracker.entryHtml());

6.이벤트 처리
저는 이벤트 리스너를 사용하여 앱을 대화형으로 만들었습니다. 예:

• '새 항목' 버튼을 클릭하면 새 행이 추가됩니다.
• '삭제' 버튼을 클릭하면 행이 제거됩니다.

row.querySelector(".delete-entry").addEventListener("click", e => {
    this.onDeleteEntryBtcClick(e);
});

7.데이터 유효성 검사 및 형식 지정

• 총 수입 또는 지출을 계산하는 논리를 적용하고 Intl.NumberFormat을 사용하여 적절한 형식으로 표시했습니다.

const totalFormatted = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD"
}).format(total);

8.버전 관리 및 디버깅

• 브라우저 개발 도구를 사용하여 오류를 디버그하고 동적 구성 요소의 동작을 검사했습니다.

사업 성과

이 프로젝트를 통해 다음 사항에 대해 더 깊이 이해하게 되었습니다.

• HTML과 CSS를 사용하여 사용자 친화적인 인터페이스를 디자인합니다.
• JavaScript 로직을 통합하여 데이터를 동적으로 처리합니다.
• 프로젝트 확장을 위한 코드 모듈성의 중요성
• 로컬 저장소를 사용하여 상태를 유지합니다.

빈 입력 필드를 처리하고 정확한 계산을 보장하는 등의 어려움에 직면하면서 이 프로젝트를 통해 문제 해결 능력도 향상되었습니다.

추적기는 날짜, 설명, 유형 및 금액에 대한 입력 필드와 총 잔액을 표시하는 동적 요약 섹션으로 구성됩니다.

이 프로젝트를 통해 실제 애플리케이션 구축에 대한 자신감이 더욱 강화되었습니다! ?

React Native에 뛰어들 준비가 되었습니다

위 내용은 나의 React 여정: 20일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!