UPBIT API를 이용한 웹사이트 개발

안녕하세요! 오늘은 "코인 트래커"라는 웹 애플리케이션을 만들고 배포하는 과정을 공유하려고 합니다.
이 프로젝트는 간단한 HTML, CSS, JavaScript를 사용하여 만든 웹 애플리케이션으로, Upbit API를 활용해 실시간으로 코인 정보를 조회할 수 있습니다.

---

주요 기능 소개

1. 실시간 코인 데이터 조회

• Upbit API를 활용하여 실시간으로 코인 데이터를 가져옵니다.
• 상승 및 하락 TOP 5 코인을 별도로 표시합니다.

2. 포트폴리오 관리

• 사용자가 자신이 보유한 코인의 포트폴리오를 추가하고 관리할 수 있습니다.
• 구매 가격과 수익률 등을 계산하여 보여줍니다.

3. 광고 배너

• 상단, 하단, 사이드 배너를 통해 광고를 삽입하였습니다.
• 검색 및 스크롤 이벤트에 따라 광고 위치가 동적으로 변경됩니다.

---

프로젝트 구조

파일 구조

coin-tracker/
├── index.html        # 메인 HTML 파일
├── style.css         # 스타일 파일
├── script.js         # 주요 JavaScript 로직
├── portfolio.js      # 포트폴리오 관련 로직

---

주요 코드 설명

1. Upbit API를 이용한 실시간 데이터 가져오기

// 모든 코인 목록 가져오기
async function fetchMarketData() {
    const url = "https://api.upbit.com/v1/market/all";

    try {
        const response = await fetch(url);
        const markets = await response.json();
        allMarkets = markets.filter((market) => market.market.startsWith("KRW-"));
        console.log("모든 코인 목록:", allMarkets);
    } catch (error) {
        console.error("코인 목록을 가져오는 데 실패했습니다:", error);
    }
}

// 실시간 코인 데이터 가져오기
async function fetchCoinData() {
    const marketList = allMarkets.map((market) => market.market).join(",");
    const url = `https://api.upbit.com/v1/ticker?markets=${marketList}`;

    try {
        const response = await fetch(url);
        coinData = await response.json();
        displayCoinList(coinData);
    } catch (error) {
        console.error("데이터를 가져오는 데 실패했습니다:", error);
    }
}

---

2. 포트폴리오 관리 기능

let portfolio = []; // 포트폴리오 데이터 저장

function addPortfolioItem(coinName, quantity, purchasePrice) {
    portfolio.push({ coinName, quantity, purchasePrice });
    updatePortfolioTable();
}

function updatePortfolioTable() {
    const tableBody = document.querySelector("#portfolio-table tbody");
    tableBody.innerHTML = portfolio.map((item) => {
        const profit = ((item.quantity * currentPrice) - (item.quantity * item.purchasePrice)) / (item.quantity * item.purchasePrice) * 100;
        return `
            <tr>
                <td>${item.coinName}</td>
                <td>${item.quantity}</td>
                <td>${item.purchasePrice.toFixed(2)}</td>
                <td>${(item.quantity * currentPrice).toFixed(2)}</td>
                <td>${profit.toFixed(2)}%</td>
            </tr>`;
    }).join("");
}

---

배포 방법

GitHub Pages를 이용한 배포

1. GitHub 저장소를 생성합니다.
2. 프로젝트 파일을 업로드합니다.
3. 저장소의 Settings > Pages에서 배포 브랜치를 선택합니다.
4. 배포 URL을 통해 프로젝트를 확인할 수 있습니다.

Vercel을 이용한 배포

1. Vercel에 접속하여 로그인합니다.
2. 프로젝트를 업로드하거나 GitHub와 연동합니다.
3. 자동으로 배포 URL이 생성됩니다.

---

 

이 프로젝트는 실시간 데이터 처리, 광고 배치 등 다양한 기능을 포함하고 있습니다.
코딩 초보자부터 숙련자까지 모두 도전해볼 수 있는 좋은 예제입니다.
더 나은 개선점이나 질문이 있다면 댓글로 남겨주세요!

감사합니다! :)


https://cointracker-topaz.vercel.app/

코인트래커