제가 제작한 로아봇 Repository는 다음 링크에서 확인하세요! (필요하신 분들만 확인해보세요 😅)

서론

2달만에 돌아왔다.

그 간에 사실 별다른 일은 없었는데, 이것저것 신경쓸 일들이 생기는 바람에 벨로그 작성을 소홀히했다. 그리고 Java 내용도 포스팅하면서 아는 내용도 다시 적을 필요성을 최근에 느끼게 되었다. 일단 오늘은 이전에 작성한 Discord.js 라이브러리 마지막으로 사용법을 정리하도록 할 예정이다. (추후에 더 필요한 내용은 작성하도록 하겠습니다.)

따라서 오늘은 로스트아크 전투정보실을 이용하여, 캐릭터 전투정보를 디스코드 채팅창에 출력해주는 기능을 구현으로 우선 마무리를 지어보도록 하겠습니다.

본론

이전 포스팅까지는 마무리 되었다는 가정하에 진행됩니다.
이전 포스팅을 안보셨으면 여기를 눌러서 살펴보시고 오시면 감사하겠습니다.

1. 명령어 정하기

이전 포스팅에서 디스코드 봇 설정을 하고 메시지를 입력하면 콘솔창에 찍히는 것 까지 진행하였다. 디스코드 봇을 사용하다보면 !명령어, #명령어 와 같이 특정한 문자 뒤에 명령어를 쓰는 모습을 볼 수 있다.

그 이유는 해당 봇이 참여하고 있는 서버의 모든 채팅 채널의 채팅 데이터가 서버로 전송되기 때문이다. 따라서 특정 문자가 포함되었을경우 사용자가 봇에게 명령을 보낸다고 암묵적인 약속을 하는 것이다. (이렇게 하지 않으면 사용자가 원하지 않는 상황에서도 명령이 실행되는 경우가 발생할 수 있기 때문이다.)

다음과 같이 채팅 채널에 입력한 데이터가 전부 서버로 들어오는 것을 확인할 수 있다.
따라서 정확한 봇 사용을 위해서는 특정 문구와 동반한 명령어 형태 로 입력하도록 하는 것이 좋다.

그래서 우리는 !(느낌표) 를 이용해서 !<명령어> 내용 형식으로 입력해보도록 하자.

2. 원하는 내용만 추출하기

이제 어떤 명령어를 입력했을 때 봇이 데이터를 가져올지 규율을 정했으니 원하는 데이터를 추출할 수 있도록 해보자.

우선 디스코드 채팅창이 입력된 메시지를 받는 Router는 다음과 같다.

client.on('message', message => {
	console.log(message);
});

따라서 메시지를 로그 찍어보면 다음과 같이 콘솔에 데이터가 출력된다.

<ref *2> Message {
  channel: <ref *1> TextChannel {
    type: 'text',
    deleted: false,
    id: '868357534543650857',
    name: '테스트-채널-2',
    rawPosition: 5,
    parentID: '593065339835908126',
    permissionOverwrites: Collection(0) [Map] {},
    topic: null,
    nsfw: false,
    lastMessageID: '868360251148210246',
    rateLimitPerUser: 0,
    lastPinTimestamp: null,

	----- 생략 ------

    messages: MessageManager {
      cacheType: [class LimitedCollection extends Collection],
      cache: [LimitedCollection [Map]],
      channel: [Circular *1]
    },
    _typing: Map(1) { '316391444765999105' => [Object] }
  },
  deleted: false,
  id: '868360251148210246',
  type: 'DEFAULT',
  system: false,
  content: '메시지 테스트 입니다.',
  author: User {
    id: '316391444765999105',
    system: null,
    locale: null,
    flags: UserFlags { bitfield: 0 },
    username: '이준석',
    bot: false,
    discriminator: '0496',
    avatar: '5eb09554c6c341adfcdbabe0ae8eb091',
    lastMessageID: '868360251148210246',
    lastMessageChannelID: '868357534543650857'
  }
}

(너무 길어서 생략했습니다.)

대략 살펴보면 채널이름(name), 메시지 내용(content), 메시지 작성자(author.username) 등 다양한 내용들을 전달해준다. 우리는 우선 메시지 내용 (content) 에 집중하도록 하자.
(특정 채널에서만 해당 봇이 메시지를 받고 싶다면 채널 이름으로 조건을 걸어서 메시지를 받도록 하셔도 됩니다.)

