리액트로 대출 EMI 계산기 만들고 GitHub Pages에 배포하기

2024-11-26 01:33:03

webdevjavascriptreactbeginners

대출 EMI 계산기란 무엇인가?

대출 EMI(Equated Monthly Installment) 계산기는 대출을 받을 때 매달 납부해야 할 금액을 계산하는 도구로, 특히 대출 상품을 이용하는 데 필수적인 요소입니다. 이 계산기를 사용하여 대출과 관련된 재정적 의무를 쉽게 이해할 수 있습니다. 오늘은 리액트를 사용하여 대출 EMI 계산기를 만드는 방법을 소개하고, 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에서 저를 팔로우해 주세요.

자세한 내용은 아래의 링크에서 확인해 보세요:

R_11