🔥 사내 스터디 프로젝트 기록 : 국내 및 해외 가상자산 코인 거래소들의 거래량을 한 눈에 ? 👀

취업 이후로는 처음 작성해보는 사이드 프로젝트 회고록 입니다.
사내에서 던져준 주제로 작업한 스터디용 프로젝트이며 제가 작업한 코드의 일부만 공개하여 트레이드 오프(Trade-Off)와 기술 공유의 목적으로 포스팅 해볼까 합니다.

🔥 프로젝트 개요

• 국내 및 해외 가상자산 코인 거래소들의 거래량 순위를 실시간으로 제공해주는 페이지를 클론 코딩하는 사내 스터디용 프로젝트 입니다.

👥 참여 멤버 (총 3명)

• 프론트엔드 개발자 : 1명 나 ✋
• 백엔드 개발자 : 2명 (Batch 데이터 수집 / API 개발)

⏰ 개발 기간 (6주)

아무래도 업무가 먼저인지라 스터디용 프로젝트인 이것은 러프하게 잡아 6주 정도 소요됐다. 매주 화요일 목요일 2회 씩 스크럼 하면서 각자 업무 진행도를 파악하고 시니어 분의 코드 리뷰를 통해 코드 개선점에 대한 피드백도 반영했다.

돌이켜보면 업무와 스터디 둘 다 병행하느라 힘들었지만 내가 하고싶은 기술이며 새로운 것들 알아가는 재미가 쏠쏠했다.

개발이 끝난 뒤, 세션 발표를 통해 개발그룹과 기획그룹 일원들에게 UX 적으로 개선한 점을 어필하고 코드는 왜 이렇게 짰는지 부가 설명과 Recoil이라는 기술 스택에 대해 기술 전파(?)하는 시간을 가졌다.

👍 목표

• 기술 스택 최신화 : 기존에는 PHP 환경으로 개발 됐던 페이지를 클론코딩 하면서 백엔드는 Java, 프론트는 React를 사용했다.
• BE : 백엔드에 대한 용어의 개념들을 어깨너머 알고싶었음
• 새로운 기술 습득 : 상태관리 기능의 기술 스택인 Recoil을 도입하여 이 기회에 내껄로 만들고자 했다.
• ✨ Clean Code ✨ : 어떻게 하면 깔끔하고 보기 좋은 코드를 짤 수 있을지에 대해 고민하면서 노력했다. 특히, 상용화하기 좋은 코드를 모듈화 하여 코드를 심플하게 하고자 했다.
• 활용도 좋은 컴포넌트 : FE 개발자라면 당연한 재활용 하기 좋은 컴포넌트 만들기..🧩
• UI/UX 개선 : 내가 클라이언트의 입장이 되어 불편한 부분들을 찾아 전부 개선 하자
• 실시간으로 변동되는 데이터를 어떻게 보여줄 것인지 고민

이 목표들 중심으로 작업을 완료시켰다. 스터디 진행하는 시간동안 백엔드 분들과 서로 윈윈인 시간이 되었음 좋을 것 같아 기술 나눔같은 느낌으로다가 스터디 초반에 리액트 프로젝트 초기 환경 세팅부터 기본적인 FE 개념들 자료를 준비해서 간략하게 설명하곤 했다.

(사실 그룹장님께서 프론트에 막 관심 갖던 시기셨음...! 은 비밀 🤫)

😐 그 당시에 준비했던 자료들, React 초기, 프로젝트 환경 Setting
https://velog.io/@leemember/FE-React-프로젝트-초기-Setting

🎳 기술스택

내가 정한 기술스택은 이러하다.
그동안 상태관리는 Redux, Mobx 밖에 쓸 줄 몰랐지만 이 기회에 Recoil을 써보면서 앞으로 Recoil만 쓰고싶을 정도로 편했다 👍😮

• React (라이브러리) ^18.2.0
• TypeScript (언어) ^4.7.4
• Recoil (상태관리) ^0.7.4
• yarn 1.22.19