우선 데이터 형식이 JSON 이기 때문에 데이터 접근 방식은 .(dot) 을 이용해서 타고 타고 들어가면 된다.

그럼 들어온 메시지에서 채팅 내용만 추출하면 다음과 같다.

client.on('message', message => {
	console.log(message.content);
});

그럼 !전투정보 <내용> 으로 입력했을 때 내용에 적힌 데이터만 받을 수 있도록 조금 더 코드를 진행해보자. (!전투정보 는 제가 임의로 정한 명령어라 원하시는 문구로 수정 가능합니다!!)

파싱하는 방법은 여러가지가 있을 수 있는데 다양하게 소개해보도록 하겠습니다.

client.on('message', message => {
	const content = message.content;
	// substring을 이용해서 맨 앞자리가 !전투정보인지 확인
	// (명령어는 항상 맨 앞에 쓴다는 강제성 필요!)
	console.log(content.substring(0, 5) === '!전투정보');		// 명령어 확인
	console.log(content.substring(6, content.length).trim());	// <내용>
	// 메시지 내용중 랜덤한 어느 부분에 !전투정보가 들어있는 경우
	console.log(content.includes("!전투정보"));			// 명령어 확인
	console.log(content.replace("!전투정보", "").trim());		// <내용>
	// !전투정보 <내용>으로 명령어와 내용 사이에 공백을 이용해서 
  	// split을 한 후 공백을 기준으로 앞 쪽의 데이터가 !전투정보인지 확인
	// (사용자가 공백을 입력하지 않으면 에러가 발생할 수 있음)
	console.log(content.split(" ")[0] === '!전투정보');		// 명령어 확인
	console.log(content.split(" ")[1]);				// 내용
});

true
저거좀
true
저거좀
true
저거좀

이정도를 이용해서 명령어가 입력되었는지 확인할 수 있을 것 같습니다. (trim은 문자의 양 옆의 공백을 제거해줍니다.)

3. 로스트아크 전투정보실 데이터 조회 방법 (Axios)

위에서 채팅 메시지가 들어오면 명령어를 확인하는 방법과 <내용>을 추출하는 방법을 살펴보았는데 이제는 들어온 내용을 가지고 직접 데이터를 조회하는 방법을 살펴보도록 할 예정이다.

데이터를 조회하기 위해서 axios 라는 라이브러리를 이용할 예정인데 간략하게 설명하자면 Node.js 에서 HTTP 요청을 보다 쉽게 사용할 수 있도록 만들어진 Promise 기반의 라이브러리이다. 자세한 내용은 여기를 눌러서 확인하세요.

따라서 해당 라이브러리를 다운받을 예정인데 다운 받는 명령어는 다음과 같다.

npm install axios --save

다운을 받았으면 사용할 수 있도록 코드에 추가해주어야 하는데 다음과 같이 추가할 수 있다.

const axios = require('axios');

여태까지 적은 코드를 살펴보면 다음과 같다.

// require the discord.js module
const Discord = require('discord.js');
const axios = require('axios');		// 추가

// create a new Discord client
const client = new Discord.Client();

// when the client is ready, run this code
// this event will only trigger one time after logging in
client.once('ready', () => {
	console.log('Ready !!!');
});

// login to Discord with your app's token
client.login('your-login-token');

client.on('message', message => {
	const content = message.content;
	// substring을 이용해서 맨 앞자리가 !전투정보인지 확인
	// (명령어는 항상 맨 앞에 쓴다는 강제성 필요!)
	console.log(content.substring(0, 5) === '!전투정보');
	console.log(content.substring(6, content.length).trim());
	// 메시지 내용중 랜덤한 어느 부분에 !전투정보가 들어있는 경우
	console.log(content.includes("!전투정보"));
	console.log(content.replace("!전투정보", "").trim());
	// !전투정보 <내용>으로 명령어와 내용 사이에 공백을 이용해서 split(쪼개다) 한 후
	// 공백을 기준으로 앞 쪽의 데이터가 !전투정보인지 확인
	// (사용자가 공백을 입력하지 않으면 에러가 발생할 수 있음)
	console.log(content.split(" ")[0] === '!전투정보');
	console.log(content.split(" ")[1]);
});

