# 브롤스타즈 API 전적 사이트 : 토큰 키 발급 및 클럽 플레이어 정보 불러오기

- Author: @laetipark
- Published: 2023-07-01
- Updated: 2023-07-23
- 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-%ED%86%A0%ED%81%B0-%ED%82%A4-%EB%B0%9C%EA%B8%89-%EB%B0%8F-%ED%81%B4%EB%9F%BD-%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4-%EC%A0%95%EB%B3%B4-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0
- Tags: javascript, nodejs, 포트폴리오, express, api, 브롤스타즈, react

---

## 목차
- [개요 및 개발 환경](https://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)
- **토큰 키 발급 및 클럽 플레이어 정보 불러오기(현재 글)**
- [플레이어 전투 기록 불러오기](https://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-%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4-%EC%A0%84%ED%88%AC-%EA%B8%B0%EB%A1%9D-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0)

## 토큰 키 발급
![](https://static.blex.me/images/content/2023/7/1/20237120_SERJb3aMbRCdZJwEUBvZ.png)
브롤스타즈 API 페이지에 회원 가입하고 로그인하여, 오른쪽 상단에 `My Account` 버튼을 클릭하고 `Create New Key` 버튼을 클릭해 **새로운 토큰 키** 발급 과정을 진행할 수 있다.

![](https://static.blex.me/images/content/2023/7/1/20237121_zc7JEqPRpHRGLKyRUuy2.png)
키 이름과 설명을 작성한 다음 작업할 IP 주소를 넣어 `Create Key`버튼을 누르면 토큰 키가 발급 완료된다.

![](https://static.blex.me/images/content/2023/7/1/20237121_a3QtMlWFiiyKM8hfS7Nu.png)
새로 생긴 토큰 키를 클릭하면 토큰 값을 확인할 수 있다. 해당 토큰 값을 이용해 데이터를 불러올 수 있다.

## API로 클럽 내 플레이어 정보 불러오기
### Club API 문서 확인
![](https://static.blex.me/images/content/2023/7/1/20237123_U3hAVEYYt6JTntZ6TwDQ.png)
`Documentation` 메뉴로 이동하면 API 목록을 확인할 수 있다. API 목록의 대분류는 23년 7월 1일 기준으로 사진과 같이 있으며, 클럽 플레이어에 대한 정보를 불러올 것이기 때문에 `clubs` 목록을 펼친다.

![](https://static.blex.me/images/content/2023/7/1/20237123_6P7R826CdShajdiRZpzy.png)
`/clubs/{clubTag}/members`를 통해 클럽 내 멤버 정보를 불러올 수 있다. 
![](https://static.blex.me/images/content/2023/7/1/20237123_TJIkhNPYf2p9vJJVISN2.png)  
Parameters에 있는 `clubTag` 에 `클럽 태그`를 입력해 `실행(Execute) 버튼`을 누르면 `요청 URL`과 `응답 결과`를 확인할 수 있다.
![](https://static.blex.me/images/content/2023/7/1/20237123_diJZnByxsPy73hEfzoJr.png)  
요청 URL의 `#태그`의 경우 `%23태그`로 변환되며, 성공적으로 불러오면 사진과 같이 json 배열을 확인할 수 있다.

### Club Members json 배열 요소
- tag : 플레이어 태그
- name : 플레이어 닉네임
- nameColor : 플레이어 닉네임 색상
- role : 플레이어 클럽 역할(member, senior, vicePresident, president)
- trophies : 현재 트로피 개수
- icon : 플레이어 프로필 아이콘

### Club Members 태그 목록 배열 코드
node,js에서 **클럽 멤버 태그 목록으로 이루어진 배열**을 아래와 같이 불러올 수 있다.
```javascript
await fetch(`https://api.brawlstars.com/v1/clubs/%23태그/members`, {
    method: "GET",
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + 토큰 값
    }
}).then(async res => {
    const members = await res.json(); // json으로 불러오기
    return members.items.map(club => club.tag); // map 함수로 플레이어 태그만 배열로 불러오기
});
```
![](https://static.blex.me/images/content/2023/7/2/2023721_Ve5GbM6zjVS6GsKdHAKb.png)  
클럽 멤버들의 플레이어 태그를 위 사진과 같이 불러온 모습이다.

### Player API 문서 확인
![](https://static.blex.me/images/content/2023/7/2/2023720_TMXvb8iqH4ZsxRxRzRZH.png)
`/players/{playerTag}`를 통해 **플레이어 정보**를 불러올 수 있으며, `플레이어 태그`를 입력하면 `요청 URL`과 `응답 결과`를 확인할 수 있다.

### Player json 요소
지금도 사용되는 **플레이어 json 요소**들을 정리해보았다.
- tag : 플레이어 태그
- name : 플레이어 닉네임
- nameColor : 플레이어 닉네임 색상
- icon : 플레이어 프로필 아이콘
- trophies : 현재 트로피 개수
- highestTrophies : 현재 트로피 개수
- isQualifiedFromChampionshipChallenge : 챔피언십 챌린지 완료 여부
- 3vs3Victories : 3vs3 모드 승리 횟수
- soloVictories : 솔로 모드 승리 횟수
- duoVictories : 듀오 모드 승리 횟수
- club : 플레이어 클럽 정보(태그, 클럽 이름)
- brawlers : 소유 브롤러 정보(브롤러 ID, 브롤러 이름, 파워 레벨, 랭크, 현재 트로피/최대 트로피 개수, 소유한 기어/스타 파워/가젯)

### Player 정보 코드
위에서 불러온 `Club Members 태그 목록 배열`을 이용해 반복문으로 **플레이어 정보**를 불러왔다.
```javascript
// members : 클럽 멤버 태그 목록으로 이루어진 배열
for (const member of members) {
    ...
		const responseMember = await fetch(`https://api.brawlstars.com/v1/players/${member.replace("#", "%23")}`, {
			method: "GET",
			headers: {
				'Content-Type': 'application/json',
				'Authorization': 'Bearer ' + 토큰 값
			}
	}).then(res => res.json());
		... 
		// responseMember에서 위에서 정리한 json 요소들로 접근이 가능하다.
		// ex ) const tag = responseMember.tag;
}
```

## 다음에 다룰 내용
다음 글은 플레이어의 최근 전투 기록을 불러오는 것과 최근 전투 기록을 통해 추가적인 플레이어 정보를 불러오는 과정에 대해 정리해보려 한다.