Redux vs Mobx vs Recoil 비교글 + Recoil 사용법을 정리해본 글입니다 ! 📝
https://velog.io/@leemember/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-Recoil%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

🌈 기능 분석

👇 이 페이지를 클론코딩 할거다. 어떻게?

먼저, 리액트 스럽게 컴포넌트화 시키기 위해 화면을 보고 분석해서 쪼개봤다 🧐 밑에 표는 기존에는 <table> 태그로 작업 돼있던 것을 반응형으로도 구현해보고 싶어서 <div> 태그로 분리하여 작업했다.

1. 컴포넌트화

화면을 보고 어떻게 컴포넌트를 나눌지 고민한 뒤, 위 화면처럼 박스 표시 해둔 것을 기준으로 아래와 같은 파일 경로로 컴포넌트를 쪼갰다.

📦 src
 ┣ 📂 pages
 ┃ ┣ 📜 domestic.tsx 📍(국내 가상자산 코인거래소)
 ┃ ┣ 📜 global.tsx 📍(국내 및 국제 가상자산 코인거래소)
 ┣ 📂 lib
 ┃ ┣ 📜 type.ts 📍 (데이터 타입)
 ┃ ┣ 📜 api.ts 📍 (api 요청 모듈)
 ┃ ┣ 📜 day.ts 📍 (오늘 날짜)
 ┣ 📂 component
 ┃ ┣ 📂 Common
 ┃ ┃ ┣ 📜 Search.tsx 📍(날짜 입력 DatePicker)
 ┃ ┣ 📂 Global 📍(국내 및 국제 가상자산 코인거래소 페이지에만 쓰일 컴포넌트들)
 ┃ ┃ ┣ 📜 DomesticSummary.tsx 📍(국내 순위)
 ┃ ┃ ┣ 📜 GlobalSummary.tsx 📍(글로벌 순위)
 ┃ ┃ ┣ 📜 Header.tsx 📍(헤더에 있는 내용들)
 ┃ ┃ ┣ 📜 List.tsx 📍(각 거래소들의 거래액과 글로벌 점유율)
 ┃ ┣ 📂 Domestic 
 ┃ ┃ ┣ 📜 *.tsx (글로벌과 동일)

2. 실시간으로 변동되는 데이터

실시간으로 운영되는 거래소 장을 1분 간격으로 HTTP 요청을 날려 주기적으로 업데이트 시켰다. 이것을 Polling(폴링)이라고 한다.

// api 상태관리
/* ⭐️ useRecoilValue는 Recoil에서 제공되는 메서드로 읽기 전용의 기능을 합니다. 
그래서 useRecoilValue를 통해 초기 api 데이터를 불러오는데, 
여기서 parameter 값에 todayCall은 오늘의 날짜를 가공시킨 함수입니다.
*/
    const domesticRankings: Rank[] = useRecoilValue(getGlobalDomeRankListApi(todayCall));
    const globalRankingList: Rank[] = useRecoilValue(getGlobalRankListApi(todayCall));
    const globalTotal: TotalTypes = useRecoilValue(getGlobalTotalApi(todayCall));
    const globalCoinList: [CoinList][] = useRecoilValue(getGlobalCoinListApi(todayCall));
    // ⭐️ 데이터 피커에 날짜 선택 시, 그 날짜의 데이터 가져올 수 있도록 상태변경
    const clickDay = useRecoilValue(daySearch);
    
    // ⭐️ 랭킹 리스트
    // ⭐️ 페이지 진입하고 렌더링 하자마자 데이터들 보여지도록
    const [domeRanking, setDomeRanking] = useState<Rank[]>(domesticRankings);
    const [globalRanking, setGlobalRanking] = useState<Rank[]>(globalRankingList);
    const [total, setTotal] = useState<TotalTypes>(globalTotal);
    const [coinList, setCoinList] = useState<[CoinList][]>(globalCoinList);
    // ⭐️ 데이터피커에 있는 날짜를 클릭할 때
    const changeDay = clickDay.replaceAll('-', '');
    
// 📍api를 호출해주는 함수다. dayParams에는 날짜를 받아오도록 했다.
const globalState = async (dayParams: {}) => {
        const domesticRank = await fetcher(METHOD.GET, `/global/domesticRank?toDate=${dayParams}`);
        const globalRank = await fetcher(METHOD.GET, `/global/globalRank?toDate=${dayParams}`);
        const globalTotal = await fetcher(METHOD.GET, `/global/total?toDate=${dayParams}`);
        const coinList = await fetcher(METHOD.GET, `/global/coinList?toDate=${dayParams}`);

        setDomeRanking(domesticRank.data);
        setGlobalRanking(globalRank.data);
        setTotal(globalTotal.data);
        setCoinList(coinList.data);
    };
    
 useEffect(() => {
 		// 📍setInterval을 통해 1분 간격으로 데이터를 업데이트 (=Polling)
        let polling = setInterval(() => {
            globalState(todayCall);
        }, 60000);

		// 📍 만일에 데이터피커에 선택한 날짜가 오늘 날짜가 아니라면 polling이 끊기도록하고, 선택한 날짜의 데이터들이 보여지도록 조건문을 걸었다.
        if (clickDay.replaceAll('-', '') !== todayCall) {
            clearInterval(polling);
            globalState(changeDay);
        } else {
            globalState(changeDay);
        }

        // 📍 페이지에 벗어날 경우에도 polling X
        return () => {
            clearInterval(polling);
        };
    }, [clickDay]);

이처럼 setInterval을 사용하여 1분(=60000) 간격으로 데이터를 새롭게 불러왔다. 문제는 setInterval만을 사용해서 데이터를 불러오게 된다면 처음 페이지에 초기 진입 했을 때 아무런 데이터가 없는 상태에서 1분 뒤에 데이터가 나오게 될 것이다. 그래서 해결책으로 처음 페이지 진입 했을 때부터 데이터들이 렌더링 되도록 하기 위해 Recoil로 초기값을 데이터를 넣어줬다.

이렇게 함으로써 페이지 초기 진입시 렌더링 될 때 바로 데이터들이 보여지는 상태에서, setInterval로 하여금 1분 마다 새로운 데이터들이 보여질 수 있게 구현했다.

하지만, 데이터피커로 다른 날짜를 선택했을 때는 polling 끊어지도록 조건문을 달았음. (왜냐하면 과거 날짜는 이미 장이 끝났기 때문)

3. 모듈화 (코드 리팩토링)

상용화 할 수 있는 코드를 모듈화 시켜 코드를 간결하게 했다.

(1) API fetcher 모듈 -> API 요청 기능

import React from 'react';
import axios from 'axios';
import { METHOD } from './type';

const apis = axios.create({
    baseURL: `${process.env.REACT_APP_INDEX_SERVER_URL}`
});

const fetcher = async (method: METHOD, url: string) => {
    try {
        const res = await apis[method](url);
        return res.data;
    } catch (error: any) {
        //📍 데이터가 없음을 alert로 띄우고 페이지를 리로드
        alert('데이터가 없습니다.')
        location.reload();
        return error;
    }
};

export default fetcher;

사용법은 이런식으로 쓸 수 있다.

const domesticRank = await fetcher(METHOD.GET, `/global/domesticRank?toDate=${dayParams}`);

그리고 baseURL에 담긴 env 로컬 주소를 불러오기 위해서는, yarn add env-cmd를 설치하고 프로젝트 가장 상위 폴더에 .env-* 폴더를 생성한다. 그리고 baseURL에 가져오고자 하는 값을 넣어준다.

그리고 package.json을 수정해줘야 함 !

