크롬(Chrome)은 들어봤는데 크론(Cron)이요?

서두

현재 만들고 있는 암호화폐 거래 사이트에서 코인 회사 정보를 더미 데이터로 DB에 넣어서 사용했는데 조금 더 실제 사이트처럼 만들고 싶어서 CoinMarketCap API를 이용하여 실제 코인 회사 정보를 받아오게 했습니다. 어떻게 개선했는지 소개하겠습니다. 😃

 

본문

• 기존 코인 데이터의 테이블

 

10개의 더미 데이터를 DB에 저장하여 간단하게 데이터만 응답해주는 방식으로 구현을 했었습니다.

그러나 구현하고 싶었던 무한스크롤과 변동이 잦은 데이터를 어떻게 업데이트하고 저장할지 등 도전해보고 싶었던 부분들이 존재했습니다.

 

결론적으로 CoinMarketCap API를 활용해서 데이터를 DB에 저장하고, Node Cron으로 5분마다 갱신된 데이터를 받아올 수 있었으며, 페이징(paging)까지 구현하여 무한스크롤을 구현할 수 있었습니다.

 

사실 결과를 얻기까지 시행착오가 있었습니다. 클라이언트 요청 시 wisecrypto(현재 개발 중인 서버) 서버에 요청을 보낸 다음 서버에서 다시 CoinMarketCap 서버로 요청을 보내서 데이터를 가져오는 방식으로 구현했는데 이 과정에서 자꾸 429(Too Many Requests) 에러가 발생했습니다.

이 에러가 발생하면서 기존에 받아오려고 했던 데이터의 개수를 다 받아오지 못하고 최소 10개에서 최대 30개 미만의 데이터만 쌓이는 걸 확인할 수 있었습니다. 처음엔 데이터를 받아오는 요청을 너무 많이 해서 제한이 걸린건가? 싶었지만 요청 횟수는 최대 만 번이였고, 에러 메시지를 자세히 읽어보니 원인은 반복문 안에서 코인 회사 이미지를 받아오는 http 요청 때문에 발생한 에러였습니다.

try {
		const marketDetail = await getCoinMarketCap(limit);

		if (!marketDetail) {
			return response.status(500).send('Failed to fetch market detail');
		}

		await connection.beginTransaction();
		//! Error 발생 근원지...
		for (const market of marketDetail) {
			const { id, name, symbol, quote } = market;
			const { price, percent_change_24h } = quote['USD'];
			const marketImage = await getMarketImage(id);

			// ...
	} catch (error) {
		console.error(error);
		return response.status(500).send('Internal Server Error');
	// ...

 

그렇다면 원하는 개수만큼 데이터가 제대로 들어오는지 확인하기 위해 단순히 코인 회사 정보만 요청을 보내봤는데 데이터가 알맞게 오는 것을 확인할 수 있었습니다.

1000개의 데이터가 들어오는 것 확인

또한 기존에 클라이언트와 서버 통신 흐름이 어색하기도 하고, 요청도 너무 오래걸려 개선하기 위해 앞서 받아온 1000개의 데이터를 미리 DB에 저장하고, 이후 5분마다 갱신해주어 결국 클라이언트는 wisecrypto 서버하고만 통신할 수 있게 변경했습니다.

 

데이터를 업데이트 해주기 위해서 cron을 사용했는데 cron은 고정된 시간에 어떤 작업을 주기적으로 실행할 수 있게 도와주는 스케줄러입니다. 

https://www.npmjs.com/package/node-cron

node-cron

 

추가로 페이징을 구현하여 무한스크롤까지 구현할 수 있었습니다.

Intersection Observer로 구현한 무한 스크롤

 

결미

기존 더미 데이터에서 실제 데이터로 변경하여 주기적으로 데이터를 업데이트하고, 페이징까지 구현하면서 배운 것이 참 많았습니다.

특히 클라이언트와 서버, Open API 서버 이 셋을 관심사 분리로 접근하여 어색한 흐름을 잡을 수 있었던 좋은 경험이였던 것 같습니다.