React로 주식 시장 앱 구축

Stock Market API와 ReactJS를 함께 사용하시겠습니까? <3

이것은 REST API 세계에 대한 매우 기본적인 애플리케이션입니다. 이 블로그를 통해 REST API를 사용하는 기본적인 요령을 터득하게 될 것입니다.

이 앱을 빌드하기 위해 codesandbox.io를 사용하고 있습니다.

다음은 이 애플리케이션의 최종 출력을 엿보는 것입니다.


좋아! cooooddiiinngg에 들어가 봅시다.

심상

먼저 정확히 무엇을 만들 것인지 시각화해 볼까요?

JSX 설정

        <header>
          <h2>Stock Calculator</h2>
        </header>

만세! 헤더가 설정되었습니다. 좋아, 흥분을 가라앉히고 이제 손을 더럽히자.

이제 나머지 JSX 요소를 만들어 보겠습니다.

       <input
         placeholder="Stock Name"
         onInput={(event) => setStock(event.target.value)}
        />

        <input
          placeholder="Purchased Price"
          onInput={(event) => setPurchasedPrice(event.target.value)}
        />

        <input
          placeholder="Quantity Purchased"
          onInput={(event) => setQuantityPurchased(event.target.value)}
        />

        <button onClick={clickHandler}
          Submit
        </button>

        <p id="output"> 
         {output}
        </p>

이제 { useState }를 가져오지 않았고 관련 변수에 대한 useState를 초기화하지 않았기 때문에 수많은 오류 메시지가 표시될 것입니다.

그럼 그렇게 해볼까요? :디

  const [stock, setStock] = useState("");
  const [purchasedPrice, setPurchasedPrice] = useState("");
  const [quantityPurchased, setQuantityPurchased] = useState("");
  const [output, setOutput] = useState("");

API와 통합

이 블로그의 목적으로 사용하는 API는 finnhub.io에서 가져온 것입니다. 이 특정 API를 선택한 특별한 이유는 없습니다. 이것이 제가 처음 찾은 것이었고 통합하기가 충분히 쉬웠습니다! :디

finnhub에서 API 키/토큰 받기
Finnhub.io --> 무료 API 키 받기 --> API 키 복사

완료되면 Finnhub.io --> Documentation --> Stock Price --> Quote로 진행할 수 있습니다.

의문 사항이 있는 경우 문서를 참조할 수 있습니다.
어쨌든 충분한 이야기, 코딩으로 가자! :)

  const url = "https://finnhub.io/api/v1/quote?";

  function stockURL(stock) {
    let name = stock.toUpperCase();
    return url + "symbol=" + name + "&token=c07um4f48v6uu9ck9l4g";
  }

API의 URL을 정의한 다음 토큰 키와 함께 원하는 주식의 이름이 있는 URL로 반환되는 함수를 만들었습니다.

이제 Fetch Call에 들어갑시다.

// clickHandler() is the function that gets called when we press the Submit button

function clickHandler() {
    // Point 1
    fetch(stockURL(stock))
      //Point 2
      .then((response) => response.json())
      //Point 3
      .then((event) => {
        let currentPrice = event.c;
        //Point 4
        let totalPastPrice = parseInt(purchasedPrice) * parseInt(quantityPurchased);
        let totalCurrentPrice = parseInt(currentPrice) * parseInt(quantityPurchased);

        let balance = totalCurrentPrice - totalPastPrice;

        // Point 5
        if (balance > 0) {
        let percentage = (
            (parseInt(quantityPurchased) / parseInt(purchasedPrice)) *
            100
          ).toFixed(2);
          setOutput(
            `You made a profit of ${percentage} which amounts to $ ${balance} `
          );} 


       else if (balance < 0) {
          var percentage = (
            (parseInt(purchasedPrice) / parseInt(quantityPurchased)) *
            100
          ).toFixed(2);
          setOutput(
            `You made a loss of ${percentage}% which amounts to $${-balance} `
          );} 


     else setOutput("You made neither a profit nor a loss.");
      })

      //Point 6
      .catch((event) => alert("There is something wrong with the server"));}

가져오기는 "stock"인수와 함께 stockURL 함수를 호출합니다. 입력란을 통해 사용자로부터 "주식"의 값을 받습니다. 그런 다음 stockURL 함수는 주식 이름과 토큰 키로 구성된 URL을 반환합니다.

이제 반환된 URL의 모든 데이터를 json 형식으로 변환하도록 가져오기 호출에 지시합니다.

주어진 json 형식에서 주식의 "현재 가격"에 표시된 대로 "c"의 데이터만 가져옵니다. 다른 값도 반환할 수 있습니다. (다른 값은 설명서 참조)

사용자로부터 받은 입력을 기반으로 totalPastPrice, totalCurrentPrice를 계산합니다(setPurchasedPrice & setQuantityPurchased는 사용자가 입력 상자에 입력할 때 이미 완료됨). 그런 다음 잔액이 계산됩니다.

잔액이 긍정적인 경우 즉. 사용자는 이익을 얻었습니다. 백분율을 찾습니다. parseInt는 문자열을 숫자로 변환하는 데 사용되며 toFixed(2)는 반올림 및 소수 자릿수를 2로 제한하는 데 사용됩니다.
이제 setOutput 즉. 출력 상자에 표시합니다. 균형 음수 및 0에 대해 유사한 프로세스가 발생합니다.

서버에 문제가 있거나 서버에 과부하가 걸린 경우 동일한 내용을 나타내는 경고 상자가 사용자에게 표시됩니다.

만세! 그게 다야.

이제 CSS를 추가하고 원하는 대로 스타일을 지정할 수 있습니다. 사용자가 목록에서 주식을 선택할 수 있도록 추가할 수도 있습니다.

Click here 라이브 데모 링크.

면책 조항: 저는 웹 개발 세계의 완전한 초보자입니다. 따라서 모범 사례를 연습하지 않은 경우 알려주십시오. 그러면 기꺼이 수정하겠습니다. :디

나는 여행과 경험을 와 에 기록합니다.