"scripts": {
        "start": "env-cmd -f .env-local react-scripts start",
        "build": "react-scripts build",
        "build:dev": "env-cmd -f .env-dev react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },

이렇게 scripts 안에 우선순위로 불러오고자 하는 env 환경 파일 순서대로 선언해주면 된다. 그리고 package.json 파일 코드 가장 하단에 "proxy": "api url 주소" 를 네트워크 통신할 api 주소를 기입하기

(2) 각 거래소의 거래액 합계내기

const coinSum = (arrName: any) => {
        const arrNum = _.map(arrName, 'volume');
        return <>{_.sum(arrNum).toLocaleString()}</>;
    };

• 거래액 합계를 쉽게 내기 위해서 lodash라는 라이브러리를 사용해서 모든 배열의 수를 합계내는 작업을 했다.

(3) 오늘 날짜 함수

const today = new Date();
const year = today.getFullYear();
const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);

📍 export const todayCall = year + month + day;

Today 함수도 api 콜 할때 요기죠기 자주 쓰여서 모듈화 했다.

4. DatePicker 컴포넌트 커스텀

기존에 작업된 페이지를 보면 날짜를 선택하는 기능은 없다. 기존에는 날짜를 직접 입력해야 하고 너무나도 불편했던 게 숫자와 (-) 하이픈도 직접 넣어서 데이터를 조회해야 되는 시스템이다. (ex) 2023-01-01 이런식으로 숫자와 하이픈 섞어가며 날짜를 입력한 뒤, 또 한번 '조회' 라는 버튼을 클릭해야 해당 날짜의 데이터가 보여진다.

그래서 나는 이러한 불편함을 없애고 심미성과 편리성 둘 다 잡기 위해 UI/UX적으로 개선시키고자 antd 라는 컴포넌트 라이브러리를 사용하여 DataPicker 를 가져온 뒤 커스텀하였다.

어떻게 커스텀 했냐면, 1️⃣ 조회하고자 하는 날짜를 클릭했을 때 바로 그 날짜의 끝난 장의 데이터들이 보여지도록 api url 파라미터 값에 Recoil atom으로 상태값을 제어하며 데이터를 조회시켰고 2️⃣ 오늘 날짜 이후로 미래 날짜는 선택할 수 없도록 비활성화했다. 그리고 오늘 장은 실시간 버튼 클릭 시 보여지도록 구현했다.

📍 Search.tsx (DatePicker 커스텀 컴포넌트)

import React from 'react';
import moment from 'moment';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { daySearch } from 'recoil/atom';
import { dayValue } from 'recoil/selector';
import type { DatePickerProps } from 'antd';
import { DatePicker } from 'antd';
import { todayCall } from 'lib/day';
import './styles.scss';

const Search = () => {
	// 📍 useSetRecoilState는 리코일에서 상태를 변경해주는 setter 역할이다.
    const setCurrent: any = useSetRecoilState(daySearch);
    const value = useRecoilValue(dayValue);

	// 📍 setCurrent에 담긴 daySearch 값을 클릭한 dateString의 값으로 변경한다.
    const onChangeDate: DatePickerProps['onChange'] = (date, dateString) => {
        setCurrent(`${dateString}`);
    };

    // 실시간
    const reloadButton = () => {
        setCurrent(todayCall);
    };

    return (
        <section className="search">
            <DatePicker
                onChange={onChangeDate}
                className="dataInput"
                // 📍 날짜 형식
                format="YYYY-MM-DD"
                placeholder="날짜를 선택해주세요."
                allowClear={false}
                value={value}
                // 📍 오늘 날짜 이후로 미래 날짜를 클릭하지 못하게 비활성화 시키는 방법
                disabledDate={(current: any) => {
                    // 이 날부터 ~ 이 날 까지만 선택 가능
                    return current.year() < 2020 || current >= moment().subtract(1, 'days').toDate();
                }}
            />
            <button className="btn-now" id="searchNowBtn" type="button" onClick={reloadButton}>
                실시간
            </button>
        </section>
    );
};

export default Search;

👇 결과물

⭐️ 참고자료 ⭐️
antd 👉 https://ant.design/components/date-picker#header
스택오버플로우 👉https://stackoverflow.com/questions/46358603/disable-date-and-time-for-antd-datepicker

5. 각 거래소 마다의 코인 리스트