따라서 axios 를 이용해서 HTTP 요청을 보내보도록 하자. 그 전에 로스트아크 전투정보실 URL 을 확인해야 되는데 제가 알아온 결과 다음과 같습니다.

https://lostark.game.onstove.com/Profile/Character

그리고 검색을 해보면 다음과 같이 URL이 변경된다.

https://lostark.game.onstove.com/Profile/Character/저거좀

따라서 여기서 얻을 수 있는 힌트는 Character/ 다음에 닉네임을 적어주면 전투정보가 검색된다는 것을 얻을 수 있다.

해당 부분을 코드로 적어보면 다음과 같다.

client.on('message', async(message) => {
	const content = message.content;
	const contentArr = content.split(" ");
	const command = contentArr[0];
	const nickname = contentArr[1];
	if(command === '!전투정보'){
		const encodeNickName = encodeURI(nickname);
		const html = await axios.get(`https://lostark.game.onstove.com/Profile/Character/${encodeNickName}`);
		console.log(html);
	}
});

설명하기에 앞서 axios는 Promise 기반의 비동기 통신을 하기 때문에 코드가 끝날 때 까지 대기하지 않습니다. 그렇기 때문에 async 와 await를 이용해서 동기 방식과 같이 코드를 사용할 수 있습니다. 자세한 내용은 여기를 클릭!

1. 우선 채팅 메시지를 공백을 기준으로 나눈다.

2. 맨 앞에는 명령어, 그 다음은 내용이라고 가정한다.

3. command가 !전투정보 일 경우 다음을 실행

4. nickname 정보가 한글일 경우 다음과 같은 에러가 뜬다.

   • UnhandledPromiseRejectionWarning: TypeError [ERR_UNESCAPED_CHARACTERS]: Request path contains unescaped characters
   • 따라서 encodeURI 라이브러리를 이용해서 한글을 UTF-8 로 인코딩해서 전달해줄 수 있도록 한다. (자세한 내용은 여기 참고)

5. axios 에서 get 방식을 이용해서 정보를 가져온다.

6. 로스트아크 전투정보실 html 태그 전체가 콘솔창에 찍히게 된다.

대충 이런식으로 찍히게 된다.

따라서 html 로 들어온 데이터 중에서 우리에게 필요한 정보만을 파싱해보도록 하자.

4. HTML 데이터 파싱하기 (Cheerio)

다행이도 아주 고맙게 html 데이터를 파싱할 수 있는 라이브러리가 존재한다.
우리는 해당 라이브러리를 이용할 예정인데 다운로드는 다음 명령어로 할 수 있다.

npm install cheerio --save

Cheerio 가 html 만 파싱할 수 있는 것이 아니라 Markup 형태의 데이터를 파싱할 수 있도록 도와주는 라이브러리다. 그런데 Markup 언어중에서 단연 제일 유명한 언어가 html 이어서 html 파싱에 많이 사용되고 있다고 생각하면 될 것 같다.

또한 Cheerio 의 설명을 보면 다음과 같이 적혀있다.

Cheerio's selector implementation is nearly identical to jQuery's, so the API is very similar.

Cheerio 의 셀렉터 구현이 JQuery 와 유사하다고 나와있다. 따라서 JQuery 에서 사용하는 문법들로 편하게 사용할 수 있다. 그리고 데이터를 받을 때 $로 받는 이유도 다음과 같은 이유에서 인 것 같다.

좀 더 자세한 내용을 보고 싶으시면 여기를 참고하시면 될 것 같습니다.

각설하고, 본격적으로 파싱을 시작해보면 axios 로 받은 데이터를 변수에 저장하고 Cheerio 에 전달해주도록 하자.

client.on('message', async(message) => {
	const content = message.content;
	const contentArr = content.split(" ");
	const command = contentArr[0];
	const nickname = contentArr[1];
	if(command === '!전투정보'){
		const encodeNickName = encodeURI(nickname);
		const html = await axios.get(`https://lostark.game.onstove.com/Profile/Character/${encodeNickName}`);
		const $ = cheerio.load(html.data);
	}
});

