Json Server 사용법

📚

메인 프로젝트 진행할 때 임의로 계좌 리스트를 불러오고싶었다.
방법을 찾던 중 팀원분이 Json Server를 알려주셔서 진행해봤다.

🔍 Json 서버 설치

Json Server 공식 문서를 통해 install 후 client/src/data경로 안에 posts.json 파일을 생성했다.

{
  "account": [ //입출금게좌 리스트
    {
      "id": 1,
      "bank_name": "기업",
      "bank_amount": "500,000"
    },
    {
      "id": 2,
      "bank_name": "우리",
      "bank_amount": "3,000,000"
    },
    {
      "id": 3,
      "bank_name": "국민",
      "bank_amount": "20,000,000"
    },
    {
      "id": 4,
      "bank_name": "국민",
      "bank_amount": "1,200,000"
    }
  ],
  "stock": [ // 증권 계좌
    {
      "id": 1,
      "stock_name": "우리",
      "stock_amount": "300,000"
    },
    {
      "id": 2,
      "stock_name": "기업",
      "stock_amount": "7,000,000"
    },
    {
      "id": 3,
      "stock_name": "국민",
      "stock_amount": "1,200,000"
    },
    {
      "id": 4,
      "stock_name": "국민",
      "stock_amount": "1,200,000"
    }
  ]
}

post.json 파일에 다음과 같이 데이터를 작성 후 터미널에 명령어를 입력해 서버를 실행시켰다.

npx json-server --watch posts.json

이때 터미널 경로를 posts.json파일이 있는 폴더까지 cd 한 후 실행해야한다.

🔍 입출금 계좌 컴포넌트에 적용

import styled from "styled-components";
import axios from "axios";
import {useState, useEffect, useRef} from "react";
import DeleteIcon from "../../assets/delete.svg";
import YellowLeft from "../../assets/yellowleft.svg";
import YellowRight from "../../assets/yellowright.svg";

interface Item {
  id: number;
  bank_name: string;
  bank_amount: number;
}

const Main = styled.div`
  display: flex;
  flex-direction: column;
  margin-top: 5%;
`;

const Title = styled.div`
  font-size: 5rem;
  color: #414141;
  font-weight: 600;
`;

const SavingAccountList = styled.div`
  display: flex;
`;

const SavingAccountContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 8vh;
  width: 8vw;
  border-radius: 3rem;
  box-shadow: 0px 4px 13px 0px rgb(0, 0, 0, 0.1);
  border: 1px solid #d9d9d9;
  padding: 3rem;
  margin: 5rem;
`;

const Top = styled.div`
  display: flex;
`;

const BankName = styled.p`
  font-size: 4rem;
  font-weight: 600;
  margin: 2rem;
  color: #414141;
`;

const Delete = styled.div`
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  background-image: url(${DeleteIcon});
  background-size: cover;
  background-repeat: no-repeat;
  margin-left: 10rem;
`;

const BankAmount = styled.p`
  font-size: 4rem;
`;

const PageButton = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`;

const LeftButton = styled.img`
  cursor: pointer;
  margin-right: 5rem;
`;

const RightButton = styled.img`
  cursor: pointer;
  margin-left: 5rem;
`;

export default function SavingAccount() {
  const [data, setData] = useState<Item[]>([]);
  const [displayedData, setDisplayedData] = useState<Item[]>([]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const SavingAccountBoxRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    getData();
  }, []);

  useEffect(() => {
    if (data.length > 0) {
      setDisplayedData(data.slice(currentIndex, currentIndex + 3));
    }
  }, [data, currentIndex]);

  const getData = async () => {
    try {
      const response = await axios.get("http://localhost:3000/account");
      const data = response.data;
      setData(data);
    } catch (error) {
      console.log(error);
    }
  };

  const handleDelete = async (id: number) => {
    try {
      await axios.delete(`http://localhost:3000/account/${id}`);
      getData();
    } catch (error) {
      console.log(error);
    }
  };

  const handlePrevious = () => {
    if (currentIndex > 0) {
      setCurrentIndex(currentIndex - 3);
    }
  };

  const handleNext = () => {
    if (currentIndex + 3 < data.length) {
      setCurrentIndex(currentIndex + 3);
    }
  };

  return (
    <Main ref={SavingAccountBoxRef}>
      <Title>입출금 계좌</Title>
      <SavingAccountList>
        {displayedData.map((item: Item) => (
          <SavingAccountContainer key={item.id}>
            <Top>
              <BankName>{item.bank_name}</BankName>
              <Delete onClick={() => handleDelete(item.id)} />
            </Top>
            <BankAmount>{item.bank_amount}원</BankAmount>
          </SavingAccountContainer>
        ))}
      </SavingAccountList>
      <PageButton>
        <LeftButton src={YellowLeft} alt="Left" onClick={handlePrevious} />
        <RightButton src={YellowRight} alt="Right" onClick={handleNext} />
      </PageButton>
    </Main>
  );
}

확실히 임의로 데이터를 만들고 컴포넌트 작업을 하니 시간이 단축되었고 눈으로 변하는 모습을 보기가 쉬워 컴포넌트 배치 또한 수월했다.