import React from 'react';
import { CoinList, Rank } from 'lib/type';
import CoinNameList from './CoinNameList';
import ExchangeList from './ExchangeList';
import './styles.scss';

interface Props {
    coinList: [CoinList][];
    rankingList: Rank[];
}
const List = ({ coinList, rankingList }: Props) => {
    // 거래소 코인 리스트
    const arrDealList = () => {
        const list = [];
        for (let i = 0; i < coinList.length; i++) {
            list.push(<ExchangeList key={i} globalCoinList={coinList[i]} globalRank={rankingList[i]} />);
        }
        return list;
    };

    return (
        <div className="coinListBox">
            <CoinNameList coinName={coinList[0]} />
            {arrDealList()}
        </div>
    );
};

export default List;

부모 컴포넌트에서 뿌려주는 데이터를 받아 List 컴포넌트에 반복문을 돌려 코인리스트의 length 만큼 데이터를 불러오도록 했다.

👀 최종 결과물

♻️ 기존 페이지 (국내 거래소)

✅ 개선한 페이지 (국내 거래소)

♻️ 기존 페이지 (국내 및 국제 거래소)

✅ 개선한 페이지 (국내 및 국제 거래소)

🌀 개선한점 정리

• 깔끔한 UI로 가시성 좋은 화면을 제공했다.
  • 기존에 깨진 스타일도 보기좋게 개선 작업했다.
  • 반응형 iPad 까지 상용할 수 있도록 구현
• DatePicker 컴포넌트를 활용하여 사용자 편리성을 개선 시켰다.
  • DatePicker 구현할 때는 과거부터 현재 데이터만 조회할 수 있도록 했다.
  • 기존에는 조회 버튼을 클릭해야 데이터들이 조회 됐지만, 개선 후 날짜 클릭과 동시에 데이터들이 전환하여 효율성을 증대 시켰다.

러닝포인트

1️⃣ 제공되는 데이터 수치(배열, 객체)들을 핸들링 하는데 lodash라는 라이브러리를 사용해서 빠른 작업과 간결한 코드를 구현할 수 있었다. 그리고 이것은 퍼포먼스 측면에서도 native보다 더 나은 성능을 가졌다고 한다.
👉 참고자료 https://lodash.com/docs/4.17.15

2️⃣ 이 스터디를 하면서 내 목표였던 백엔드 개발자와 원활한 소통을 위한 백엔드 관련 개념 용어들을 숙지할 수 있었다. Batch 라는 것을 새롭게 알게 됐는데 이것은 과거의 데이터들을 집계하는 개념이다. 그래서 이걸로 하여금 거래소의 과거 데이터들을 수집할 수 있었던 것이었다. 그래서 각 날짜 별로 데이터를 응답 받을 때도 파라미터 혹은 쿼리스트링으로 날짜 구간을 상태관리 atom으로 데이터피커로 선택한 날짜를 받아 데이터를 응답받을 수 있었다. 그리고 Swagger와 PostMan 활용하는 법도 제대로 터득할 수 있었음 🤩

3️⃣ 상태관리 기술 스택으로 Recoil이라는 것을 사용해본 점.

4️⃣ env-cmd 를 활용하여 환경변수를 설정했다. 그래서 이를 통해 개발, QA 등등의 환경에서 사용할 환경변수 파일을 생성하여 상황에 맞게 package.json에 스크립트 명령어 별로 env 파일 우선순위를 정할 수 있다.

5️⃣ 리액트로 개발할 때 개발 서버 접속 주소는 기본적으로 localhost:3000이다. 만약 api 서버 주소가 localhostL5000 이라고 하면, 따로 CORS 설정을 해놓지 않은 이상 api request를 날리면 CORS 오류가 발생한다. 그래서 packages.json에서 Proxy 기능을 사용하면 CORS 정책을 우회할 수 있다.

6️⃣ 데이터를 주기적으로 요청하고 응답받을 수 있는 Polling을 이용하여 코인 장의 데이터들을 실시간으로 받아낼 수 있었다.

끝 😶