axios로 호출한 리턴값에 우리가 원하는 데이터는 data 라는 키 밑에 들어있다. (https://jsonplaceholder.typicode.com/users 테스트 요청한 결과값)

{
  status: 200,
  statusText: 'OK',
 
    ----- 생략 ------
  
  },
  data: [
    {
      id: 1,
      name: 'Leanne Graham',
      username: 'Bret',
      email: 'Sincere@april.biz',
      address: [Object],
      phone: '1-770-736-8031 x56442',
      website: 'hildegard.org',
      company: [Object]
    },
    {
      id: 2,
      name: 'Ervin Howell',
      username: 'Antonette',
      email: 'Shanna@melissa.tv',
      address: [Object],
      phone: '010-692-6593 x09125',
      website: 'anastasia.net',
      company: [Object]
    }
  ]
}

따라서 cheerio 에 데이터를 전달해줄때 html.data 로 전달해주면 된다.
(html.data 에 전투정보실 html 정보가 들어있을 것이다.)

이제부터 진짜 진짜로 데이터를 파싱해야되는데 먼저 element 의 구조를 살펴보아야 한다.

닉네임의 경우 span 태그인데 className이 profile-character-info__name인 곳에 들어있다. 왜 알아야하냐? Cheerio 에서 해당 경로로 찾아서 들어가야지 정보를 찾을 수 있다. 바로 코드로 설명하도록 하겠다.

const encodeNickName = encodeURI(nickName);
const html = await axios.get(`https://lostark.game.onstove.com/Profile/Character/${encodeNickName}`);
const $ = cheerio.load(html.data);
const userName = $("span.profile-character-info__name").text();
console.log(`로스트아크 전투정보실에서 가져온 닉네임 이름은 <${userName}> 입니다.`);

출력내용 : 로스트아크 전투정보실에서 가져온 닉네임 이름은 <저거좀> 입니다.

• cheerio.load(html.data) : cheerio 에 html 데이터를 로드한다.
• $("span.profile-character-info__name").text(); : className 이 profile-character-info__name 인 태그의 innerText 를 가져온다.

그래서 데이터가 어떤 태그에 저장되어있는지 정도는 확인을 손수 해야지만 원하는 데이터를 가져올 수 있다.

위에서 text() 로 데이터를 가져오고 있는데 태그를 살펴보면 title 속성에도 닉네임 정보가 저장되어있는데 속성 값을 추출할 때는 다음과 같이 사용할 수 있다.

const userName = $("span.profile-character-info__name").attr("title");

이외에도 간단하게 직업, 레벨들을 가져오는 코드는 다음과 같다.

const level = $("span.profile-character-info__lv").text();
const job = $("img.profile-character-info__img").attr("alt");

본인의 코드는 참고용이지 정답은 아닙니다! 더 좋은 코드가 있을 수 있습니다!

5. Discord에 채팅 보내기

마지막이다.

이제 가져온 데이터를 디스코드 채널에 전송하는 부분을 알아보도록 하자.

일단 채널로 다시 메시지를 전송하는 부분은 굉장히 쉽다. 코드로 보면 다음과 같다. (공식문서 참고는 여기서 하시면 됩니다.)

const $ = cheerio.load(html.data);
const userName = $("span.profile-character-info__name").attr("title");
const level = $("span.profile-character-info__lv").text();
const job = $("img.profile-character-info__img").attr("alt");
await message.channel.send(`${userName}의 레벨은 ${level}이고 직업은 ${job}입니다.`);

그러면 다음과 같이 출력됩니다.

마지막 줄의 의미가 message 객체에 저장된 channel 로 메시지를 전송한다고 생각하면 될 것 같다.

참고사항

하지만 이렇게 보내면 밋밋해서 재미가 없다. 따라서 MessageEmbed 를 이용해서 좀 더 다채롭게 메시지를 보낼 수 있는데 예시는 다음과 같다.

• 해당 내용은 공식링크로 대체하겠습니다. 😅😅
• 그리고 검색하다가 찾은 예제 사이트인데 해당 사이트도 참고하기 좋은 것 같아서 링크 걸어두겠습니다.

결론

오랜만에 벨로그 포스팅을 했는데 시간이 꽤나 걸렸다. 하지만 이거만큼 좋은 포스폴리오는 없다고 생각한다. 앞으로는 진짜 진짜로 꾸준히 포스팅해서 게시글 개수좀 늘리고 조회수가 높은 벨로그로 발돋움 하고싶다.

그럼 오늘은 이렇게 마무리하겠습니다.

긴 글 읽어주셔서 감사합니다.