# 브롤스타즈 API 전적 사이트 : 개요 및 개발 환경

- Author: @laetipark
- Published: 2023-06-03
- Updated: 2023-10-10
- Source: http://blex.me/@laetipark/%EB%B8%8C%EB%A1%A4%EC%8A%A4%ED%83%80%EC%A6%88-api-%EC%A0%84%EC%A0%81-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EA%B0%9C%EC%9A%94-%EB%B0%8F-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD
- Tags: javascript, nodejs, 포트폴리오, express, api, 브롤스타즈, react

---

## 개요
![](https://static.blex.me/images/content/2023/6/3/20236322_aKy4P9Y96tAVELVbf12N.jpg "230604 기준 Blossom Stats")
![](https://static.blex.me/images/content/2023/10/3/202310321_Fu4nM7SNpGL6dWStPabO.png)
이 시리즈에서는 내가 개발하면서 자원을 어떻게 활용했는지, 내가 코드 작성하면서 공부한 것들을 정리할 예정이다.
시리즈에서 다룰 내용 중 하나인 **브롤스타즈 전적 사이트**인 **Blossom Stats**와 **Brawl Tree**는 내가 헤딩하면서 만들어가고 있는 첫 개인 프로젝트이다.
- Blossom Stats : 같이 게임을 즐기는 클럽원 전용으로 만든 전적 사이트 프로젝트이다.
- Brawl Tree : 더 많은 사람들이 이용할 수 있고, 많은 데이터를 수집하기 위해 확장한 전적 사이트 프로젝트이다.

![](https://static.blex.me/images/content/2023/6/1/20236116_x8PKRI4mkgjSsyJsqlhT.jpg "와...!")  
우선은 내가 개발한다는 것 대한 흥미를 불어 넣어주신 **'탱이(닉네임)'형님**에게 감사드린다는 말씀을 올린다.
형님이 먼저 만드신 틀이 내가 이것을 개발하게 된 계기였다. 근래 이름 있는 프로젝트를 작업하고 계셔서 내 마음 기준 업계 대단하신 분 중 한 분이라 생각하고, 앞으로도 하시는 일이 잘 되시면 좋겠다 :)

기존 사이트 코드는 `python`을 통해 공식 API에서 데이터를 받아오고, 파일로 저장해 HTML 파일에서 볼 수 있는 방식이었다.

![](https://static.blex.me/images/content/2023/6/1/20236116_PyH6UBEB8Y2pui9CJarm.jpg)
처음으로 찍먹으로 배운 `javascript`와 `css`를 이용해서 웹 디자인을 바꾸고 했었는데, 당시의 코드나 데이터베이스 구성들을 보면 앞으로 코드 관리나 내가 생각해 본 기능을 추가해 만들기에는 어려움이 있을 거 같았다.

그래서 웹 공부를 시작할 겸 **Blossom Stats**라는 이름으로 처음부터 만들어 보기로 하였다.


## 개발 환경
![](https://static.blex.me/images/content/2023/6/4/2023641_4z9ED2DroyPq0XTGyNGi.png)
![](https://static.blex.me/images/content/2023/10/3/202310321_hgHE63zLpcA61lg9mGkE.png)
- 언어 및 런타임 환경 : Javascript , Typescript , Node.js
- 클라우드 서비스 : Oracle Cloud
- 데이터베이스 : Mysql 8.0
- 도구 : Intellij IDEA, WebStorm, Github, Notion

### Scheduler
- 프로젝트 주소 : https://github.com/laetipark/brawltree-scheduler

### Backend
- 프로젝트 주소 : https://github.com/laetipark/brawltree-backend
- 프레임워크 : ~~Express~~ → NestJS

### Frontend 
![](https://static.blex.me/images/content/2023/10/3/202310321_AETGabtQoluFxOaYQPCT.png)
![](https://static.blex.me/images/content/2023/10/3/202310321_DoAfyjZ2B351ZWANOOCM.png)
- 라이브러리 : React
- 프로젝트 주소 : https://github.com/laetipark/brawltree-frontend
- 링크 : https://brawltree.me/
- 링크 : https://blossomstats.site/

### Discord Bot
![](https://static.blex.me/images/content/2023/6/4/2023641_pZVzm0wnI89tBXNHnq1l.png)
- 프로젝트 주소 : https://github.com/laetipark/blossom-bot
- 라이브러리 : Discord.js