리액트로 대출 EMI 계산기 만들고 GitHub Pages에 배포하기
2024-11-26 01:33:03대출 EMI 계산기란 무엇인가?
대출 EMI(Equated Monthly Installment) 계산기는 대출을 받을 때 매달 납부해야 할 금액을 계산하는 도구로, 특히 대출 상품을 이용하는 데 필수적인 요소입니다. 이 계산기를 사용하여 대출과 관련된 재정적 의무를 쉽게 이해할 수 있습니다. 오늘은 리액트를 사용하여 대출 EMI 계산기를 만드는 방법을 소개하고, GitHub Pages에 배포하는 방법에 대해 자세히 알아보겠습니다. 이렇게 하면 개인적인 금융 관리에 큰 도움이 될 것입니다.
목차
- 리액트 프로젝트 설정
- EMI 계산 공식을 이해하기
- 사용자 인터페이스(UI) 구축하기
- GitHub Pages에 배포하기
- 결론 및 다음 단계
리액트 프로젝트 설정
리액트 애플리케이션을 설정하는 첫 단계는 워크스페이스와 프로젝트를 구성하는 것입니다. 아래의 단계에 따라 리액트 프로젝트를 쉽게 구축할 수 있습니다.
pnpm create vite
# 안내에 따라 진행합니다
cd [프로젝트 폴더 이름]
pnpm install
pnpm run dev
이 명령어들은 프로젝트의 기본 템플릿을 생성하고 개발 서버를 실행합니다. 이제 기본적인 리액트를 사용할 준비가 완료되었습니다.
EMI 계산 공식을 이해하기
EMI를 계산하는 공식은 다음과 같습니다:
[
EMI = \frac{P \times R \times (1 + R)^N}{(1 + R)^N - 1}
]
여기서:
- (P) = 대출 원금
- (R) = 월 이자율 (연 이자율 / 12 / 100)
- (N) = 대출 기간 (개월)
이 공식을 기반으로 EMI 계산기를 만들기 위해 src/utils/calculateLoanDetails.js 파일에 유틸리티 함수를 작성하겠습니다.
export function calculateLoanDetails(principal, annualRate, tenureYears) {
const monthlyRate = annualRate / 12 / 100;
const tenureMonths = tenureYears * 12;
const emi =
(principal * monthlyRate * Math.pow(1 + monthlyRate, tenureMonths)) /
(Math.pow(1 + monthlyRate, tenureMonths) - 1);
const totalAmount = emi * tenureMonths;
const totalInterest = totalAmount - principal;
return {
monthlyEMI: emi.toFixed(2),
totalPrincipal: principal.toFixed(2),
totalInterest: totalInterest.toFixed(2),
totalAmount: totalAmount.toFixed(2),
};
}
위의 함수는 대출의 원금, 연 이자율, 대출 기간을 입력으로 받아 EMI를 계산하고, 결과를 객체 형태로 반환합니다.
사용자 인터페이스(UI) 구축하기
이제 App.js 파일을 수정하여 사용자 입력을 받을 수 있는 폼과 계산 결과를 표시할 UI를 만들어 보겠습니다.
import React, { useState } from 'react';
import { calculateLoanDetails } from './utils/calculateLoanDetails';
function App() {
const [principal, setPrincipal] = useState('');
const [rate, setRate] = useState('');
const [tenure, setTenure] = useState('');
const [result, setResult] = useState(null);
const handleCalculate = () => {
const details = calculateLoanDetails(Number(principal), Number(rate), Number(tenure));
setResult(details);
};
return (
<div style={{ padding: '20px' }}>
<h1>대출 EMI 계산기</h1>
<div>
<label>원금: </label>
<input
type="number"
value={principal}
onChange={(e) => setPrincipal(e.target.value)}
/>
</div>
<div>
<label>연 이자율(%): </label>
<input
type="number"
value={rate}
onChange={(e) => setRate(e.target.value)}
/>
</div>
<div>
<label>대출 기간(년): </label>
<input
type="number"
value={tenure}
onChange={(e) => setTenure(e.target.value)}
/>
</div>
<button onClick={handleCalculate}>EMI 계산하기</button>
{result && (
<div>
<h2>결과:</h2>
<p>월별 EMI: ₹{result.monthlyEMI}</p>
<p>총 이자: ₹{result.totalInterest}</p>
<p>총 상환 금액: ₹{result.totalAmount}</p>
</div>
)}
</div>
);
}
export default App;
위 코드로 우리는 사용자가 대출 정보를 입력하고 결과를 시각적으로 확인할 수 있는 간단한 UI를 구현했습니다. 다양한 대출 상품에 대한 계산이 가능하도록 디자인되어 있습니다.
GitHub Pages에 배포하기
이제 계산기가 준비되었으니, GitHub Pages에 배포해 보겠습니다. 무료로 호스팅할 수 있으며, 아래의 단계에 따라 진행하겠습니다.
GitHub Pages 패키지 설치하기
먼저 gh-pages 패키지를 프로젝트에 추가합니다.
npm install gh-pages --save-dev
package.json 구성하기
다음으로, package.json 파일에 아래와 같은 설정을 추가합니다.
"homepage": "https://<your-username>.github.io/loan-emi-calculator",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
‘’ 부분에 본인의 GitHub 사용자명을 입력해야 합니다.
애플리케이션 배포하기
이제 Git 저장소를 초기화하고 원격 저장소를 추가한 후 배포합니다.
git init
git remote add origin https://github.com/<your-username>/loan-emi-calculator.git
npm run deploy
이 과정을 완료하면 https://.github.io/loan-emi-calculator에서 애플리케이션을 확인할 수 있습니다! 🎉
결론 및 다음 단계
여분의 기능을 추가하여 더 발전된 EMI 계산기를 만들어 볼 수 있습니다. 몇 가지 아이디어는 다음과 같습니다:
- 다양한 통화 지원 추가
- 전체 상환 계획(암호화.schedule) 추가하여 월별 상세 내역 제공하기
축하합니다! 리액트와 GitHub Pages를 이용해 대출 EMI 계산기를 성공적으로 구축하고 배포하셨습니다. 이 앱을 통해 다른 사람들에게도 금융 결정에 도움이 되길 바랍니다! 🚀
추가적인 튜토리얼을 원하신다면 제 YouTube 채널을 구독하고 GitHub에서 저를 팔로우해 주세요.
자세한 내용은 아래의 링크에서 확인해 보세요: